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.
Related
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.
I understand that we can disable certain dates (Jquery UI datepicker. Disable array of Dates) by manually specifying each date in array however this seems like a messy solution to a problem.
Is there a simpler method of just providing a start and end date of a period in which dates should be disabled? i.e. 07/07/2020 to 07/08/2020 rather than specifying each date between these?
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.
I'm new here, but I can't seem to find an answer to this question and my JS knowledge is amateur at best.
I have a PDF form that I have built so my team can create and then laser etch a nameplate. One of the fields is a manufacture date for the product. I tried setting the date format to ddmmmyyyy, but I also need the date in uppercase, which the Adobe date format doesn't seem to do.
I've done a metric ton of research and the best I could find is this:
event.value = util.printd("ddmmmyyyy", new Date()).toUpperCase();
This works great, except it enters today's date and I don't know how to modify it in order to make it work with a user entered date.
I'm having trouble finding an elegant way to allow for date/time input in an html form. I am thinking of having drop down menus for year, month, day, hour, minute, second, millisecond that are populated with valid entries only. I could do this by hard coding values for each drop down menu, but I'm thinking there must be a more elegant way to do this, perhaps with some already existing javascript library that I have not found yet. Any tips for getting this done?
edit: Second, and if possible, millisecond precision is needed for what I'm working on.
edit#2: After reading some of the comments, I have come to the realization that it is probably a bad idea to have drop down menus for the large range of values required by hours/minutes/seconds and especially milliseconds. I think will go with having the DatePicker prototype date chooser, along with a simple textfield for time input.
This can be done quite elegantly with a Jquery plug-in called Datepicker
There are many calendars which can do this, with both date and time :
Calendar Date Select
Control.DatePicker (based on PrototypeJS) my favourite, I made an enhanced version, with more features, I can share it
Dynarch calendar but I find it too heavy
and others
I think a very easy way to do this is by using PHP i.e. for making choosing a day and a month:
Use the select command for the form, then insert a PHP line to initiate a for loop. So for the days the loop would go from 1 -> 31 and for the month from 1 -> 12. So instead of hard coding it for all the days months etc, you can neatly fit it into one line of code with a small bit of PHP added.
You could expand on on this plugin since you want second/millisecond
http://www.jnathanson.com/index.cfm?page=jquery/clockpick/ClockPick