I need a way to turn my 2 character string dates (i.e. '04/10/2010' & '05/24/2010') into an integers to see if one is greater than the other. If the user enters an end date that is less than the begin date I need to popup an "invalid date range" error.
From what you posted your real problem is:
I need to see if one date is greater than another in javascript/jquery.
If so all you need to use is the Javascript Date object (how to page here).
You can use it as follows:
var dateTextA = '04/10/2010';
var dateTextB = '05/24/2010';
var dateA = new Date(dateTextA);
var dateB = new Date(dateTextB);
if (dateA < dateB){
alert("Your date is out of range!");
}
Note: Above code has been tested and works in IE7.
If you really feel you need an integer value, you can use the UTC function to get that.
The problem is Date.parse('04/10/2010') returns a timestamp (integer) for April 10 in the US and 4 October most other places.
It is best to use a less ambiguous format - if you are taking user input, give the user a calendar, menu, or three label inputs, then build the date from that.
3 inputs:
new Date(+fullyearinput, monthinput-1, +dateinput)
If Date won't parse what you are looking for, Datejs provides a lot of syntactic sugar to make your life easier.
To compare two dates, all you need to do is turn your strings into Date objects and then use the greater than, less than, or equality operators. Javascript provides Date comparison natively.
Related
Similar questions has been asked many times but I couldn't find a more concrete solution. The things I'm doing are:
I have a <input type="date"> inside my HTML which when clicked opens a calender with date in dd/mm/yyyy format.
I change the html5 date to timestamp to send to my db by Date.parse(html5Date) and in the server I modify the date and send it back to my Angular app.
I now convert the timestamp back to Date object by new Date(timestamp).To print the date in a human-friendly format inside a table I do [date.getDate(), date.getMonth() + 1, date.getFullYear()].join('/').
On edit (PUT request), I again capture the date from HTML, convert it to timestamp, send it to server and process the returning date back to html date.
Other than these, I also do a ton of functionalities like date comparison, adding hours to the dates, show time of the day etc inside the HTML:
Just these simple operations are over 120 lines of code which I think is ridiculous and error prone. I've looked into Angular Datepicker but it's a bit confusing. Also sometimes the HTML date is of type Object and sometimes it's String so Date.parse() gives error.
Are there any developer friendly methods that does : copy HTML5 date (from datepicker) --> change to timestamp (for angular&server) --> format timestamp back to string/object (for html)? Thank You :)
Note: Angular throws a lot of annoying error in console saying dateformat is wrong (being html date type) but doesn't stop code from running
Sounds like you are doing waaay to many conversions. I would argue that there should only be one way dates are represented: as Date objects in the programming language. There are only a few conversions that need to happen:
Date <=> Integer milliseconds since the epoch to pass to server
Date <=> String human-readable format to display to user
Any thing beyond this is asking for trouble. Comparisons can be made by casting to int date.getTime(), comparing, and casting back to Date. Ditto for additions. Note that Date.parse is implementation dependent in what it will accept, although all of them will accept ISO 8601 formatted date strings anything else is guesswork. Which means you will have to deal with converting strings by hand, something like the following:
var toDate = str => {
var splitter = str.indexOf("/") === -1 ? "-" : "/";
var [mon, day, year] = str.split(splitter);
return new Date(year, mon - 1, day);
};
var toDateString = date => {
return "" + date.getFullYear() + (date.getMonth() + 1) +...
};
Note that there's no validation, that's left as an exercise to the reader.
A WORD ABOUT MOMENT.JS
moment.js is awesome. Its also huge, its a kitchen-sink API with a heft to match. You're already loading angular, so think carefully before bulking the size of your payload with another huge library.
Moment.js is a powerful date formatting and manipulation library. A lot of things you can do in Moment.js are a single line of code, which makes life a lot easier. I agree, without using a library like this date formatting and handling can be a pain.
http://momentjs.com/
EDIT: fyi, I use this with my Angular app and find it extremely useful!
Let's say I have a field that contains, say, a gestation period in terms of a number of days:
var gestation = 132; // days
Now, let's say, using Moment.js I want to return a value that figures out a semantic expression for that gestation period, depending upon its length. In other words, if the gestation period, is say, 10 days, I want the method to return a value of about a week or 10 days or something similar. If the gestation period is 365 days, I want the method to return a value of a year and so on.
How does one write the Moment.js expression to accomplish this?
This seems similar to the Time to X approach described here in the docs. But not exactly.
One possible solution is to use subtract() combined with to() like in this jsfiddle
Use the humanize() method.
moment.duration(gestation, 'days').humanize();
Found in the documentation here.
I have the following line of javascript using MomentJS
var date = moment('20/04/20000', 'DD/MM/YYYY'); //notice year twenty thousand
alert(date.format()); // alerts "2000-04-20T00:00:00+01:00"
If I change the format to DD/MM/YYYYY it works as expected, except of course if I enter a 6 digit year. I know this is arbitrary, but it bothers me. How do I use a format that will expect any amount of digits in the year?
It looks like moment ignores any extra format specfiers. So you can just use as many Y's as you expect you'll need for your max date. For example this code tells moment to expect 10 digit years:
moment('20/04/20000', 'DD/MM/YYYYYYYYYY').format();
but it's return value looks like what you're expecting, 5 digit year:
"20000-04-20T00:00:00-04:00"
This is not a documented feature, and I'd be very careful about this code as you use future moment updates. Protect this code with unit tests for sure.
I have one text box. When I enter a date with the format MM/DD/YYYY in that textbox and click outside the textbox I need to display the result as MM/DD/YYYY+3 using JavaScript.
For example, if my date is 12/31/2013 then the result would be 01/03/2014.
Hope this link will help you to find the answer:
adding-number-of-days-to-an-entered-date-in-javascript.
Have a look at the excellent library moment.js with which you easily can add three days to your original date.
In your case it would be something like:
var input = moment(myTextBoxValue);
input.add('d', 3); // input is now 3 days later
I guess the easiest to program and best readable solution would be to use a dedicated library for handling dates, such as Moment.js.
There, you have got the add function which allows you to add an arbitrary amount of time to a given point in time. E.g.:
moment().add('days', 7);
If you use the moment function to parse the time entered, use that as your source value, call add on it, and return it as JavaScript Date using the toDate function, you get exactly what you want.
So basically it comes down to:
var sourceDate = moment(new Date(2013, 7, 8)),
targetDate = sourceDate.add('days', 3),
result = targetDate.toDate();
Then, result contains the Date object you wanted to have.
I'd prefer that over native JavaScript handling of Date, as it is way more readble and hence understandable.
I found a very useful regular expression for testing format and content of a date field in a regex example site
BUT I get a validation when I put in dates older than 2000 and since this is a field for inputting date of birth you can see why it would be a problem. I am sure it is an easy fix but regular expressions intimidate me.
$('#txtDOB').blur(function() {
//$('span.error-keyup-5').remove();
var inputVal = $(this).val();
var dateReg = /^[0,1]?\d{1}\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d{3}))$/;
if(!dateReg.test(inputVal)) {
alert('invalid date format: ' + inputVal);
}
I am not married to this solution so if you can suggest a better way please comment away.
Instead of testing if a string matches one or more formats that you think might be good dates, I would suggest instead asking JavaScript if it thinks it is a valid date:
function isValidDate(str){
return !isNaN(new Date(str));
}
This assumes that you're going to accept what the user gives you in any of a variety of formats (e.g. the horrid US MM/DD/YYYY or the more sane ISO8601 YYYY-MM-DD). If instead you have a specific format you will only accept, then parse your string based on that, pull out the year/month/date, and then ask JavaScript if this is a valid date:
function isValidDate(year, month, date) {
var d = new Date(year*=1, month-=1, date*=1, 12); // noon to skip DST issues
return d.getFullYear()==year && d.getMonth()==month; // wrong date->wrong month
}
You need to check that the year/month/date all match because new Date(2011,11,32) is accepted and interpreted as 2012-1-1.
See also: Javascript method to ensure that a date is valid
There's a whole lot of mess there. First, eliminate all the {1}'s. That just means one instance, which is totally redundant. Also, a character class with one value is the same as the character itself. So, [1] becomes 1.
So, that leaves us with:
/^[01]?\d\/(([0-2]?\d)|([3][01]))\/((199\d)|([2-9]\d{3}))$/
This is MM/DD/YYYY presumably. but the YYYY is just 199[0-9] and any year > 2000 and < 9999. Wow, that's a date range!
As a basic, try:
/^[01]?\d\/(([0-2]?\d)|([3][01]))\/([12]\d{3}))$/
This gives a year range of 1000 - 2999. But as Tim said above, if you want really valid dates, you should use a specific date validator.
If you need to parse date strings into dates then I would check out this library:
DateJS