How do I create a date field in angular/html to force the user to input the date in a specific format like MM/yyyy without any validation?
For example: when the user enters the first two digits of month, he should see a slash '/' so that he can enter only 4 more digits for year.
I know it can be done with a simple regex validation, but that will allow the user to enter the date in any format and then validate to show the error.
Instead of fiddling with Javascript and HTML code I would suggest you take a look at some of the baked-in date parser directives offered by angular-bootstrap as a starting point and tweak things from there.
Example 1:
Date parser
Example 2:
Date picker
Example 3:
Date picker with popup
As requested by OP. He is looking at inputting Month/Year only. This example might be more relevant;
Example 4
Related
I am making a web app which should accept a specific interval that is added to the target date to check if the request is expired. So I need an input with formatting: months:days:hours
Where months is limited to 12, days to 31, and hours to 24. I tried to use jQuery inputmask plugin
I made like this:
https://jsfiddle.net/qahxvspb/2/
But it doesn't work for some reason, I put a mask like this:
mask: "mm-dd-hh"
But in the input I get weird stuff, there is still placeholder mm-dd-yyyy, and I only can input year into it.
So 2 questions:
How to make a correct mask?
How can I make allow zero month in the mask? So, basically, it would be optional for the range, if I want I would just put 0 into month, check that on server, and create a range only from days and hours.
Javascript Date makes my head hurt because of things like what you are trying to do
I use a library called moment,which is available as a cdn or npm package
It can create input patterns like the one you have, do arithmetic on dates and then convert to the time format you want, even Javascript Date
How can I disable few dates (Ex: one week) on a HTML datepicker? I have an input item like this
<input type="date" id="date01" name="date01" max="2019-12-30">
I know I can use min and max values to limit available time period, but in here, I want to block out some days in the middle. can I do that with plain html date picker? if so, how?
You can't: the HTML5 date input only accepts a lower and upper bound to indicate the allowed date range: you cannot specifically select certain dates that are disabled/non-selectable to the user.
There are two solutions to your approach:
Use a combination of client- and server-side validation to let the user know that certain dates are not allowed. This comes at the cost that the user does not know which dates are not allowed when the native date picker is shown in the browser.
Alternatively, you can use a third-party library that allows disabling of specific dates.
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 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.