6

I'm having trouble properly formatting 2-digit dates as 4-digit dates.

I have a text input field: 

<input type="text" value="" class="date"/>

And then I want to format it in the "mm/dd/yyyy" format after the user enters a date. So I have an onChange event: 

$('.date').on('change',function(){
    var date = new Date($(this).val());
    $(this).val((date.getMonth()+1)+'/'+date.getDate()+'/'+date.getFullYear());
});

Okay, so now comes the oddities (I'll be using 12/12/12 as an example date):

1) getFullYear() returns 1912 in all IE, FF. Chrome returns 2012.

2) getYear() returns 112 in IE, Chrome. FF returns 12.

So it seems like the only option at this point is to sniff the user agent, and use that accordingly. Is there anyway around sniffing the UA?

Joel Kinzel
  • 969
  • 2
  • 7
  • 19
  • You might want to look at this post http://stackoverflow.com/questions/2997785/jquery-plugin-to-perform-date-manipulations - JavaScript isn't great for dates. – Brian Hoover Jan 31 '13 at 16:34
  • 2
    If I type in something like '04/19/10' in the Date field, how do you know whether I'm talking about 1910 or 2010? – kinsho Jan 31 '13 at 16:35
  • 3
    Your input should require full year. – Francis P Jan 31 '13 at 16:36
  • @BrianHoover Yeah, among other things, but I the client wants JS validation/correction on the date :-S – Joel Kinzel Jan 31 '13 at 18:26
  • @kinsho for this application we are assuming it is 20XX because the data we are collecting should have only happened in 20XX. – Joel Kinzel Jan 31 '13 at 18:27
  • @FrancisP Technically it does, I'm trying to automatically fix that with JavaScript prior to submitting the form. It does fail server-side, but the client wants it to auto-correct the date. – Joel Kinzel Jan 31 '13 at 18:28
  • @jkinz, We might not be there in 2112, but it should be considered... – Francis P Jan 31 '13 at 19:03

4 Answers4

3

Using moment.js:

const moment = require("moment")
const date = moment("21", "YY")
const year = date.format("YYYY")
blaze
  • 2,588
  • 3
  • 32
  • 47
1

you can try,first, to seperate the parts of the input

...
var input=$(this).val();
var month=input.substr(0,2)-1;
var day=input.substr(3,2);
var year=parseInt("20"+ input.substr(6,2));

and then initate a new Date object:

var date= new Date(year,month,day);

or write it back to the field, as you did:

$(this).val((date.getMonth()+1)+'/'+date.getDate()+'/'+date.getFullYear());
yoav barnea
  • 5,836
  • 2
  • 22
  • 27
  • 2
    Interesting, but one test that would fail is if I enter "1992" as a year. In your code, it would return "2092" which would be incorrect, so you'd have to test the length of the year provided first. – Joel Kinzel Jan 31 '13 at 18:30
  • there is no argue about that, and there are a lot of other test you should check, like are there any letter/spaces, is this date is valid( 34/70/09 is not valid) , etc... – yoav barnea Feb 01 '13 at 07:10
  • generally, I would recommend that you'll implement somthing else, like the jquery-ui datepicker(or other plug-in) instead of reinvent the wheel. I tried to be focus on your question. my asumption was that when you force a year to be 2 digits, it has to be above year 1999. – yoav barnea Feb 01 '13 at 07:18
  • @yoav_barnea I actually have a datepicker on the input, but the client wants the ability to manually enter the date as well, and yeah... – Joel Kinzel Feb 01 '13 at 16:38
0

After asking around, I ended up using Moment.js. I tried date.js but because I'm partially working with unix timestamps, moment seemed to handle these better (IMO).

Joel Kinzel
  • 969
  • 2
  • 7
  • 19
0

const [day, month, year] = values.date.split('/');

yahyaoui hamdi
  • 1