Check out a new date picker: easepick

Date range picker using Shadow DOM. Lightweight size, no dependencies.

Link Search Menu Expand Document

Events


Example initialize:


...
setup: (picker) => {
   picker.on('show', () => {
     // some action after show
   });

   picker.on('render', (ui) => {
     // some action after render
     // ui is root element of picker
   });
},
...

Event list

before:click

Arguments: (target)

target is clicked element.

Event is called before click on calendar elements. Note: «Calendar elements» are children of .litepicker element.

...
setup: (picker) => {
  picker.on('before:click', (target) => {
    // some action
  });
},
...

You can prevent default behavior with preventClick.

...
setup: (picker) => {
  picker.on('before:click', (target) => {
    picker.preventClick = true;
    // some action
  });
},
...

before:render

Arguments: (ui)

ui is root element of picker.

Event is called before render function.

...
setup: (picker) => {
  picker.on('before:render', (ui) => {
    // some action
  });
},
...

before:show

Arguments: (el)

el is triggered element.

Event is called before show.

...
setup: (picker) => {
  picker.on('before:show', (el) => {
    // some action
  });
},
...

button:apply

Arguments: (date1, date2)

date1, date2 is DateTime object.

Event is called after click on button apply (footer).

...
setup: (picker) => {
  picker.on('button:apply', (date1, date2) => {
    // some action
  });
},
...

button:cancel

Arguments: ()

Event is called after click on button cancel (footer).

...
setup: (picker) => {
  picker.on('button:cancel', () => {
    // some action
  });
},
...

change:month

Arguments: (date, calendarIdx)

date is DateTime object of month.

calendarIdx is index of calendar when splitView is enabled.

Event is called after change month.

...
setup: (picker) => {
  picker.on('change:month', (date, calendarIdx) => {
    // some action
  });
},
...

change:year

Arguments: (date, calendarIdx)

date is DateTime object of year.

calendarIdx is index of calendar when splitView is enabled.

Event is called after change year.

...
setup: (picker) => {
  picker.on('change:year', (date, calendarIdx) => {
    // some action
  });
},
...

clear:selection

Arguments: ()

Event is called clear selection.

...
setup: (picker) => {
  picker.on('clear:selection', () => {
    // some action
  });
},
...

destroy

Arguments: ()

Event is called after destroy.

...
setup: (picker) => {
  picker.on('destroy', (tooltip, day) => {
    // some action
  });
},
...

error:date

Arguments: ()

Event is called on wrong selection with setDate method.

...
setup: (picker) => {
  picker.on('error:date', () => {
    // some action
  });
},
...

error:range

Arguments: ()

Event is called on wrong selection range (when disallowLockDaysInRange is enabled).

...
setup: (picker) => {
  picker.on('error:range', () => {
    // some action
  });
},
...

hide

Arguments: ()

Event is called after hide.

...
setup: (picker) => {
  picker.on('hide', () => {
    // some action
  });
},
...

preselect

Arguments: (date1, date2)

date1, date2 is DateTime object.

Event is called on select days (before submit selection).

...
setup: (picker) => {
  picker.on('preselect', (date1, date2) => {
    // some action
  });
},
...

render

Arguments: (ui)

ui is root element of picker.

Event is called after render function.

...
setup: (picker) => {
  picker.on('render', (ui) => {
    // some action
  });
},
...

render:day

Arguments: (day, date)

day is element of rendered day.

date is DateTime object of day.

Event is called after renderDay function.

...
setup: (picker) => {
  picker.on('render:day', (day, date) => {
    // some action
  });
},
...

render:footer

Arguments: (footer)

footer is element of rendered footer.

Event is called after renderFooter function.

...
setup: (picker) => {
  picker.on('render:footer', (day, date) => {
    // some action
  });
},
...

render:month

Arguments: (month, date)

month is element of rendered month.

date is DateTime object of month.

Event is called after renderMonth function.

...
setup: (picker) => {
  picker.on('render:month', (month, date) => {
    // some action
  });
},
...

selected

Arguments: (date1, date2)

date1, date2 is DateTime object.

Event is called when selection is submitted.

...
setup: (picker) => {
  picker.on('selected', (date1, date2) => {
    // some action
  });
},
...

show

Arguments: (el)

el is triggered element.

Event is called after show.

...
setup: (picker) => {
  picker.on('show', (el) => {
    // some action
  });
},
...

tooltip

Arguments: (tooltip, day)

tooltip is element of tooltip.

day is element of hovered day.

Event is called after showTooltip function.

...
setup: (picker) => {
  picker.on('tooltip', (tooltip, day) => {
    // some action
  });
},
...