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)

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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.