@hube2 John, Yes! That’s it! Thanks. I’ve re-wrote it to make a function that does exactly the same like acf.getField() for fields on the same .acf-row.
This is the result:
You get it with:
var $fieldTarget = rtt_getRowField( $input, $fieldTarget_key );
function rtt_findClosestAcfRow( $el ){
return $el.closest('.acf-row');
}
function rtt_findInputField( $el, $key ){
return $el.find('[data-key="'+ $key +'"] input');
}
function rtt_findClosestField( $el ){
return $el.closest('.acf-field');
}
function rtt_getClosestField( $el ){
var $field = rtt_findClosestField( $el );
return acf.getField( $field );
}
function rtt_getRowField($el, $key){
var $acfRow = rtt_findClosestAcfRow( $el );
var $inputField = rtt_findInputField( $acfRow, $key);
return rtt_getClosestField( $inputField );
}
Ah yes, I’ve replaced
return $el.find('[data-key="'+ $key +'"] input.hasDatepicker');
to this and removed “hasDatepicker”
return $el.find('[data-key="'+ $key +'"] input');
This way I can reuse the code to address all the input fields on the same row.
Now you can use all the acf.functions 🙂 🙂
Once again, thanks John for your time and knowledge
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);
});
Now, that’s a good starting point and learning material. That bit of code explained a lot to me.
Tweaked it a bit to get it working with acf 5. Also added an if because it threw an error when var date was not populated. And added a delete end date if start date is not populated.
var start_date_key = 'field_5bc62ed0bbcd1'; // the field key of the start date
var end_date_key = 'field_5bc62eeabbcd2'; // the field key of the end date
if ( acf.get('acf_version') != 'undefined') {
// 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) {
// add action to start date field datepicker
$input.datepicker().on('input change select', function(e) {
// get the selected date
var date = jQuery(this).datepicker('getDate');
// check if date has a value
if ( date != null ) {
// add 5 days to date
date.setDate(date.getDate() + 5);
// set end date
jQuery('[data-key="' + end_date_key + '"] input.hasDatepicker').datepicker('setDate', date);
}
// if start date field datepicker has no value, delete end date field datepicker
else if ( date == null ) {
jQuery('[data-key="' + end_date_key + '"] input.hasDatepicker').datepicker('setDate', null);
}
});
}
//};
});
}
Later I’ll tweak some things. For example, I would just like to populate end date IF it has no value. And my actual date fields are on a nested repeater field 🙂 Hmm plus how to throw an error warning when the value is wrong. Anyway, things for tomorrow.
Many thanks @hube2 ! This was very informative.
Hey John, thanks for your reply. Yeah, I’ve found that page 🙂
Unfortunately has has near to none examples. I’ve been playing with it for a few hours now.
Don’t really know how to get it running. But in the old JS API it was written to use something like:
add_action('acf/input/admin_enqueue_scripts', 'my_admin_enqueue_scripts');
found here
I’m first trying to get an JS alert() or console.log() to see when I trigger something. Not much luck so far. append_field and load field did work.
I guess when I find out the right trigger I can start validating an populating 🙂
Question 3 is answered. But I was unable to edit my post.
Answer to that simply is conditional logic in the field settings. Never saw this option before 🙂
Ah, found the answer.
Solution: Run a nested query. First one returns all the related posts, already sorted. Collects them in an array and for the second query you can use ‘post__in’ => $idArray, ‘orderby’ => ‘post__in’ in the $args.
I’ve ended up making a shortcode in which I could simply run a php wp query.
