Datetimepicker logo Datetimepicker

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.