Datetime fields should validate and alert on invalid input

[Toutouwai]

Short description of the issue

A datetime field accepts any input but cannot actually save it, and replaces invalid values with the Unix epoch. The problem is that there is no feedback to the user that the data they have entered is invalid.

It's not totally unreasonable for a user to believe that a field that is asking for a date might accept input like "2015", or "August", or "every Tuesday", etc. And they might select "Save + Exit" so the low chance that they detect the incorrect date after Save is reduced to no chance at all.

Best outcome would be if the inputfield validated the input with JS on blur, to alert the user as soon as possible. Failing that the field should show an error on save and the value should be cleared. Storing "1 January 1970" is definitely not what the user expects if they mistakenly enter an invalid date.

Setup/Environment

• ProcessWire version: 3.0.153

[Toutouwai]

When the entered value is not a complete and valid date then the value that is stored varies. Examples:

"2015" > 1 January 1970
"October" > [current day of month] October [current year]
"Friday" > [the date of the next Friday]
"check with Bob" > nothing

With the 2nd and 3rd examples I guess the field is trying to be helpful with these stored values but in all cases I think this is not what the user is expecting. And the important thing is that the user be notified that their entered value has been changed or discarded.

[BernhardBaumrock]

The first example is because PHP treats year-only input as time when the number is greater than 1999:

Note:
The "Year (and just the year)" format only works if a time string has already been found -- otherwise this format is recognised as HH MM.

https://www.php.net/manual/en/datetime.formats.date.php

Not sure if it would be a good idea to append 4 digit input with -01-01 forcing it to be a year input. I've not worked with the new date inputfield yet. But a warning would be helpful in any case I guess!

[Toutouwai]

I think the input should be validated with JS before it ever hits PHP. The datepicker knows the date format configured for the field so it should be able to validate user input against that format.

[Toutouwai]

A possible partial solution below that I put together for use in my current project. Haven't looked at time values or validation when the jQuery UI datepicker is not in use.

// Datetime fields: load Vex to use for invalid date alerts
$wire->addHookAfter("InputfieldDatetime::renderReadyHook", function(HookEvent $event) {
    $this->wire('modules')->get('JqueryUI')->use('vex');
});

// Validate datetime inputfields
$(document).on('focus', '.InputfieldDatetime input', function() {
    $(this).data('prev-value', $(this).val());
});
$(document).on('blur', '.InputfieldDatetime input', function() {
    var format = $(this).data('dateformat');
    try {
        $.datepicker.parseDate(format, $(this).val());
    }
    catch(e) {
        $(this).val($(this).data('prev-value'));
        var example_date = $.datepicker.formatDate(format, new Date('23 Oct 2014'));
        vex.dialog.alert('The date you entered is not in the valid format. Example of format: ' + example_date);
    }
});

[matjazpotocnik]

@Toutouwai, if I use jQuery datepicker, then I can enter only numbers. If I configure datetime field not to use datepicker, then I can observe what you're saying. So if I understand, this is an issue only if one is NOT using datepicker? I agree that in that case, some feedback should be issued to the user.

[Toutouwai]

@matjazpotocnik, whether you can enter text into a field using the datepicker depends on what the input format is.


And as noted in the second comment, numeric values like "2015" that don't conform to the full input format can also cause problems.