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
});
},
...