Robin S

Show input format for Datetime fields

Recommended Posts

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);
});

2018-12-03_101435.png.2ee2011f0943c3af250dfd996e216a35.png

 

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));
});

2018-12-03_101829.png.d2bfc5ed907ed9bdb05ac3e7fec86dc5.png

  • Like 6

Share this post


Link to post
Share on other sites

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).

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.