I am using an input mask to enforce MM/DD/YYYY format on a <input type="text">.
I want to use autocomplete="bday", but I do not want to use the designated hyphen format specified by WHATWG.
What can I do about this? Can I just expect the mobile browser (mostly iOS / Android) to properly input the field into this box.
Use input of type date instead of anything else
In an ideal world, your input should be of type date rather than text. In theory, it provides the following advantages:
Input and display date in the user's preferred locale
Included calendar widget to select a date
Basic front-end field validation that normally ensure you to always have a valid date in yyyy-mm-dd format
In practice however,
The date input type isn't supported on older browsers / devices, especially some phones (where it's the most crucial!)
The input field(s) and/or the associated calendar widget isn't always very accessible (what a shame!)
You don't control the exact appearance of the component (ideally you shouldn't care so much about it, but well)
Using the most specialized appropriate input type for a given field if it exists, here date, is normally the best thing you can do, and is for sure the best thing you can do at long term, both from user and development/maintenance point of view. It's guaranteed by the standards, meaning that you can expect better support as the time goes without needing to do anything on your side, and that the feature won't disappear suddenly.
However, especially the loss of control on exact appearance, and the lack of support right now especially on phones where it's probably the most important, sadly result in choosing an input of type text, a serie of more or less accessible comboboxes and/or a most of the time not very accessible calendar instead of just a standard input date.
IF you can't or don't want to use input of type date
The autocomplete stuff always fills the field in the format yyyy-mm-dd, it contradicts your preferred format, and you can't change that. So you don't have many solutions:
Be lenient on what you accept as input, and in particular accept both yyyy-mm-dd and mm/dd/yyyy.
Catch the autocompletion of the browser and convert yyyy-mm-dd to mm/dd/yyyy when you detect it
Both wil make your input field less stable, less reliable, and less understandable for the user.
I guess it isn't easy to detect browser autocompletion reliably on all browsers, it's maybe even impossible, and the user can legitimately confused when the interface says "write your date in format mm/dd/yyyy" while the field contains yyyy-mm-dd (Which format should I use ? Which one is correct ? what is written in the field now, or what is given as instructions ?)
An input of type date would remove all that hastle, and this is, as you want or not, my final advice.
We can expect that accessibility and support will improve over time without the need for you to do anything. It has already improved a lot since input date were introduced several years ago. Forget out pixel perfect design. Embrass standards whenever possible.
Related
How can I create a input text in React with placeholder as DD-MM-YYYY,
when I start typing the value, the placeholder should be removed partially.
For eg if I type 02-MM-YYYY(in this case -MM-YYYY should be visible part of the placeholder)
The pattern you are describing is an input mask, so you might have more luck searching for this than placeholder.
First of all, have you considered using <input type="date">? Most browsers also provide an input mask for this kind of input.
If this doesn’t help you, HTML does not provide input mask functionality natively, so you will need to find a library that does that for you.
As always, you should clarify your basic requirements before choosing a library from npm. Most notably, it should be accessible for users with disabilities. Input masks seemingly improve user experience, but they are hard to get right. If not done well, they actually render the user’s experience worse.
Things the input should still support with input mask applied:
(Copying and) Pasting the value from elsewhere
Autofill by the browser (for your birthdate, for example)
Screen readers announce the value correctly
Correcting the value by means of keyboard only, for example deleting one number in the middle
The pattern adjusts with the locale (language)
The date picker doesn't show up even though i use
<input type="date" name="dob" required>
Additional information that might help you help me :
It is in a JSP file
I'm using tomcat v7.0
I need to validate the date without using JavaScript?
I tried using text for input and setting a specified format but then how can I add range there? (min max and dynamic for February issues?)
Can this issue be addressed by using combobox? How can I change value options of one combo box depending on the other? (Date options dependent on month and/or year)
Any help is highly appreciated.
P.S. Since it is a part of a registration form, I have been advised against using JavaScript validation (as it can be disabled)
Edit : I guess I'll go with a regular expression. I found one here, the second answer to this question : Regular Expression to match valid dates
The date picker doesn't show up
It does when I test it. Perhaps you are using a browser which does not support it.
I tried using text for input and setting a specified format but then how can I add range there?
If by "format" you mean a pattern, then you would need a complex regular expression that had multiple parts.
e.g. 0 followed by 1-9, or 1 followed by 0-9, or 2 followed by 0-8 followed by / followed by 02 followed by (leap year logic).
It wouldn't be short or pretty.
Regular expressions do not lend themselves to describing the format of dates.
That said, see this question.
Can this issue be addressed by using combobox?
You can't have a combobox in HTML without using JavaScript, which you ruled out.
If you mean "a collection of select elements" then that would be "dropdown menus" not "a combobox".
You could use those, but there's no good way to stop people entering dates like the 31st of February.
How can I change value options of one combo box depending on the other?
Only with JavaScript, which you ruled out.
Since it is a part of a registration form, I have been advised against using JavaScript validation (as it can be disabled)
You shouldn't depend on JavaScript for input validation because it can be bypassed… but that is true of any client-side input validation you might implement.
Client-side input checking is useful because it can give users rapid feedback if they make a mistake and enter data which doesn't make sense.
You need to accompany it with server-side input checking in order to prevent bad data being inserted into your system deliberately.
This is for an application using AngularJS (if it matters).
I'm looking for a way to add some sort of a "template" to a HTML input field, much like a placeholder. See, I have this date-field, in which the user can type the date, or he can use a datepicker to select the date.
I currently have an HTML input field with a placeholder: "dd/MM/yyyy", which shows the format in which the date should be entered. now what I would like is a kind of placeholder that stays while the user types - and possibly even limits the users options (for instance: only numbers are allowed, nothing else is possible).
Ideally, the placeholder should stay while the user types so he can see what the format is while he is typing. The user should (if possible) also be restricted from typing any not allowed characters.
Does anyone know of any already-existing solutions to this use case? I've been searching for a while now but don't seem to be using the right words ...
Addition: I know I still have to check the user's input server side. I'm not relying on JS for the validation of the date.
You can look at this: http://forza.ndevrstudios.com/#/form-masks
It's done with latest angular-ui (http://angular-ui.github.io/ui-utils/) and something like this in your input field:
ui-mask="99/99/9999" model-view-value="true"
The text input field appears to support the Ctrl+Z (undo) fully.
The number and date input field only supports it, if the value has been typed into the field in question. If, however, it was selected by means of the associated helper control (i.e. the range control for the number fields and the calendar control for the date fields), then Ctrl+Z does not work.
Can anyone advice how to make the number and date fields support Ctrl+Z no matter how the value is entered by the user?
Thanks.
P.S.
I am currently using jquery and chrome.
EDIT1
I am using <input type='number' ... and <input type='date' ... It is entirely possible that I should use something else (what?)
EDIT2
I am talking about interactive actions only, not script based changes.
Undo is a weak spot in HTML5 applications. There is no simple solution because undo is ultimately application dependent (just like in desktop apps).
See this question for some solutions: Implementing undo in a web app
I am writing a javascript to validate Date&time based on the two Dropdowns selected
Based on the dropdown change the validation has to be changed on Date&Time field
I am looking for the validation popup some thing like:
Entered Date&Time should be on or before 1 AM (Midnight) same day
I'm sure that a framework would help immensely (and I'm sure you'll get lot of suggestions to move to one) but if you're just looking for better Date handling you might want to look at my DP_DateExtensions component.
It'll allow you to very simply parse dates (create date objects from your drop-down field values using the Date.parseFormat() method) and then do date math and comparisons on them (in your case using date.compare() to compare the entered date to your target date).
You can then use the timeFormat() and dateFormat() methods to display date/times exactly as you want.
The component's old... but well seasoned and, at least to me, insanely useful.