I have noticed an issue with form validation on dates within firefox, that I would greatly appreciate any advice or a usable work-around for.
Date Validation Problem
I am using angularjs v1.3.11, and the issue i'm experiencing is actually with the bootstrap datepicker, however it is the same issue for a standard input type="date" field.
If I put an invalid leap day e.g. 29/02/2013 (en-GB date - DD/MM/YYYY) into a text field using bootstrap datepicker or an input type="date" field $valid on that form field reports as invalid on ALL browser accept for firefox. I really want it to report as invalid on every browser!
It appears to invalidate a date, if I for example put complete garbage into the field such as entering a date without a month so 29/2013 would quite rightly report as invalid in all browsers I've tested. It's almost as if angular is running a special regex for firefox that doesn't care about the validity of a date other than that it has 3 sets of numbers in it.
Viewing this date issue on the angular website
If you select the following link https://code.angularjs.org/1.3.11/docs/api/ng/input/input%5Bdate%5D you will be taken to angulars own write up of input[date].
Follow the link in firefox - scrolling to the bottom of the page to the example they've put on the screen and type in an invalid date such as 29th February 2013 (It seems to need ISO date format for firefox on this site) and you will see it report the date youv'e entered as valid, even though there is no 29th February in 2013 as it was not a leap year.
If you perform the same test in chrome for example, then you will see it report the date as INVALID - which is what I wish to happen.
How to resolve this?
Thankyou if you've managed to read this far! I realise that this may be an issue with how a particular browser deals with dates, although i've searched far and wide and haven't found any listed bugs for this in either firefox or angular.
What i'm really hoping here, is that someone may know a work-around, for example a way of intercepting the call that determines $valid on an input field, so that I can run my own regex or something like that. If anyone know's why this is so strange in firefox i'd love to know that too!
Thanks in advance for any help anyone can offer :)
Lindsay
You need more sophisticated date logic to determine if a date is valid. I suggest using a third party library like moment.js or date.js to perform the date validation logic.
Try the demo link at the bottom of the accepted answer for the following SO question:
Simple angularjs date input
Enter 2013-02-29, it will correctly identify the date is invalid.
Tested on Firefox, IE, and Chrome.
Related
I have the ninja forms plugin in my wordpress website for a tailor made tour form. In that form there's a datepicker.
Recently it has started to give me an error when i select the dates. I can only select the dates before current date and two days after current date. When I select a date after the current date (eg: current date- 10/05/2018 | selecting date- 23/05/2018) it gives me the message "Please enter a valid date!" which is considered to be a blocked date.
I googled the heck out of this and still couldn't find a solution. Could someone please help me to resolve this issue?
I had the same issue and ended up changing the Format setting of the field from "Default" to "DD/MM/YYYY". Some sort of bug in Ninja Forms I guess. I haven't had time to dig into why yet, so if anyone has a clue, let us know.
I've tried tons of things to fix this, but the problem continues to vex.
I have a Date field in SQL Server (not Datetime, because time doesn't matter), and a Java API (Spring actually) serves this field to my Ember front-end, where a user can edit the field (using an ember-pikaday input, but that may be immaterial).
The problem is that when I switch to edit mode, the date shows one date before, and if I save, that one date before is what gets saved. If I look at what the API is returning, it looks like the following:
"2015-02-03T05:00:00.000+0000"
I'm still very much learning JavaScript (and Ember), so it looks like there's some local time zone information being used automatically (I'm in EST, which is GMT-5) and that's why it's returning the 5AM time.
I really don't want it to do anything at all with time, but as JavaScript date objects by definition include time info, I'm not sure how to get rid of it. I've tried setting the time to noon so that even with a five-hour difference, it will be the same day, but since the database doesn't save the time, the next time I refresh the page, I'm back to square one.
I've run out of things to Google, which is why I posted here. I'm sure I'm missing something obvious and easy.
EDIT: I tried creating a new variable to get just the date part and using that throughout, but when I go into Edit mode, where my Pikaday input comes into play, it still shows the date before, so I'm suspecting that's the cause of the issue, but I haven't seen hardly anyone else complaining of this.
Here is a similar ember.js question:
Ember.js dates a day early
Also make sure your javascript ISO-8601 date has the timezone. I had a similar issue with web api where the ISO-8601 dates were not sending any timezone info and no Z for UTC and the receiver assumed they were not converted to UTC and made them a day earlier '2012-07-27T18:51:45.53403Z // UTC'. You could use Fiddler or Chrome dev tools to see the format of date you are sending to the server make sure the Z or offset '2012-07-27T11:51:45.53403-07:00 // Local' is there.
This question already has answers here:
Why does Date.parse give incorrect results?
(11 answers)
Closed 3 years ago.
I am getting date from code in "MM/dd/yy" format. I am creating an object of Date in JavaScript as:
var tempDate = new Date(dateStringInMM/dd/yy)
Now, in IE, tempDate.getYear() is giving me "13" and tempDate.getFullYear() is giving "1913" as value.
Is there any provision to get "2013" for IE in JavaScript?
1913 is a perfectly good guess when given only a two-digit date. The browser has no way of knowing what kind of date your site is asking. For example, if you're asking for the user's DOB, 1913 would be a better guess, as someone born in 2013 wouldn't be old enough to use the site yet.
I can see why you might expect it to guess 2013, but given just two digits, there's no way it can reasonably be expected to get it right every time. It's going to be wrong for someone.
The actual reason for this behaviour is likely to be for backward compatibility.
Older browser versions would have guessed 19xx when given a two digit date. It would have been a perfectly legitimate guess back in the day.
In the meanwhile, sites would have been written by authors who knew this and may have done tricks like adding 100 to the value to work around the issue.
This means that if a new version of the browser is released that changes this behaviour, it would break those old sites.
Microsoft in particular tends to be very conservative about changing existing behaviour, because of this kind of thing. Therefore they would have left it working the way it always did.
The real solution here is to not use two-digit dates. Just specify four digits in the first place, and there won't be any problems.
However, that's not the complete picture, because part of the problem is down to the lack of cross-browser consistency with the Date class. You may find that giving two browsers the same date string gives you different values.
For this reason, I recommend not using the built-in Javascript Date class at all, but instead using one of the libraries that exists to help with this.
The two libraries I can recommend are Date.js and Moment.js.
Both of these libraries will allow you to specify a date, and also specify the format that you're using. They will also both work consistently across all browsers, and will also be more likely to give you the right answer when you specify only two digits for the year (although you're still going to have ambiguity there and possible errors, so I still recommend using four digits).
Hope that helps.
The same functoion is working fine in IE, check fiddle here:
<script>
function myFunction()
{
var d = new Date('11/07/2013');
var x = document.getElementById("demo");
x.innerHTML=d.getFullYear();
}
</script>
<button onclick="myFunction()">Get date</button>
<p id="demo">Click the button to display the full year of todays date.</p>
output is 2013
I'm using HTML5 input type=date field and because some browsers still don't support this feature, I would like to create error validation message for browsers that display just normal text field instead of date field. This error message should look like
Please enter date in format: ...
But I need to find the correct format, that the browser is set to. Is there any php/js/jQuery way how to find out this?
Thanks to #Jose Vega's answer I was able to find very easy way how to do it.
var now=new Date(2013,11,31);
var str=now.toLocaleDateString();
str=str.replace("31","dd");
str=str.replace("12","mm");
str=str.replace("2013","yyyy");
Error message:
"Please enter date in format:" + str
I have used the globalize library to do something similar. I don't know if its functionality has what you are looking for, but I know it does a good job handling different cultures. I use the window.navigator.userLanguage to determine culture and then feed it to the globalize library to do its thing. I've had success when dealing with currency and numbers.
EDIT: See if this helps:
var now=new Date();
alert(now.toLocaleString());
taken from How format JavaScript Date with regard to the browser culture?
Reference Displaying proper date format depending on culture
Why not to allow users to enter date in any format they like.
E.g. i am tourist in the USA and the browser says me to use format mm/dd/YYYY instead of my native dd.mm.YYYY.
Just get any date entered by users and parse it with Date.parse()
I am currently building an iOS App using Phonegap and jQuery Mobile, and I am using the HTML5 input type date element, for the user to enter their birthday. This makes total sense for a Phonegap app to use, because this invokes the phones native datepicker - thats great!
However, when using a desktop browser to test out my app (I am using Firefox 16), no datepicker is shown, obviously due to the fact that Firefox has not implemented this yet. Thats cool, except for the fact that I can enter whatever I want into that field - any format I want.
The specification says that it should use the yyyy-mm-dd format, and my iOS device does that. But, if I enter e.g 06-09-94, that won't play nicely when I try to convert it to a JavaScript Date Object.
Here are my tests:
// Value is set to 1994-09-06
console.log(new Date($("input[type=date]")[0].value));
// > Date object representing September 6, 1994
// Value is set to 06-09-1994
console.log(new Date($("input[type=date]")[0].value));
// > Invalid date
I've read somewhere that internally (atleast for chrome), all "valid" date formats will be represented as yyyy-mm-dd, but that's not happening. http://updates.html5rocks.com/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome
What kind of format does the input value return?
The input.value always returns as yyyy-mm-dd regardless of the
presentation format.
So, as the title suggests: Why would I want to use an <input type="date"> in a non-mobile based web application?
You would want to use the HTML 5 form elements because there is hope that one day all major browser support them. As you noticed, datepickers etc offer really great functionality out of the box, which would have to be coded by hand otherwise.
You wouldn't want to just let them stand on their own, though, in environments where you have no controller over what browser the user is using.
The suggested way to handle this at the moment is to check, if the browser supports the required form field, if not, use an alternative like a jQuery UI element.
Quickly googled tutorial: http://www.javascriptkit.com/javatutors/createelementcheck2.shtml
I think, some of the js framework handle such a check internally, at least for dojo I know that they try to use as much native browser functions as possible - but I'm not sure how it is handled with datepickers.
I have to say, I'm surprised firefox hasn't implemted this yet, Chrome and Opera seem to lead the way....
Since not all browsers still support all HTML5 features you can't see all it's benefits right away.
The <input type=date> tag is one of those features, if you run the code in the Chrome browser it will open date picker, when you can choose the date by clicking on the arrow button. This feature is missing though on Safari browser. Just wait for updates of browsers.
You check that the value is in an appropriate date format before trying to convert it to a Date object.
If it isn't, display an error message to the user instead (e.g. by adding a <label> by the <input> or using an alert).