Show input format for Datetime fields

[Robin S]

Something that I found useful recently...

Users can type a date/time directly into a Datetime field, which can often be faster than using the separate controls in the datetime picker. But the problem is that there's nothing built into the Datetime inputfield to let users know what the expected input format is for the date/time.

You could enter the input format in the description or notes for the field, but you'd have to do this separately for every Datetime field and remember to update it if the input format changes for any reason.

Instead, you can use a hook to automatically show the current input format in the notes for all Datetime fields:

$wire->addHookBefore('InputfieldDatetime::render', function(HookEvent $event) {
	/* @var InputfieldDatetime $inputfield */
	$inputfield = $event->object;
	$datetime_input_format = $inputfield->dateInputFormat;
	if($inputfield->timeInputFormat) $datetime_input_format .= ' ' . $inputfield->timeInputFormat;
	$ts = strtotime('2016-04-08 5:10:02 PM');
	$inputfield->notes = 'Input format: ' . date($datetime_input_format, $ts);
});

 

Or as the title tooltip if you prefer (you have to add the title to wrapper because a title on the input itself gets wiped out by the JS datepicker):

$wire->addHookBefore('InputfieldDatetime::render', function(HookEvent $event) {
	/* @var InputfieldDatetime $inputfield */
	$inputfield = $event->object;
	$datetime_input_format = $inputfield->dateInputFormat;
	if($inputfield->timeInputFormat) $datetime_input_format .= ' ' . $inputfield->timeInputFormat;
	$ts = strtotime('2016-04-08 5:10:02 PM');
	$inputfield->wrapAttr('title', 'Input format: ' . date($datetime_input_format, $ts));
});

[tpr]

Nice, thanks. Another option could be to append the format hint to the field label in parentheses to avoid messing with the notes (not to overwrite any existing).

[adrian]

On 12/2/2018 at 1:29 PM, tpr said:

Another option could be to append the format hint to the field label in parentheses to avoid messing with the notes (not to overwrite any existing).

What about putting it in the HTML placeholder attribute?

[tpr]

That could work too, although once it's filled you cannot know for sure which format it uses (eg consider 12-12-2018 or 12/12/12), only if you clear the field.