Jump to content
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 7
  • Thanks 1

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 3

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...