pickadate.js
pickadate.js copied to clipboard
Change value from a picker, update value from a second one
I have two datepickers on my page, and I want to update the value of a picker if the other one change, the purpose is to have the same value for both pickers.
I currently have the code bellow.
It works, the value update correctly on a change, but it enter in an infinite loop, does anybody have an idea to solve this issue ?
var setPicker1 = $('#date1').pickadate({
today: false,
selectYears: false,
min: 1,
dateFormat: 'dd.mm.yyyy',
});
picker1 = setPicker1.pickadate('picker');
var setPicker2 = $('#date2').pickadate({
today: false,
selectYears: false,
min: 1,
dateFormat: 'dd.mm.yyyy',
});
picker2 = setPicker2.pickadate('picker');
// Check if there's a picker date is set
if (picker1.get('value')) {
picker2.set('select', picker1.get('select'))
}
if (picker2.get('value')) {
picker1.set('select', picker2.get('select'))
}
// When something is selected, update the pickers value
picker1.on('set', function (event) {
if (event.select) {
picker2.set('select', picker1.get('select'))
}
else if ('clear' in event) {
picker2.set('select', false)
}
})
picker2.on('set', function (event) {
if (event.select) {
picker1.set('select', picker2.get('select'))
}
else if ('clear' in event) {
picker1.set('select', false)
}
})
Maybe you need to use "muted callbacks" to prevent looping
https://amsul.ca/pickadate.js/api/#muted-callbacks