Support

Account

Forum Replies Created

  • @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.

Viewing 8 posts - 1 through 8 (of 8 total)