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

Enable function lock for F1-F12 on HP ZBook mobile workstations

Image
When you press the function keys on a HP ZBook mobile workstation you may find that they don't operate as expected. This is because of function lock, if you hold the fn key the function keys work as expected. You can lock the function keys on as described in this document. https://support.hp.com/gb-en/document/c02035108 However there are two things to note Firstly following a BIOS upgrade (which occurs automatically if you have the preinstalled HP software still installed) you may lose your locked function keys and have to reapply.   Secondly the HP documentation states you press the fn lock and fn keys at the same time as per the image below from the page.  While you're here - Why not check out our Windows Server Documentation and Audit Tool? This is not the case, you need to press and hold the fn key, and then tap the fn lock key to toggle function lock, not an obvious thing when you start work first thing in the morning and are hammering the function keys try
Read more