Datetimepicker

constructor Object: config, Boolean: initialize

• config: optional. Configuration.
• initialize: optional. Sets whether the picker has to be initialized. Default: true.

Datetimepicker uses Modi and Calendar packages, so the config object merges the configuration of both.

Config structure:

config = {
  {Modi config},
  calendar: {Calendar config},
  minDate: {String|Number|Date},
  maxDate: {String|Number|Date},
  selectedDate: {String|Number|Date}
}

• Modi config.
• Calendar config.

Default config:

config = {
  eventsNamespace: 'dtp',
  template: <defaultTemplate>,
  minDate: null,
  maxDate: null,
  selectedDate: new Date(),
  calendar: {
    week: {
      namesType: 'mini'
    }
  }
}

Datetimepicker extends Modi, so, in addition to the following properties, methods and events, those offered by the base class are also available.

Properties

calendar Calendar

Calendar instance.

selectedDate Date

Default selected date.

hoursRange Array

Hours range.

minutesRange Array

Minutes range.

Methods

changeMonth Date: date

Change selected month.

• date: new calendar date.

refreshCalendar

Redraw calendar.

setSelectedDay String|Number|Date: day, Boolean: changeMonth

Set selected day.

• day: new selected day.
• changeMonth: change month when needed.

setLimitDate String: type, String|Number|Date: date, Boolean: refresh

Set calendar limits.

• type: limit type (min or max).
• date: limit date.
• refresh: refresh calendar. Default: true.

getDayElementByDate String|Number|Date: date Element|undefined

Get day element by date.

• date: day date.

getSelectedDayDate mixed: def Date|mixed

Get selected day.

• def: value to return when it fails.

getHours Number

Get selected hour.

getMinutes Number

Get selected minutes.

parseDate String|Number|Date: date, mixed: def Date|mixed

Parse date.

• date: proposed date.
• def: value to return when it fails.

isValidDate mixed: operand Boolean

Check for a valid date object.

• operand: operand.

Events

Dispatched events have the detail property, which contains:

• instance: datetimepicker instance.
• overlay: overlay element.
• modal: modal element.

datetimepicker.addListener('dtp:day:click', (e) => {
  console.log(e.detail.instance);
});

day:click

Dispatched when a day element is clicked.

detail +=

• element: day element.
• dateTime: date representing de selected date and time.

month:change

Dispatched when the current month changes.

detail +=

• date: date representing de first day of the new selected month.

action:click

Dispatched when an action button is clicked.

detail +=

• element: action element.
• action: data-action content.
• dateTime: date representing de selected date and time.