Home › Forums › Backend Issues (wp-admin) › How to trigger on close datepicker() event?
Hey all! I’ve got a new question 🙂
How to trigger the on close event for datepicker()?
The goal: I want to live validate ACF input, for which I’ve gotten an answer from John Huebner here.
This is the perfect base to start from. But the problem with this is, when it comes to working with a datepicker, it all triggers a bit different I guess. The result is that with the code from the example on my previous post it runs the validation on every change of the input. Even while editing.
And this is way to aggressive. I would only like to validate the value when deselecting the field. Or even better, when on closing the datepicker().
Approach so far. As you can see from the code below I’ve tried several ways to trigger this. None of them work (correctly). The only ones being fires are ‘blur’ and ‘change’.
– ‘change’ every time you change the date/input.
– ‘blur’ every time you change the date/input. Plus when deselecting the field.
The problem with ‘blur’ is that every time you change the input you can see the input field ‘blur’ and ‘focus’ (the blue selection border).
var start_date_key = 'field_5bc62ed0bbcd1'; // the field key of the start date
// add an action for all datepicker fields
acf.addAction('date_time_picker_init', function( $input, args, field ){
// get the field key for this field
var key = $input.closest('.acf-field').data('key');
// see if it's the start date field
if (key == start_date_key) {
$input.datepicker({
onClose: function (e) {
console.log('onClose');
}
});
$input.datepicker({
onchange: function (e) {
console.log('onchange');
}
});
$input.datepicker().on('hide', function (e) {
console.log('hide');
});
$input.datepicker().on('close', function (e) {
console.log('close');
});
$input.datepicker().on('blur', function (e) {
console.log('blur');
});
$input.datepicker().on('input', function (e) {
console.log('input');
});
$input.datepicker().on('change', function (e) {
console.log('change');
});
$input.datepicker().on('select', function (e) {
console.log('select');
});
}
});
Does anyone has some insights on this?
It appears you may be looking for onSelect
https://stackoverflow.com/questions/1814292/jqueryui-datepicker-fires-inputs-blur-before-passing-date-avoid-workaround
Hey John, once again you’ve saved the day. 🙂
This is what I ended up using. The setTimeout(). And added a check. I was not able to get the onSelect() to work 🙂
With the code below I was even able to split the validation into two parts! One while editing and one post editing. Nice.
$input.datepicker().on('input change select', function (e) {
$this = this;
// validate "live", directly on change
// for example, if date end indeed is later than date start
rtt_validate_datepicker_onChange($this, $input);
// validate after exiting the field
// for example, after populating start date AND exiting field, check if end date is empty, if so, than populate it with you desired value
// Debounce
setTimeout(function(){
// check if your input is still focused. If so, it went back in editing.
if ( ! $input.is(":focus") ) {
// alright, after debounce it is blurred, not focused.
// That means we actually left the field. Now it's time for your validation.
rtt_validate_datepicker_onBlur($this, $input);
}
}, 300);
});
The topic ‘How to trigger on close datepicker() event?’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.