Datepicker giving different result in IE and Chrome

Question

I have two Datepickers and based on the date selection of first datepicker, the second datepicker should show allow user to choose a date within 1 year of the date selected in the first datepicker. The code I am using is working perfectly for Chrome but it is giving different result in IE11. When I use the alert method to view the date, in Chrome I get the result "Wed Oct 10 2018 00:00:00 GMT+0530 (India Standard Time)" whereas in IE the result is "Wed Oct 10 1918 00:00:00 GMT+0530 (India Standard Time)"

$('.datepicker1').datepicker({
    dateFormat: "mm/dd/y",
    changeMonth: true,
    changeYear: true,
    yearRange: "-10:+10",
    showOn: "both",
    buttonText: "<i class='fa fa-calendar'></i>",
    onSelect: function (date) {


        var selectedDate = new Date(date);
        alert(selectedDate)
        var date = new Date(Date.parse(selectedDate));

        date.setFullYear(date.getFullYear() + 1);

        var newDate = date.toDateString();

        newDate = new Date(Date.parse(newDate));

        $(".datepicker2").datepicker("option", "maxDate", newDate);



    }
});

$('.datepicker2').datepicker({
    dateFormat: "mm/dd/y",
    changeMonth: true,
    changeYear: true,
    showOn: "both",
    buttonText: "<i class='fa fa-calendar'></i>"
});

Below is the Razor syntax used

@Html.EditorFor(m => m.date1, new { htmlAttributes = new { @class = "datepicker1 form-control", placeholder = "00/00/00", @readonly = "readonly" } })

@Html.EditorFor(m => m.date2, new { htmlAttributes = new { @class = "datepicker2 form-control", placeholder = "00/00/00", @readonly = "readonly" } })

Can anyone help me figure out where I went wrong? Seems like Date.Parse might not be working as expected in IE, do we have a workaround? Thanks in advance

What is the value of *date* in `new Date(date)`? Your problem is most likely the year: `dateFormat: "mm/dd/y"` should probably be `dateFormat: "mm/dd/yyyy"`. Two digit years are treated as 20th century (i.e. "18" is "1918" not "2018"). — RobG, Oct 16 '18 at 06:21
PS. Using the built-in parser for non–standard strings is strongly recommended against. Manually parse strings with a small function or use a library, see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) — RobG, Oct 16 '18 at 06:24
@RobG my requirement is to show the date in mm/dd/y format i.e 10/16/18 as per current date. I won't be facing the issue mentioned in the question if I used mm/dd/yy. As of now I will be trying to parse it manually and will update. — subhrendu, Oct 16 '18 at 06:31
Cool, seems UI presentation is getting in the way of parsing and processing. A parser is 2 lines of code: split then give the bits to the Date constructor, e.g. `let b = s.split(/\D/); return new Date('20' + b[2], b[0]-1, b[1])` assuming all years are 21st century and *s* is a string like "09/14/09" for 14-Sep-2009. — RobG, Oct 16 '18 at 06:56
@RobG big help. Since I won't be dealing with past dates, this solution suits me. — subhrendu, Oct 16 '18 at 07:17

score 0 · Answer 1 · answered Oct 16 '18 at 07:27

The 2-digit date conversion which resulting in 20th century year problem with Date.parse() (and Date constructor) is a known behavior in IE (and Edge, see this issue) as provided below:

Firefox 49 changed the parsing of 2-digit years to be aligned with the Google Chrome browser instead of Internet Explorer. Now, 2-digit years that are less than 50 are parsed as 21st century years.

As for workaround in IE 11 and Edge, you can avoid Date constructor for parsing date string by using momentjs with specified 2-digit year format conversion to 4-digit year as provided below:

var date = new Date(moment(selectedDate, "M/D/YY").format("M/D/YYYY"));

newDate = new Date(moment(newDate, "M/D/YY").format("M/D/YYYY"));

Note that you can still create your own parser for 2-to-4 digit year conversion, but it may takes more time to split date components and rejoining them into Date constructor.

Related issue:

Converting (formatting) 2-digit date to a 4-digit date

score 0 · Accepted Answer · answered Oct 16 '18 at 07:37

Rob actually helped me reach the solution, since he posted the answer in comments, I am mentioning it as separate answer. My requirement was to show the date as mm/dd/yy format but 2 digits years are treated as 20th Century in IE, that's why I was getting 1918 in IE for date 10/16/18. So I wrote a small parser method as advised by Rob.

function parseDate(input) {
    var parts = input.split('/');
    // new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]])
    return new Date('20' + parts[2], parts[0] - 1, parts[1]);
}

Use the method in the onSelect event of the first datepicker

onSelect: function (date) {

        var parsedDate = parseDate(date);

        var date = new Date(Date.parse(parsedDate));

        date.setFullYear(date.getFullYear() + 1);

        var newDate = date.toDateString();

        newDate = new Date(Date.parse(newDate));

        $(".datepicker2").datepicker("option", "maxDate", newDate);


    }

Since I am only dealing with present dates, I won't have to worry about dates belonging to 1900's.

Treating 2 digit years as 20c is per [*ECMA-262 §20.3.2.1 4.h*](http://ecma-international.org/ecma-262/9.0/#sec-date-year-month-date-hours-minutes-seconds-ms): `If y is not NaN and 0 ≤ ToInteger(y) ≤ 99, let yr be 1900+ToInteger(y);`. ;-) — RobG, Oct 16 '18 at 09:15

Datepicker giving different result in IE and Chrome

2 Answers2