Skip to content

Instantly share code, notes, and snippets.

@Patrick64

Patrick64/reefine date range.html

Created March 2, 2025 17:58
Show Gist options
  • Save Patrick64/980fc3b019f5ad046e365e28e4f03b5f to your computer and use it in GitHub Desktop.
Save Patrick64/980fc3b019f5ad046e365e28e4f03b5f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
reefine date range.html
<!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"/>
&mdash; <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