Reply To: Extending acf_field_image

• rtpharry

• May 4, 2020 at 3:05 am

I found a solution for this so I thought I would post it here for the next person who comes along.

If you want to extend the existing class, you use this line:

var Field = acf.models.DatePickerField.extend({

It’s used with the date_time_picker to extend off the date_picker but with some enhancements.

What I’m doing is writing a ui enhancement to the actual date_picker (Client wants a button to easily add 30 days to the date), so I’m using that extend snippet and then applying it back to the actual date_picker. That way my custom code is being run and the date picker popup still works:

            (function($) {
                
                var Field = acf.models.DatePickerField.extend({
                    type: 'date_picker',
                    // name: 'myprescription_expiration_date',
                    events: {
                        'click .date_plus_30': 'onClick'
                    },
                    onClick: function( e, $el ){
                        e.preventDefault();
                        alert("cat");
                    }
                });

                acf.registerFieldType( Field );
                
            })(jQuery);	

Totally unrelated to this thread but if you’re wondering what the 'click .date_plus_30': 'onClick' is referring to, I have already registered a bit of extra ui right after the admin panel date picker with:

        add_action('acf/render_field/name=myprescription_expiration_date', array( $this, 'custom_admin_render_field_date_offset'), 15);

        public function custom_admin_render_field_date_offset($field)
        {
            echo '<p><a href="#" class="date_plus_30">Add 30 days</a></p>';
        }