The HTML5 Input=Date browser date picker inconsistencies between browser

This week we've been looking at replacing some of the older web controls we have in the product including a date picker control that's not compatible with mobile devices.

Our current control however does render well on desktops and displays a nice calendar.

We decided to replace the control with the HTML5 date picker control which is very problematic. I've made some notes on what we found.


iOS

  • Renders as a fake dropdown list which when clicked displays a popup calendar

  • ISSUE: Field renders using the operating systems short date format, you cannot change the format - for example to "1 January 2022".

  • BUG: If the control is set to readonly the calendar is still shown when the "dropdown" is clicked

  • The reset button resets to whatever the "value" was set to when the control was rendered which is not what the user would expect.

  • ISSUE: No clear button (unless the control was rendered with a value of blank in which case reset acts as a clear)

  • ISSUE: No "Today" button.





Firefox

  • The control renders as an editable textbox

  • ISSUE: Field renders using the operating systems short date format, you cannot change the format - for example to "1 January 2022".

  • BUG: The clear X button cannot be removed without setting the control to "required", which causes its own problems. If you're using .NET validators "required" overrides these and prevents the user from submitting the page and ignores .NET's validation groups.

    You also need the clear button if you want to be able to clear the control as you cannot delete parts of the date in the textbox.

    <input type="date" required />


  • Clicking the control automatically pops up the calendar control - this can be stopped by setting the onclick event to prevent the default action.

    <input type="date" onclick="event.preventDefault();" />

  • ISSUE: No clear button (unless the control was rendered with a value of blank in which case reset acts as a clear)

  • ISSUE: No "Today" button.

  • BUG: Users can input invalid dates - for example "31/02/2020".

  • BUG: Users can enter dates outside of the minimum and maximum date ranges in the textbox, but not the calendar.


Internet Explorer
  • ISSUE: The control renders as a textbox. 


Google Chrome / Microsoft Edge (Chromium)

  • Renders an input field which can be typed into

  • ISSUE: Field renders using the operating systems short date format, you cannot change the format - for example to "1 January 2022".

  • ISSUE: The user can delete components of the date, this can be resolved by handling the onkeyup event and detecting delete or backspace keypress and then setting the value of the control to blank.


  • ISSUE: NO clear button (but you can delete the whole date by using the delete key) unless the min and max date values are set in which case this is prevented. This causes problems if you want a date picker where valid input is either no date or a date between two values - this becomes impossible without adding some extra button.

  • The "Today" button is available

  • BUG: Users can input invalid dates - for example "31/02/2020".

  • Users cannot enter dates outside of the minimum and maximum date ranges in the textbox or calendar.


Comments

Post a Comment

Popular posts from this blog

Windows Server 2016, 2019, 2022, Windows 10 and Windows 11: Date and time "Some settings are managed by your organization".

Image
When you're using the new "Modern" date and time settings in Windows Server 2016, 2019, 2022, Windows 10 and Windows 11 you may find that you can't set the correct date and time and the value "Some settings are managed by your organization". - While you're here - Why not check out our Windows Server Documentation and Audit Tool? The simplest way around this is to go back to the proper control panel using Start, Run, "Control.exe" and searching for "Set the date".  Within here you can set the date and time manually as required If you try and click the Change time zone button you may again get access denied... To resolve this open an elevated command prompt by right clicking the command prompt and selecting Run as Administrator  From there run the command rundll32.exe shell32.dll,Control_RunDLL timedate.cpl This will open the Data and Time control panel app elevated as an Administrator.
Read more

TFTPD32 or TFTPD64 reports Bind error 10013 An attempt was made to access a socket in a way forbidden by its access permissions.

Image
When you start the trivial FTP (TFTP) server application TFTPD32 or TDTPD64 you may see the following error Bind error 10013 An attempt was made to access a socket in a way forbidden by its access permissions. This can be because another application is using this port. The easiest way to check if (and which) application is using the port is as administrator run an elevated command prompt and enter netstat -anb > ports.txt Then open ports.txt in Notepad and search for :69, you'll quickly be able to see the process using the required port - While you're here - Why not check out our Windows Server Documentation and Audit Tool?
Read more

Windows Server 2019 desktop icons such as My Computer, Windows cannot access the specified device, path, or file.

Image
In Windows Server 2019 you may notice that the desktop icons such as My Computer are missing, however when you goto Personalization > Themes > Desktop icon settings You see the error Windows cannot access the specified device, path, or file. You may not have the appropriate permissions to access the item. The quickest way to resolve this is to ignore the modern UI and desk.cpl ,5 From here you can easily add the My Computer icon - While you're here - Why not check out our Windows Server Documentation and Audit Tool?
Read more