I have a standard <input /> control on my form, decorated with type="date"
When rendered, it displays the correct watermark of yyyy-mm-dd, and you can select a date correctly.
However, when you try type in a value, the year extends to 6 digits, instead of four. I have added screenshots to help demonstrate the issue I'm having.
Is anyone else getting this? I'm using Chrome ( Version 35.0.1916.153 m ) as my default browser.
I'd like a way to force a 4year input that doesn't involve extra JS.
the max attribute is working, as far as i know...
the format of max is trickey, if you put the correct format everything will work fine....
see here for example:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_max_min_date
Use max attribute to fix this problem like:-
<input type="date" max="1979-12-31">
A bit old, but for posterity...
Using the max attribute eliminates this problem.
<input type="date" max="2999-12-31">
Pen: https://codepen.io/iHearRobots/pen/OQVzLZ
It will let you type a larger year. It wasn't designed with a cap, so to allow years beyond 9999. Not sure why. (note, even with the max attribute, it doesn't appear to restrict it. [edit] .. it may not allow the user to actually submit after entering that larger number.)
You will need to use a JavaScript solution if you want to fully restrict it.
See this previous thread
const maxLengthCheck (event) ->{
let date = event.target.value
if(date){
let dateArr date.split('-')
if(dateArr[0] && dateArr[0].length>4){
dateArrl[0]=dateArr[0].substr(e, dateArr[0].length-1)
date = dateArr.join('-')
console.log("updated date : ", date)
document.getElementById('date-input').value = date
}
}
}
//HTML changes
<input id="date-input" type="date" onInput={maxLengthCheck}/>
Related
I notice that the date input works differently from the other inputs.
I would like to know if it is possible to have different colors inside the date input.
To illustrate, I would like that when nothing is written inside:
And have this when we are typing the date:
I'm developing with Angular, I have not done HTMLElement, but I can in need.
Here is my code:
https://stackblitz.com/edit/angular-scss-demo-pusdk7
Is it possible to get something like that?
Can you please try this:
<input type="date"
name="Birth date"
[formControlName]="BIRTH_DATE"
/>
Chrome is being overzealous and thinks my HTML form contains credit card information and thus proposes to fill it in with credit card information.
Are there any attributes that I can use to tell Chrome that there is no credit card information to be filled in, in this form?
The field names it is trying fill in credit card information in are:
reg_id (it puts in a CC number here)
emergency_first_name (it puts in first name here)
emergency_last_name (it puts in last name here)
I don't want to have to disable autocomplete if I don't have to.
The frustrating thing here is the Chrome 'knows better' attitude, where it ignores any value to autocomplete, including off:
<input autocomplete="off" value="" size="10" maxlength="10" id="id_reg_id" name="reg_id" type="text">
Edit: updated following answers.
try
input type="custom"
or use textarea with a single row and resize off
Your browser shouldn't remember your credit card number by default -- I can only assume that you entered into a field that had a 'generic' autocomplete value on it. You can always force your browser to forget this information by simply hitting Delete when selecting it (with the arrow keys) in the dropdown of pre-fill options.
As for preventing it appearing in certain fields, it depends on what information you want each field to hold, but there's a wide array of autocomplete values that you can use. You can use number for IDs, and the other two fields you mentioned actually come with specialised autocomplete values, given-name and family-name:
<input name="reg_id" autocomplete="number" />
<input name="emergency_first_name" autocomplete="given-name" />
<input name="emergency_last_name" autocomplete="family-name" />
If number just won't cut it, you can also make use of a JavaScript regular expression to further restrict input:
const regex = new RegExp("^[a-zA-Z]+$");
const form = document.getElementsByTagName('form')[0];
const reg_id = document.getElementsByTagName('input')[0];
form.addEventListener('click', function(e) {
e.preventDefault();
if (regex.test(reg_id)) {
this.submit();
}
});
<form>
<input name="reg_id" autocomplete="number" />
<input name="emergency_first_name" autocomplete="given-name" />
<input name="emergency_last_name" autocomplete="family-name" />
</form>
I have been banging my head against the desk for a while because of this. We have forms to enter Instruments test data, and a field called "Test Card Number", as well as "Kit (Exp. Date)". Guess what Chrome thinks these fields are for?
Needless to say, I'm pretty sure the users would be VERY upset to see chrome us trying to pull their CC information when they're inputing clinical research data.
Even autocomplete="new-password" and autocomplete="nope" are failing to do any good, here.
I tried to load the field with no label and add it dynamically in javascript. No dice. Used html entities instead of characters. Nope.
Well, after a few hours of scouring the web with no solution in sight, I figured one out: insert a few random - within each word of the offending labels. (For me, with Test Card Number, it had to be in BOTH Card and Number. Test was fine left alone).
One could easily write a javascript extension/utility function to split the html of an offending label and slap that invisible span down the middle (and one to remove it in case of needing to use the label value).
Something like this (using jQuery and old js standards because we support old browsers, with no verifications if label is missing or empty, so adapt accordingly. In fact, I'm sure a regex or some other fancy stuff could be used, but I don't have the time to fiddle around with it atm):
jQuery.fn.breakAutofill = function () {
var $lbl = $("label[for='" + this[0].id + "']"),
finalText = $lbl.html().split(" "),
foilSpan = "<span style='display:none;'>-</span>";
for (var idx in finalText) {
var textVal = finalText[idx],
midPos = Math.floor(textVal.length / 2);
finalText[idx] = textVal.substr(0, midPos) + foilSpan + textVal.substr(midPos);
}
$lbl.html(finalText.join(" "));
}
Which you can then call on document ready :
$("your_input_selector").breakAutofill();
I hope that helps someone.
My problem is how to input date in HTML form in this format 21-01-1999 and not in this format 01-21-1999?
When I write this HTML code
<input name = "dPregled" id="dat" type="date" required="required" />
</p>
it gives me mm-dd-yyyy format for input.
Also is there a way to automatically take today's date in a form?
I have been researching for an answer everywhere but I can not find it.
Thank u so much.
A quick Google search gives me loads of answers to your question.
From https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome?hl=en (so this applies to Chrome)
Web authors have no way to change the date format because there
currently is no standards to specify the format.
For the rest, according to Is there any way to change input type="date" format? and How to set date format in HTML date input tag?, there is currently no way to change the date format. It is all determined by your browser/OS, and because there is no specification yet for how to change the date format, you currently cannot change the format.
However
The Stack Overflow posts mentioned above are quite old, but one of the more recent answers (currently the second one on Is there any way to change input type="date" format?) does provide an answer on how to edit the format, although it requires some playing around with what I'd call somewhat advanced stuff. You can do it with HTML5 and the shadow DOM, which enables you to more or less create your own HTML elements. Older browsers / browser versions don't usually support it too well, though, but you could dig into it a bit and see if it works for you.
Regard to this question:
Also is there a way to automatically take today's date in a form?
Here what I'm gonna do if I need the current date:
//assign that variable to your date field
//today date.
if(empty ($_POST['date_today'])){
$_POST['date_today'] = date("Y-m-d");
}
//if u need other date + or - number day to count that date(here is past 5 days)
if(empty ($_POST['date_from'])){
$_POST['date_from'] = date("Y-m-d", strtotime("-5 day"));
}
in your html (for today) should be like this:
<input type="date" name="date_today" value="<?=$date_today?>" >
don't forget to declare that variable (eg. today date)
$date_today = $_POST['date_today'];
go with Jquery date picker its easy and it can modify date in any format
use Input type text instead so its more convenient to use predefined values
or use this code, and edit as per requirement
basically this code will help you check out
<!-----user will type date in dd-mm-yyyy formate but as he leaves textbox date will be converted to mm-dd-yyyy--->
<!--run it on fiddle : https://jsfiddle.net/rokrd/jp1swqru/9/ --->
<input type="text" name = "dPregled" id="dat" onchange="dateconverter()" required="required" />
<script>
function dateconverter(){
/*const monthNames = ["Jan","Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];*/
var testDate = document.getElementById("dat").value;
dteSplit = testDate.split("-");
yr = dteSplit[2]; //special yr format, take last 2 digits
month = dteSplit[1];
month = parseInt(month);
//month = monthNames[month];
//remove comment to get output in dd/M/yyyy
day = dteSplit[0];
alert ("converted to mm/dd/yyyy > "+month+"-"+day+"-"+yr);
document.getElementById("dat").value = month+"-"+day+"-"+yr;
}
</script>
with firefox, I have the same issue.
I found this link :
https://support.mozilla.org/en-US/questions/1309229
use about:config to set firefox params
and switch intl.regional_prefs.use_os_locales to true and it works fine.
Notice that using input type="number" can display a numeric keyboard as below:
Is it possible to use input type="text" to display the same numeric keyboard? I do not want to display a number pad using pattern="\d*" because it is possible that the value will contain a decimal place.
The reason I would like to use input type="text" instead of input type="number" is that I cannot get back the value if I input a non-number for a number field. For example, if I input ABC, it will become empty automatically. It seems to me that using input type="text" will be easier for this kind of control.
If your input is a true number, integer or decimal then use the HTML5 type="number" input. This will bring up correct keyboard on Android devices (assume Windows phone too).
Then the trick is to place a pattern="[0-9]*" on that attribute to force the special numeric keypad on iOS. Note that:
This will not mark a decimal or minus sign as invalid because the pattern attribute is actualy NOT valid on a type="number" field! and
This is the ONLY way to get the iOS numeric keyboard. See difference between the number section of the alpha keyboard (as in your screenshot above) compared to the true numeric keyboard.
One last note, be sure NOT TO use the type number field for inputs that are not true numbers (eg. zipcodes with leading zeros or product codes with comas or spaces). A numeric input field MAY NOT SUBMIT values that are not true numbers! (depending on browser/device)
The numeric keyboard provided by Apple on iOS is sad joke. But, you can fix this using:
inputmode="decimal"
Work fine on Android, off course.
:)
use this code:
<input type="number" pattern="[0-9]*" />
There are other types which can display numeric keyboard.
With type="number" you can do nothing. It won't accept anything but numbers. But if you use type="tel", it's an ugly hack, but it works.
Here's my zip code example:
<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">
There will however be a problem with "-" key on some screen keyboards, you can work around this problem with adding the dash after specified number of characters in JavaScript like this:
// Zip Code dashes
$('input[type="tel"].zipCode').keyup(function(event) {
var t = event.target, v = t.value;
if (v.length == 2) { t.value = v + '-'; }
});
(Please excuse jQuery).
Instead of using type="tel" you can use type="text" and pattern property, but I haven't tested it yet. Most likely it wouldn't work with most browsers.
I couldnt find any solution for that as of now.
But one possible trick you could do is use type="number" and change it in javascript with document.getElementById("element").type="text";
but however this would also clear the ABC but it would accept numbers commas and decimals
Try this workarround. Worked for me.
It will turn type to number then return back to text.
This will force ios to switch to numeric keybord on the first prop change.
The setSelectionRange is for select the input value.
$(function(){
$("input[type='text']").on('mouseup', function(e){
e.preventDefault();
});
$("input[type='text']").on('focus click', function(e){
$(this).prop('type', 'number');
var obj = $(this);
setTimeout(function(){
obj.prop('type', 'text');
document.getElementById(obj.attr('id')).setSelectionRange(0, 9999);
}, 50);
});
});
I tested a few options on different iOS devices
The most supported way is to use the pattern attribute, e.g <input type="text" pattern="[0-9]*" />, since it works on several iOS versions:
Iphone 13 (iOS 15.1)
Iphone 8 (iOS 11.4)
Iphone 6 (iOS 8.1)
If you only need to support iOS 12.2+, using only the inputmode attribute works fine
I have two fields in my form : one is the limit and other is value. So if I enter 30 in the limit field, then in my value field I need to open up something similar to a date picker, which shows all numbers from 1-30 and user should be allowed to pick one or multiple values.
Is there a js library that I can use to achieve this?
Ive built it for you
http://jsbin.com/ehuke4/37/edit
How about using a slider? In HTML 5 you can use the below code. For browsers that do not support it you'll want to use some sort of alternative.
<input type="range" min="1" max="30">
jQuery UI has a nice slider too.