Created
March 2, 2025 17:58
-
-
Save Patrick64/980fc3b019f5ad046e365e28e4f03b5f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>easepick 1.2.1 | configurator 1.0.8</title> | |
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script> | |
</head> | |
<body> | |
{exp:reefine channel="test_date_range" | |
filter:book_dates:fields="event_from|event_to" | |
filter:book_dates:type="number_range" | |
filter:book_dates:where_after="1551459960" | |
method="get" | |
parse="inward" | |
} | |
{book_dates} | |
<div class="reefine_number_range {group_name}_container"> | |
<h3 class="group_{group_name}"><label for="{group_name}">{label}</label></h3> | |
{filters} | |
<div class="number_range"> | |
<input id="datepicker"/> | |
<form method="get" id="date_range_form"> | |
<input type="text" name="{group_name}_min" id="{group_name}_min" data-filter-min="{filter_min}" | |
value="{filter_min_value}" aria-label="Minimum value" class="min-date"/> | |
— <input type="text" name="{group_name}_max" id="{group_name}_max" data-filter-min="{filter_max}" | |
value="{filter_max_value}" aria-label="Maximum value" class="max-date"/> | |
</div> | |
</form> | |
{/filters} | |
</div> | |
{/book_dates} | |
{entries} | |
<pre> | |
[entryids:{entry_ids}] ==active filtes:{active_groups}{filters}{if filter_active}{filter_value}, {/if}{/filters} {/active_groups}== | |
</pre> | |
{exp:channel:entries entry_id="{entry_ids}" dynamic="no"} | |
<div style="display:inline-block; width:12rem; padding:1rem;"> | |
<strong>{title}</strong><br> | |
{event_from} {event_from format="%d %M %Y"} to {event_to format="%d %M %Y"} | |
</div> | |
{/exp:channel:entries} | |
{/entries} | |
{/exp:reefine} | |
<div style="display:inline-block; width:12rem; height:20em; padding:1rem;"></div> | |
<script> | |
const DateTime = easepick.DateTime; | |
const startEpoc = document.querySelector('.min-date').value; | |
const endEpoc = document.querySelector('.max-date').value; | |
const startDate = startEpoc ? new DateTime(parseInt(startEpoc) * 1000) : null; | |
const endDate = endEpoc ? new DateTime(parseInt(endEpoc) * 1000) : null; | |
const minEpoc = document.querySelector('.min-date').getAttribute('data-filter-min'); | |
const maxEpoc = document.querySelector('.max-date').getAttribute('data-filter-max'); | |
const minDate = minEpoc ? new DateTime(parseInt(minEpoc) * 1000) : null; | |
const maxDate = maxEpoc ? new DateTime(parseInt(maxEpoc) * 1000) : null; | |
function getStartOfDay(datetime) { | |
datetime.setHours(0, 0, 0, 0); | |
return datetime; | |
} | |
function getEndOfDay(datetime) { | |
datetime.setHours(23, 59, 59); | |
return datetime; | |
} | |
const picker = new easepick.create({ | |
element: document.getElementById('datepicker'), | |
css: [ | |
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css', | |
'https://easepick.com/css/demo_hotelcal.css', | |
], | |
plugins: ['RangePlugin', 'LockPlugin'], | |
RangePlugin: { | |
startDate: startDate, | |
endDate: endDate, | |
tooltipNumber(num) { | |
return num - 1; | |
}, | |
locale: { | |
one: 'night', | |
other: 'nights', | |
}, | |
}, | |
LockPlugin: { | |
minDate: minDate, | |
minDays: 1, | |
maxDate: maxDate, | |
inseparable: true, | |
}, | |
setup(picker) { | |
picker.on('select', (e) => { | |
const { start, end } = e.detail; | |
document.querySelector('.min-date').value = start ? (getStartOfDay(start)).getTime() / 1000 : ''; | |
document.querySelector('.max-date').value = end ? (getEndOfDay(end)).getTime() / 1000 : ''; | |
document.getElementById('date_range_form').submit(); | |
}); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment