33 lines
1.6 KiB
HTML
33 lines
1.6 KiB
HTML
<form method="GET" id="datePicker">
|
|
<input type="hidden" name="startDate" value="{{start_date.isoformat}}" id="startDate">
|
|
<input type="hidden" name="endDate" value="{{end_date.isoformat}}" id="endDate">
|
|
</form>
|
|
<input type="input" id="rangePicker" placeholder="Date range" class="input ~neutral bg-neutral-000 cursor-pointer" readonly>
|
|
<style>
|
|
:root {
|
|
--litepickerMonthButtonHover: var(--color-urge);
|
|
--litepickerDayColorHover: var(--color-urge);
|
|
--litepickerDayIsTodayColor: var(--color-urge);
|
|
--litepickerDayIsInRange: var(--color-urge-normal-fill);
|
|
--litepickerDayIsStartBg: var(--color-urge);
|
|
--litepickerDayIsEndBg: var(--color-urge);
|
|
--litepickerButtonApplyBg: var(--color-urge);
|
|
}
|
|
</style>
|
|
<script>
|
|
var picker = new Litepicker({
|
|
element: document.getElementById('rangePicker'),
|
|
singleMode: false,
|
|
format: 'MMM D, YYYY',
|
|
maxDate: new Date(),
|
|
startDate: Date.parse(document.getElementById("startDate").getAttribute("value")),
|
|
endDate: Date.parse(document.getElementById("endDate").getAttribute("value")),
|
|
onSelect: function (startDate, endDate) {
|
|
document.getElementById("startDate").setAttribute("value", startDate.getFullYear() +
|
|
"-" + (startDate.getMonth() + 1) + "-" + startDate.getDate());
|
|
document.getElementById("endDate").setAttribute("value", endDate.getFullYear() + "-" +
|
|
(endDate.getMonth() + 1) + "-" + endDate.getDate());
|
|
document.getElementById("datePicker").submit();
|
|
}
|
|
});
|
|
</script> |