I have almost no knowledge of web programming, but I have been tasked to solve something on my company's website. Apparently, I have an issue with browsers using HTML5 on a legacy site using type="date" and I need to find a way around it.
My site has a lot of date fields that the user must input like such:
<input type="date" name="DateStart" size="15" value="8/30/2011">
In every browser we currently use except Chrome, this works just fine. Chrome is the only browser that supplies rolling buttons to scroll through the date. What I see on the back end of this is an attempt to do this:
FormatDateTime(DateStart, 2)
I get an invalid date error which means that we cannot use Chrome to fill out this form. Is there a way around this problem?
Actually chrome's support for 'date' is broken. (See here). At least for the moment.
The use of 'date' in the HTML is absolutely fine - browser's which do not know of or support an input type are supposed to fallback to type='text'.
Currently chrome partially supports date, in a way that is essentially broken (it adds a couple of up-down buttons, but no datepicker.)
Of course you do need to bear in mind that if you are using type='date', and if the browser supports it, then you'll want to disable whatever datepicker support you'd otherwise be using.
UPDATE (6 Feb 2012):
It looks to me like this is now fixed. Chrome no longer claims to support input type='date', and does not provide the partially complete implementation.
UPDATE (17 Aug 2012):
Chrome does now have input type="date" support, and it's more functional this time.
Chrome does not have issues with date-inputs, you are using the wrong date-format, sir. Chrome isn't the only browser until today which has support for the new HTML5 inputs. Opera for example displays a dropdown with a calendar on inputs with type="date".
Also the size-attribute does not exist on HTML5-date-inputs.
The value field for the input type = input needs to be in the format yyyy-MM-dd. Check the W3 standards on this.
This means you must do something like DateTime.Now.ToString("yyyy-MM-dd"). in your code, I would suggest a custom HtmlHelper.
The format of the date in the browser is completely dependent on your system settings.
Use this date format : date("Y-m-d");
Related
I have used HTML in my new project and seems pretty nice to use some of the new features. However there is a few things that are iffy and I can get them to work. For example if I use pattern attribute for my field validation error message isn't showing in all browsers. I read few blogs but all of them are too old and I'm not sure which of these problems are fixed. Here is my example:
<input type="text" name="frm_field1" id="frm_field1" style="width:50px" pattern="^/d{1,3}$" title="Numeric values up to 3 digits." x-moz-errormessage="Numeric values up to 3 digits allowed." />
The code above will output the error message in Firefox but won't output anything in Chrome, Safari, and IE. I'm wondering if this problem can be fixed some how?
So far I couldn't get this error message to show in all browsers. My field is not required and validation is triggered only if value is in the field. If anyone knows the way to fix this problem please let me know.
It's because you're using a prefix specific to firefox x-moz-errormessage
There is no equivalent thing for webkit (chrome) but you might want to look at setCustomValidity
You can also preferably try using javascript to validate your form instead.
I want to update the date value (displayed as mm/dd/yyyy with only the number portions modifiable) of some HTML5 date form fields:
<input type="date"/>
in my Selenium/Protractor tests. I've tried using sendKeys for this but (on Chrome) have not been successful so far.
Is there a way to do this using sendKeys? Or some other way to do it?
Using Chrome on Mac with Protractor, the following approach has worked for me.
Template (html5)
<input type="date" placeholder="Due Date" ng-model="newLesson.dueDate">
Test
this.newLessonDate = element( by.model('newLesson.dueDate') );
this.newLessonDate.sendKeys('01-30-2015');
I kept getting errors until I entered the date format as '01-30-2015'.
Seems like the best approach at the moment is to update the input field without touching its UI representation.
For normal Selenium this approach appears to work (as the UI updates to match):
selenium.executeScript('document.getElementById("continuousFrom").value = "2050-01-01"');
selenium.executeScript('document.getElementById("continuousTo").value = "2050-01-14"');
My case is a bit more tricky because I'm using Angular and Protractor and the above approach didn't result in the model being changed. So I've ended up with this (even uglier) approach that modifies the model directly:
browser.waitForAngular();
browser.executeScript('var scope = angular.element($("#continuousFrom").get(0)).scope(); scope.dates.from = "2033-01-01"; scope.$apply();');
browser.executeScript('var scope = angular.element($("#continuousTo").get(0)).scope(); scope.dates.to = "2033-01-14"; scope.$apply();');
Also this is in a Protractor test and it took me a while to realise that the executeScript call does not wait for Angular to have finished creating the new DOM itself - hence the waitForAngular to make sure the ids are there.
I had the same issue today, and I found the solution here http://www.guru99.com/handling-date-time-picker-using-selenium.html
The solution is to send only the date numbers, for example instead of sending "2015-06-12" you need to send "20150612".
I finally found a working solution, use Date.prototype.toLocaleDateString:
// Remember that Date months are 0 based.
var keys = selenium.executeScript(
'return (new Date(2016, 2, 7)).toLocaleDateString()'
);
sendKeys(keys);
I had a Credit Card expiry date with month and year only. The solution worked form me is using protractor.Key.TAB to move the cursor and input like below
element(by.id('cc-expiry')).sendKeys('12', protractor.Key.TAB, '2019');
So in your case you can try
element(by.id('cc-expiry')).sendKeys('12', protractor.Key.TAB, '12', protractor.Key.TAB, '2019');
Selenium is meant to mimic user interaction and not setting attributes.
However updating the DOM elements by setting the type could be done using Javascript
document.getElementById("someID").setAttribute("type","date")
I had an issue where sendKeys() was working, but the input was always $invalid. The only format that worked for me was 'YYYY-MM-DD' i.e. '2015-08-05'. Any other variation on that format; slashes instead of hyphens, no delimiter, etc. remained invalid.
Even though I'm using Firefox version 37.0.2 which clearly supports HTML5 input type=date, It's noteworthy that the docs say:
"In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601 date format (yyyy-MM-dd), for example: 2009-01-06."
FWIW This answer is the opposite of what worked for me.
Google Chrome shows a datepicker when the <input type=date> is used (chrome V20+). The date shown in the field has a dd-mm-yy format. However, for this webpage I NEED the dd-mm-yyyy format.
The 4-digit year format is crucial for the user who enters data (eg it both shows 1745 and 1945 as '45', this is quite dangerous for some uses) on this page.
Is there a way to force Chrome (and other browsers) to show the format chosen by the developper of the website, instead of the locale?
Thanks,
Mike
The HTML5 spec doesn't provide a way to work around this. Your best option would be to use jQuery/jQueryUI (which gives you more control) - http://api.jqueryui.com/datepicker/#entry-examples
See also Is there any way to change input type="date" format?
I would like to do validate elements WITHOUT using any validation plugin. To start with, I defined:
<input type='number' required="required" id='amt_elmt' name='amt_elmt' />
But I can still type any text in this control (I expected only number can be typed inside it); it accepts blank value also.
What additional code might be required?
as others have mentioned Forms 2.0 or the new HTML5 input types are not supported by all browsers (see this link).
I recently answered another question dealing with the HTML 5 form elements. None of my desktop browsers (FF, Chrome, IE) or my mobile browsers (FF, Android default browser) attempted to validate that I was using numbers, or restricted it to numbers.
Your best bet is a javascript client side validations like jquery.validate or any other number of libraries to accomplish validation.
Edit: The link is to Microsoft's validation library that comes with Visual Studio but you can download it from there website and it works quite well. I can post code on how to use it if you need it
Edit2: Codez http://jsfiddle.net/qxsS8/
Number is an HTML5 input type. This is not yet correctly supported by all browsers, in most browsers you will be able to input anything.
If you want to block anything but numbers while users are typing you are going to need JavaScript on key presses.
If you want to validate after posting if only numbers are used you can use either JavaScript or PHP for this.
Add Javascript event handlers for the events you want to handle (i.e. onkydown, onkeyup, ...). In those functions you can access the value of the input and remove the chars you don't want.
You could use standard HTML5 form validation. Then to support older browsers use this Library:
https://github.com/ericelliott/h5Validate
This will use JavaScript to add support.
All you need to add into your page is the following code:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="jquery.h5validate.js"></script> // You will need to host this somewhere
<script>
$(function () {
$('form').h5Validate();
});
</script>
It works across:
Desktop: IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera. Tested on Windows 7 and Mac.
Mobile: iPhone, Android, Palm WebOS
Finally I found out that using javascript (and maybe jquery) is very flexible.
(No dependency, no third-party error, which is hard to solve for the programmer, who does not know plugin's logic).
link to "javascript only form validation tutorial"
This link proved to be very useful.
This may be helpful to others, hence posting as a separate answer to my own question.
I have a web application where I'm specifying an input field to be a number using the HTML5 property type="number".
<input type="number" value="123456" />
By specifying the type, Chrome automatically formats the value to include a comma (123,456). In other browsers it does not format the number, but it also does not prevent non-numeric characters.
In this case, I don't want the comma to be added. Is there any way to turn off localized formatting?
This is occurring because of the behavior associated with the HTML5 number input type in Chromium, and you are definitely not the only one that doesn't care for this.
I have worked around this issue in the past by using the text type. For example, this has worked well (tested just now in Chrome 11.0.696.71):
<input type="text"
placeholder="Enter Text"
name="inputName"
pattern="[0-9]*">
This behavior of the number type (to me, at least) is definitely a bug, because the HTML5 standard specifies the number should have the following value when formatted for display:
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating point number that represents input.
And the standard defines a "valid floating point" number here, and as far as I can see, including grouping characters is not expected.
Update
I've isolated the issue to the following code down in the guts of WebKit. I've included the line that fixes the issue here as well:
// From LocalizedNumberICU.cpp
String formatLocalizedNumber(double number, unsigned fractionDigits)
{
NumberFormat* formatter = numberFormatter();
if (!formatter)
return String();
UnicodeString result;
formatter->setMaximumFractionDigits(clampToInteger(fractionDigits));
formatter->setGroupingUsed(FALSE); // added this line to fix the problem
formatter->format(number, result);
return String(result.getBuffer(), result.length());
}
I'm on vacation next week, but plan on submitting this patch to the WebKit team when I return. Once they (hopefully) accept the patch, Chromium should pull it in as part of its normal refresh process.
You can see the original code here, the patched revision here, and the diff of the
original file and the patched file here. The final patch was created by Shinya Kawanaka.
There are a couple of extra properties that you can check including valueAsNumber.
Chrome attempts to provide you with the best input method possible based on the input type. In this case, number also has some extra abilities such as toggle up and down.
The point of this, is if the number isn't valid, you will be able to detect that there are errors and also set the styling input[type=number]:invalid { background-color: red; }
You could try ...
<input type="text" pattern="[0-9]*" value="123456" />
which will enforce the entry of 0-9 on Firefox 4 on the desktop as well as an iPhone; I don't have Chrome at hand to try it on, but it should do the same.
Number is one of the new HTML5 input types. There are loads of these - email, date, time, url, etc. However, I think only Chrome has implemented them so far. The others fall back to using the default type (text).
For more info about HTML5 input types: http://diveintohtml5.ep.io/forms.html
If you want to disable it on Chrome, you could leave as text and change it to number if the user device is a handheld. Since it's not a usability killer if the user device sniffing gives the wrong result, you shouldn't have any problems.
Refer to my answer for this similar question.
I believe using <input type="tel" /> is most logical for avoiding this pitfall currently. The other options are intriguing and slightly new to me (like the pattern attribute) but I found them to be unsatisfactory for my design. You can look at a screenshot of a mobile application I complete for Hilton not too long ago here (it's actually shown in the answer I first referenced).
Here is a whole list of regular expressions that you can plug into the "pattern" attribute of the html input tag: HTML5 Pattern
Here is how I am using a pattern to format the number two decimal points:
<input type="number" pattern="\d+(\.\d{2})?" />
Unfortunately it doesn't seem to work quite right on the iPad.
Try this:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}
Why would you want to disable localized formatting? If you want a different format, just change the localization settings of your PC. Why would a user not be interested to show a number in his or her local format? This is definitely not a bug in Chrome but a feature!
It seems to me you are not really using a "number" as input but rather a "text" code with a pattern. See the other posts for suggestions to that.