Home Forums General Issues Extending acf_field_image Reply To: Extending acf_field_image

  • 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 ){
                    acf.registerFieldType( Field );

    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>';