skipper-organisms
Version:
A vanilla JavaScript library for skipperhospitality management
123 lines (117 loc) • 4.84 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="../../favicon.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Organisms</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/skipper-organisms@0.0.5/dist/day-range-picker.min.css">
<!-- <link rel="stylesheet" href="../styles/day-range-picker.css"/> -->
</head>
<body>
<a href="/calendar.html">Date Range Picker</a>
<div>
<div class="grid px-3 pt-4 pb-7">
<label class="form_label text-center">Check In</label>
<input
type="text"
class="hidden"
name="check-in"
id="datepicker-check-in"
value=""/>
<label
class="datepicker text-center"
for="datepicker-check-in"
id="datepicker-check-in-label">
18 <small>Feb</small>
</label>
</div>
<div class="grid px-3 pt-4 pb-7">
<label class="form_label">Check Out</label>
<input
type="text"
class="hidden"
name="check-in"
id="datepicker-check-out"
value=""/>
<label
class="datepicker text-center"
for="datepicker-check-out"
id="datepicker-check-out-label">
19 <small>Feb</small>
</label>
</div>
</div>
<script type="module">
import { DayRangePicker } from "https://cdn.jsdelivr.net/npm/skipper-organisms@0.0.5/dist/day-range-picker.es.js";
const prices = [
{
date: '2022-03-05T14:48:00.000Z',
price: 110
}, {
date: '2022-03-06T14:48:00.000Z',
price: 112
}, {
date: '2022-03-07T14:48:00.000Z',
price: 111
}, {
date: '2022-03-09T14:48:00.000Z',
price: 115
}, {
date: '2022-03-11T14:48:00.000Z',
price: 110
}, {
date: '2022-03-14T14:48:00.000Z',
price: 122
}, {
date: '2022-03-15T14:48:00.000Z',
price: 121
}, {
date: '2022-03-19T14:48:00.000Z',
price: 121
}
]
const checkIn = document.getElementById("datepicker-check-in");
const checkInLabel = document.getElementById("datepicker-check-in-label");
const checkOut = document.getElementById("datepicker-check-out");
const checkOutLabel = document.getElementById("datepicker-check-out-label");
let startDate = new Date();
startDate.setDate(startDate.getDate() + 1);
let endDate = new Date();
endDate.setDate(endDate.getDate() + 2);
let minDate = new Date();
minDate.setDate(minDate.getDate() - 2); //starting day is 2 days from now
let maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 120); //maxlimit is 60 days from now;
// document.addEventListener("DOMContentLoaded", function () {
console.log('DOMContentLoaded');
var picker = new DayRangePicker({
checkIn,
checkInLabel,
checkOut,
checkOutLabel,
startDate,
endDate,
minDate,
maxDate,
showPrice: true,
format: "DD/MM/YYYY"
});
startDate.setDate(startDate.getDate() + 1);
endDate.setDate(endDate.getDate() + 2)
// picker.setDateRange(startDate, endDate);
startDate.setDate(startDate.getDate() + 1);
picker.selectStartDate(startDate);
picker.selectEndDate(endDate);
picker.goToNextMonth();
picker.goToPrevMonth();
picker.setPriceList(prices)
console.log(picker.getCurrentDateRange());
console.log(picker.getCurrentEndDate());
console.log(picker.getCurrentStartDate());
// });
// var picker = new DayRangePicker({field: document.getElementById("datepicker"), minDate, maxDate, showPrice: false, format: "DD/MM/YYYY"});
//var dp = new DayRangePicker({checkIn: document.getElementById("dp"), format: "yyyy-MM-dd"});
</script>
</body>
</html>