With two related Date Time Picker fields limit the end date to be after the start date.
Mid 2020 I wrote about setting the end date to be after the start date in an ACF Date Picker field. In a comment Max asked how to apply the same restriction to a Date Time Picker field.
Jump Start
In last year’s post I read a lot of ACF documentation and did a number of experiments with the ACF JavaScript API. This time around I was able to skip all that and jump straight to tweaking the original code and experimenting with Date Time Picker fields.
I got lucky that it mostly just worked. I did change the field wrapper class from ‘start-dp-wrapper‘ to ‘start-dtp-wrapper‘ to avoid a clash with my Date Picker code. The Date Time Picker field uses the datetimepicker() function so it may not work correctly with a Date Picker field (and vice versa).
Copying the date and time
While the field’s ‘setDate‘ function does copy both the date and time, the field does not have a setting to limit the minimum time. This makes sense as it is valid to change the end date (to one later than start date) and have an earlier time.
The developer will have to add code to ensure that the end date and time are later than the start date and time. My code takes care of the date part.
Hello Damien, Thank you for writing this plugin codes. I am not really a programmer. But I do make WordPress website without much of coding expertise. Can I know how to use this code? I think it should be a php file but where to put this file? should it be located in wp plugin folder? Really appreciate if you can explain it to me :)
@GI: You can save the PHP file and upload it to the wp-content/plugins directory with FTP. Then activate the plugin.
I wrote a post about it and it has a video demonstration.
What a fantastic guide, I was able to follow and learn a lot of the ACF JS API, thanks a lot for sharing your knowledge!
Hi can you please help how to add Norway months and days into this code?
@Malik – I searched the web and found the Norwegian translation for jQuery UI: https://github.com/jquery/jquery-ui/blob/main/ui/i18n/datepicker-no.js
I tried to add this to the plugin and access the data but it did not work for me so I copied it into the code. Here is a version with Norwegian text for the DateTimePicker.
The important lines are:
// Norwegian translations for Date Time Picker. // From: https://raw.githubusercontent.com/jquery/jquery-ui/master/ui/i18n/datepicker-no.js and ACF's acf-nb-NO.po. args.closeText = 'Utført'; args.timeText = 'Tid'; args.dayNamesMin = [ "sø", "ma", "ti", "on", "to", "fr", "lø" ]; args.dayNamesShort = [ "søn", "man", "tir", "ons", "tor", "fre", "lør" ]; args.dayNames = [ "søndag", "mandag", "tirsdag", "onsdag", "torsdag", "fredag", "lørdag" ]; args.monthNamesShort = [ "jan", "feb", "mar", "apr", "mai", "jun", "jul", "aug", "sep", "okt", "nov", "des" ]; args.monthNames = [ "januar", "februar", "mars", "april", "mai", "juni", "juli", "august", "september", "oktober", "november", "desember" ];