Explore the full list of datedropper callbacks

datedropper Pro comes with the following callbacks.

Key
onReady
onChange
onRoundTripChange
onPickerDragging
onPickerRelease

onReady

The onReady callback is called once the datedropper has been initialized and the date picker is ready to be displayed. It returns an object as in the following example:

{
onReady: function(){
selector: [Selector DOM element here],
date: {
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
}
}
}

Features

Typefunction/false
Defaultfalse

onChange

The onChange callback is called when a date is changed through datedropper. It returns an object as in the following example:

{
onChange: function(){
selector: [Selector DOM element here],
date: {
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
}
}
}

Features

Typefunction/false
Defaultfalse

onRoundTripChange

The onRoundTripChange callback is only called in case the roundtrip option is activated if the outward and return dates have been changed. It returns an object with two keys, outward and return, which looks like this:

{
outward: {
d: 31,
m: 12,
y: 2018
},
return: {
d: 31,
m: 01,
y: 2019
}
}

Example

{
onRoundTripChange: function(dates) {
var outward = dates.outward;
var return = dates.return;
console.log('From ' + (outward.m+'/'+outward.d+'/'+outward.y) + ' to ' + (return.m+'/'+return.d+'/'+return.y));
}
}

onPickerDragging

The onPickerDragging callback is called at every mouse/touch action performed on any day, month or year blocks of the date picker. It returns an object with three keys, i.e. d, m and y respectively for day, month and year, and the corresponding values.

Features

Typefunction/false
Defaultfalse

Example

{
onPickerDragging: function(date){
console.log('Moving the '+date.d+' block. Current value is '+date.d);
}
}

onPickerRelease

The onPickerRelease callback is called when the mouse/touch is released after a gesture and returns an object with all of the date formats.

For instance, a date like Tuesday, January 1st, 2019 is returned as follows:

KeyValue
DTue
FJanuary
MJan
S1st
U1546300800
Y2019
d01
formatted01/01/2019
j1
lTuesday
m01
n1

Features

Typefunction/false
Defaultfalse

Example

{
onPickerRelease: function(date){
console.log('You are currently selecting this date: '+date.m+'/'+date.d+'/'+date.Y);
}
}

Related articles