Examples
Capture selected date
let datetimepicker = new Datetimepicker();
datetimepicker.addListener('dtp:action:click', (e) => {
if (e.detail.action == 'accept') {
let dateTime = e.detail.dateTime.toLocaleDateString(undefined, {
year: 'numeric', month: 'long', day: 'numeric',
hour: '2-digit', minute: '2-digit',
hour12: true
});
document.getElementById('selected-datetime').textContent = dateTime;
}
});
nothing selected
Limit selectable dates
let today = new Date();
let datetimepicker = new Datetimepicker({
selectedDate: today,
minDate: (new Date()).setDate(today.getDate() - 15),
maxDate: (new Date()).setDate(today.getDate() + 15)
});
Date range
let dtpFrom = new Datetimepicker();
let dtpTo = new Datetimepicker();
dtpFrom.addListener('dtp:action:click', (e) => {
if (e.detail.action == 'accept') {
dtpTo.setLimitDate('min', e.detail.dateTime);
}
});
dtpTo.addListener('dtp:action:click', (e) => {
if (e.detail.action == 'accept') {
dtpFrom.setLimitDate('max', e.detail.dateTime);
}
});
Calendar only
let datetimepicker = new Datetimepicker({
template: calendarTplConfig
});
datetimepicker.addListener('dtp:day:click', (e) => {
let dateTime = e.detail.dateTime.toLocaleDateString(undefined, {
year: 'numeric', month: 'long', day: 'numeric',
hour: '2-digit', minute: '2-digit',
hour12: true
});
document.getElementById('selected-datetime').textContent = dateTime;
});
nothing selected
calendarTplConfig
is a custom template that removes the hour selector, the action buttons and hides the picker when a day is clicked.
You can take a look to the different configs and styles under “templates” folder.