Callbacks
datedropper comes with the following callback functions.
onChange
The onChange callback is excecuted when the date is changed through datepicker. It must be specified on the main options as shown below and it returns an object as in the following example:
How to set
new dateDropper({
selector: '#myInput',
onChange: function (res) {
console.log('You have selected ' + (res.output.mm + '/' + res.output.dd + '/' + res.output.y));
}
});Result
{
"trigger":[trigger DOM element],
"dropdown": [dropdown DOM element]
"output":{
"D":"Tue",
"F":"January",
"M":"Jan",
"S":"22nd",
"U":1548111600,
"y":2019,
"d":22,
"formatted":"01/22/2019",
"j":22,
"l":"Tuesday",
"m":"01",
"n":1
}
}onRangeSet
The onRangeSet callback is only excecuted when range option is declared as true and the start and end dates have been changed. It returns an object as shown below:
How to set
new dateDropper({
selector: '#myInput',
onRangeSet: function (range) {
var start = range.a;
var end = range.b;
console.log('From ' + (start.m + '/' + start.d + '/' + start.y) + ' to ' + (end.m + '/' + end.d + '/' + end.y));
}
});Result
{
"a":{
"D":"Tue",
"F":"January",
"M":"Jan",
"S":"22nd",
"U":1548111600,
"y":2019,
"d":22,
"formatted":"01/22/2019",
"j":22,
"l":"Tuesday",
"m":"01",
"n":1
},
"b":{
"D":"Tue",
"F":"January",
"M":"Jan",
"S":"26th",
"U":1548111600,
"y":2019,
"d":26,
"formatted":"01/26/2019",
"j":26,
"l":"Tuesday",
"m":"01",
"n":1
}
}onDropdownOpen
The onDropdownOpen callback is excecuted when trigger is clicked and the dropdown comes down. It must be specified on the main options as shown below and it returns an object as in the following example:
How to set
new dateDropper({
selector: '#myInput',
onDropdownOpen: function (res) {
res.trigger.classList.add('focused');
}
});Result
{
"trigger":[trigger DOM element],
"dropdown": [dropdown DOM element]
"output":{
"D":"Tue",
"F":"January",
"M":"Jan",
"S":"22nd",
"U":1548111600,
"y":2019,
"d":22,
"formatted":"01/22/2019",
"j":22,
"l":"Tuesday",
"m":"01",
"n":1
}
}onDropdownExit
The onDropdownExit callback is excecuted when dropdown is closed and removed. It must be specified on the main options as shown below and it returns an object as in the following example:
How to set
new dateDropper({
selector: '#myInput',
onDropdownExit: function (res) {
res.trigger.classList.remove('focused');
}
});Result
{
"trigger":[trigger DOM element],
"dropdown": [dropdown DOM element]
"output":{
"D":"Tue",
"F":"January",
"M":"Jan",
"S":"22nd",
"U":1548111600,
"y":2019,
"d":22,
"formatted":"01/22/2019",
"j":22,
"l":"Tuesday",
"m":"01",
"n":1
}
}
onDestroy
The onDestroy callback is excecuted when datedropper is destroyed through the "destroy". It must be specified on the main options as shown below and it returns the trigger as a simple DOM element:
How to set
new dateDropper({
selector: '#myInput',
onDestroy: function (el) {
console.log(el);
}
});onRender
The onRender callback is only excecuted when the calendar is on expanded view and each time you select or change a date. It returns an object with all the visible and selectable dates. It's really useful cause with this feature you will be able to add custom label for each day.
Let's see how to set it at best:
How to set
new dateDropper({
selector: '#myInput',
onRender: function(dates) {
var myLabels = {
'2021/04/04': {
label: 'Easter',
color: '#8bc34a'
}
};
Object.keys(myLabels).forEach(function(key){
var item = dates[key];
if(item)
item.customLabel({
label: myLabels[key].label,
color: myLabels[key].color
});
});
}
});Result
{
"2021/02/25": [day DOM element],
"2021/02/26": [day DOM element],
"2021/02/27": [day DOM element],
"2021/02/28": [day DOM element],
}