0

I am creating a form that contains a date input field. I have successfully set it up to take the format yyyy-mm-dd, however, when typing in the date staring at the year, my year will accept six values e.g. yyyyyy-mm-dd. This creates two bad user experiences.

  1. If the user wants to simply type in their date "2020-01-18" then when they type it out it will end up being "202001-12-01" The year has accepted the year and month values and then the month value defaulted to "12" because the day value "18" was entered instead, and the day value ends up being whatever the current date is.
  2. If the user types in their year "2020" then hit tab to go to the month, it will successfully navigate to the date field where they enter "12". However, if/when they hit tab again to go to the day, it will send them down to the next input field instead of the date, because my current setup will move the input cursor from the month field once it is filled to the day field.

My code for the date input field is:

HTML + PHP

<!-- Date of Birth -->
    <label for="dateOfBirth">Date of Birth</label>
    <span class="Error">* <?php echo $dateOfBirthErr; ?></span>
    <br>
    <input type="date" id="dateOfBirth" name="dateOfBirth" value="<?php echo date('Y-m-d'); ?>" />

This same problem occurs on every browser. Thanks, anoyone, for your help!

Flynno
  • 23
  • 3
  • 7
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date – GetSet Jan 17 '20 at 16:04
  • 1
    @Martin OP is correct. You can type in six digits. However at some point, saving asteroid or other disaster, we *will* get beyond 4 digit years. – GetSet Jan 17 '20 at 16:08
  • Think about implementing datepicker with readonly input: https://stackoverflow.com/questions/30298208/bootstrap-datetimepicker-dont-work-with-readonly-or-disabled – mitkosoft Jan 17 '20 at 16:09
  • @GetSet Oh yes, how bizarre. – Martin Jan 17 '20 at 16:10
  • Possibly thats in place to circumvent another Y2K-like scare – GetSet Jan 17 '20 at 16:12
  • 1
    @GetSet I found I'd missed it as my testing HTML all had various `max` values set. Y2K was a virtual myth, it affected nothing. Unlike the Unix Epoch...... `:-(` – Martin Jan 17 '20 at 16:14
  • @Martin i looked at exactly the same thing and was totally blind to this straight forward approach to solve OP's issue. – GetSet Jan 17 '20 at 16:18

1 Answers1

3

The work around is to add a max= value to your date picker. 

    <input type="date" id="dateOfBirth" name="dateOfBirth" 
    value="2019-01-17" max="9999-12-31"/>

This example above will prevent any 5 or 6 digit dates being submitted in the field, the user will be forced to correct their apparent typo before submission.

Martin
  • 22,212
  • 11
  • 70
  • 132
  • Clever solution. And here it was im thinking of an onchange event that would modify the year if it got too long. – GetSet Jan 17 '20 at 16:13
  • 1
    @GetSet meh, it's not perfect because it still allows data entry (you'd need your onchange to prevent that once the field length is 4 digits) but it does prevent data *submission* if the date year exceeds 4 digits in length . – Martin Jan 17 '20 at 16:20