How to: Add Limits to ACF Date Picker Fields

Advanced Custom Fields (ACF) is one of the most powerful WordPress plugins, and the basis of our website development work.

In the past, we’ve written about using ACF to create personalized Google Maps, add an alert bar to your site, and other ways to extend the plugin’s functionality.

One of the many fields that ACF provides is the Date Picker field, which gives you the ability to select a date from a popup calendar that utilizes the jQuery UI Datepicker plugin. Out of the box, the field works great and gives users the ability to add certain restrictions (like making it required or updating the format for the date).

Since the field uses the jQuery UI Datepicker, we can further customize the field to meet our needs – like by setting a minimum date that can be selected. Let’s review.

Step 1: Output Custom jQuery With the Datepicker

To start, we will need to add our own jQuery script whenever a Datepicker field is editable in the WordPress backend.

This can be achieved by using the acf/input/admin_footer action hook, which adds custom HTML in the WordPress admin only on pages where ACF fields appear. If you need to implement it on the front-end, then the code can be added with the rest of your site’s scripts.

add_action('acf/input/admin_footer', function(){
     <script>
     jQuery(document).ready( function($){
          // jQuery code goes here
     });
     </script>
});

Add this code template to the functions.php file in your WordPress theme. Now, when you’re using a Datepicker, you can add in custom requirements – with some additional code we’ll outline below.

Step 2: Set the minDate: The Earliest Selectable Date

Let’s say you want to add a restriction to the Datepicker field so that users can only select a date that is in the future. This is called the minimum date, or the minDate.

This is usually helpful when the date field represents the start date of an event, and you don’t want users to submit events for dates that have already passed.

In the script template we’ve added, insert this line:

$('div[data-type=date_picker] .hasDatepicker').datetimepicker( 'option', 'minDate', Date());

This code selects the Datepicker field – $(‘div[data-type=date_picker] .hasDatepicker’) – and, using the datetimepicker utility function, sets the value for the minDate option to today’s date (returned by the Date() function).

Step 3: Set the minDate Based on Another Field

Now that we have a start date for our event, let’s set an end date. We’ll need another Datepicker field for that and, most importantly, the end date must be on or after the start date.

To do this, let’s first give each Datepicker field a unique ID. We can do this using the built in interface for the ACF Datepicker field.

For our purposes, let’s give the start date an ID of “dgtlnk-start” and the end date an ID of “dgtlnk-end”.

In order to set the minDate for both fields, add this line to our script template:

$('#dgtlnk-start .hasDatepicker, #dgtlnk-end .hasDatepicker').datetimepicker( 'option', 'minDate', Date());

But our end date needs to be on or after our start date, so when the start date is adjusted, we need to adjust the end date. Add this code to “listen” to the changes in the start date and update the end date accordingly:

$('#dgtlnk-start .hasDatepicker').on('change', function( e ) {
     $('#dgtlnk-end .hasDatepicker').datetimepicker( 'option', 'minDate', $(this).val());
});

In this code, we’re binding a jQuery event handler to the change event, which watches for any changes made to the start date field. When the value for the start date field is updated, this code takes that value and updates the minDate option for the end date field’s Datepicker.

This is just the beginning of what you can customize for the Datepicker field. For additional options and methods, review the API documentation page for the jQuery Datepicker UI plugin; these are all usable with ACF’s Datepicker field.

If you need help implementing this functionality on your website, or for any other digital marketing needs, reach out to us.