How can I make it so that user has to enter YYYY-MM.
Where in the input box, the hyphen already exists and that you have to fill out as seen replacing YYYY and MM but you cannot enter anything else.
input date gives the mm/dd/yyyy format. I want YYYY-MM.
The date input doesn't allow any deviation from the standard styling, therefore this is not possible (to my knowledge) to do in standard HTML, however, you could utilise a standard HTML input, and then use the Masked Input Plugin by Digital Brush (using Javascript) to mask the input format.
For example:
$("#input").mask("9999-99");
You can also set your own parameters or custom placeholders using the plugin, more info on this can be viewed on their website.
You can't edit the date type format.
If you don't want to use the date picker that HTML5 gives you for free, then you could create your own input box with regex restrictions.
<form>
<input type="text" name="input1" placeholder="YYYY-MM" required pattern="[0-9]{4}-[0-9]{2}" />
<input type="submit">
</form>
If you want more strict validation (this one only validates that input is a 4 digit number and a 2 digit number separated by a hyphen), refer to this post
Regex date validation for yyyy-mm-dd
You can play around with the code here:
https://jsfiddle.net/bowenyang/oth9b8o7/
Related
I have an input field of type="number", I want to put an initial value in the field which may be a large number. I was specifically asked to display large numbers with commas to make them more readable so I'm using the .toLocaleString() function to get the number as a string with commas.
Chrome it seems doesn't allow commas in number fields. Is there any way around this? I don't want to use a text field if possible because I don't want the user to be able to input any letters under any circumstance and I would rather not have to do input validation if I can avoid it.
Is there any way to display a number with commas in a number field that is cross-browser friendly? Alternatively, is there a way to just display an arbitrary string in a number field?
According to Mozilla, the placeholder attribute can hold arbitrary strings, though that attribute needs to be used carefully.
<input type="number" placeholder="1,000,000" step="10"
onClick="this.value = this.value || 1000000" />
I can't seem to get the pattern attribute to work for the HTML form validation. I have seen a lot of tutorials and it all says the same and it works for them. Though I am using the same technique as the tutorials, I can't get it to work. For an example, please see the below code.
<label for= "firstname" id="firstname">First Name*</label>
<input type="text" name="firstname" pattern="[A-Za-z]" title="Only Alphabets" required/>
I want only alphabets to be inserted into this text box. When I insert numerals, it does ask to match the requested format which is only alphabets. But even when I enter alphabets it shows the message though it is supposed to let me submit the form. I tried all I can but can't seem to find a solution for this due my lack of knowledge. I would really appreciate if you could let me know how to enter only numbers into a field, only alphabets into a field, numbers and alphabets into a field using the pattern attribute for validation. Moreover, I was wondering whether the pattern attribute would be able to help me with this as well. For the National ID text box, I want the user to insert data in a specific format. Like this "A000000". An A in the first followed by 6 digits and if this format is not followed, then to display the message asking to match the requested format. Thank you so much in advance. (Please keep note that I am not using jquery).
Edit
May I please know how to add ' (apostrophe) along with the alphabets? Moreover pattern="[A-Za-z]+" wont let me insert spaces between words. How do I fix that?
The pattern field uses regular expressions. Try:
pattern="[A-Za-z]+"
For the national ID you could use:
pattern="A[0-9]{6}"
I like that Chrome gives you the masking/format automatically when you use the type="time" attribute/value. But I can't seem to set an initial value for the control.
This:
<input type="time" value="05:00 PM" />
Just renders as blank (with the masking) in Chrome. And when my form is submitted, it submits it as blank.
I'm guessing this has to do with the format of the string I am setting in value. But I don't know what the correct format is (and why the format I used wouldn't work - seems like a reasonable time format to me).
Here's a JSFiddle to play with just in case you want it.
Any suggestions?
Try something like:
<input type="time" value="17:00:00" />
Read this.
So, per the spec:
Value: A valid partial-time as defined in [RFC 3339].
Referring to RFC 3339 specifically section 5.6 in a footnote. Here you will find that it is defined as
partial-time = time-hour ":" time-minute ":" time-second
[time-secfrac]
So, practically this means that you can not use anything like PM or AM in the value, although the browser may decide to present the time in any way it wishes (depending on how the user chooses sometimes even). The value you will receive when you submit the form will be always in the above format however.
Is it possible to change the default content of this element: (Using Google Chrome)
<input type="month"/>
To make it, for instance, a blank field (default display)?
I don't believe it's possible to make the input field entirely blank, that is without the hyphens.
Is it possible to change the default content...
You can, however, change the default date shown through the value attribute:
<input type="month" value="1963-12" />
This will display December, 1963 (oh what a night...)
Note that the month must be two characters, 0 padded for less than 10.
I would suggest reading up on the other attributes that let you customize the field further.
If you really want to show an entirely blank field, I would suggest using a blank input tag and writing your own functionality to style and format the date within it.
I have a input tag like this:
<input class="span2" type="date" name="date" value="01/12/2012">
The input form in template is displayed like mm/dd/yyyy. The static value that I provided is not working. However when I change the type to date it works. Does html not allow this?
The input tag with type="date" is supposed to accept dates in the format of YYYY-MM-DD and not mm/dd/yyyy as you are trying to pass.
Read more about it on w3.org and validity is defined as per RFC 3339.
Therefore, the value should be passed as
value="2012-01-12"
You're not conforming the HTML5 specification: http://www.w3.org/TR/html5/forms.html#input-author-notes
The specification requires that all literal date values be written in ISO 8601 format: yyyy-MM-dd:
The format used "on the wire", i.e. in HTML markup and in form submissions, is intended to be computer-readable and consistent irrespective of the user's locale. Dates, for instance, are always written in the format "YYYY-MM-DD", as in "2003-02-01". Users are not expected to ever see this format.