Date Time Picker breaks on French time format

• room34

• July 19, 2025 at 6:18 pm

I’m dealing with a site that is using the French time format: G\hi

This format, for example, displays the time at noon as: 12h00

I’m finding that the Date Time Picker field is not properly handling the escaped “h” with the backslash. The value in the text input field shows both the backslash and the hour encoded in h format, rather than recognizing the \h as a literal letter h. So it looks like this:

12\1200

And in the Date Time Picker itself, the hour dropdown shows both the G and h formats together; i.e. the values in the dropdown are:

012
101
202
…
1301
1402
1503
etc.

I’ve tried various ways to work around this (e.g. adding the addslashes() function in my JSON file for the field group, actually putting two backslashes in the Time Format setting, etc.) but nothing is working.

Since the field has to chop up the Time Format setting to create the discrete hour and minute dropdowns in the Date Time Picker, I think that’s where it’s stripping out the backslash.

The values actually save correctly, and when the page reloads the time looks right (it’s also right on the front end output), but then editing displays it incorrectly again. This is a problem for my users who are confused by the way this is displaying.

• room34

• July 20, 2025 at 4:27 pm

I found a workaround:

acf.addFilter('date_time_picker_args', function(args, field) {
	if (args.timeFormat == 'H\\hhmm') {
		args.timeFormat = "H'h'mm";
		args.pickerTimeFormat = 'H:mm';
	}
	return args;
});

Setting args.timeFormat controls the combined date/time display in the main text input field after the user makes a selection. setting args.pickerTimeFormat controls what displays in the hour and minute dropdowns inside the picker.