HTML Date : Get Correct date in yyyy - mm - dd

Question

I am using HTML date function and javascript to get exact date in YYYY-mm-dd. its working fine for me except for 1st day of the month. Ex: 1st Feb 2016 is converted to 2016-01-32

function mydate1(cachedDate) {
  var today = new Date();
  console.log(today);
  if (cachedDate === undefined) {
    console.log("no cached value found");
    var d = new Date(document.getElementById("dt").value);
    sessionStorage.setItem('dateCached', document.getElementById("dt").value);
    console.log(d);
    //sessionStorage.setItem('dropdownCached',document.getElementById("s1").value);
    console.log("set session value :" + sessionStorage.getItem('dateCached'));
  } else {
    var d = new Date(cachedDate);
    console.log(document.getElementById("dt").value);
    sessionStorage.setItem('dateCached', d);
    console.log("set session value :" + sessionStorage.getItem('dateCached'));
  }
  if (today < d) {
    alert("No Record Found ..... ");
    return;
  }

  dt = d.getDate();
  dt++
  dt = ('0' + dt).slice(-2);
  mn = d.getMonth();
  mn++;
  mn = ('0' + mn).slice(-2);
  yy = d.getFullYear();
  var x = yy + "-" + mn + "-" + dt;
  document.getElementById("ndt").value = dt;
  ajaxFunction('dt');
  console.log(x);
}

<input type="date" class="form-control" id="dt" onchange="mydate1();" />
<input type="text" id="ndt"/>

I tried couple of solutions from google but nothing is working for me .. can some one help me fixing the script.

What is the result of `var d = new Date(cachedDate);` and similar? I'll bet you're parsing a string which is resulting in an unexpected value, so `dt++` results in 32 not 2. What are the values of `document.getElementById("dt").value` and `cachedDate`? — RobG, Feb 02 '16 at 20:56
document.getElementById("dt").value = 2016-01-32 (for 1st Feb ) cachedDate : 2016-02-01 — coolDude, Feb 02 '16 at 21:49
**Don't use the Date constructor to parse strings**. "2016-02-01" will be parsed as UTC (or NaN in older browsers), so if the system offset is west of UTC it will result in *getDate* returning the day before (i.e. 31 Jan), so when you add 1 you get 32 Jan. Manually parsing "2016-02-01" either as local or UTC is 2 lines of code. `new Date('2016-01-32')` **must** produce an invalid date in nearly all browsers. — RobG, Feb 02 '16 at 22:51

score 1 · Answer 1 · edited May 23 '17 at 10:28

First, you shouldn't need to increment the value returned by getDate(), because

the value returned by getDate() is an integer between 1 and 31.

This is in contrast to getMonth(), where

The value returned by getMonth() is an integer between 0 and 11.

Second, you might try specifying the time zone when you construct the new Date object:

var d = new Date(document.getElementById("dt").value + "(GMT)");

The Date.parse() method is implementation-dependent, so it's possible to encounter inconsistencies when parsing a date string. In my browser (Chrome 47), I see different Date objects if the string to parse includes a space at the end:

d = new Date("2016-02-01")
Sun Jan 31 2016 17:00:00 GMT-0700 (Mountain Standard Time)
d = new Date("2016-02-01 ")
Mon Feb 01 2016 00:00:00 GMT-0700 (Mountain Standard Time)

score 0 · Answer 2 · answered Feb 02 '16 at 22:11

Although i was not able to find the exact bug in my above code .... but i managed to partially solve the problem (Need to add code to validate month > 12 and change year if required )

dt = d.getDate();
dt++
dt = ('0' + dt).slice(-2);
mn = d.getMonth();
mn++;
mn = ('0' + mn).slice(-2);
yy = d.getFullYear();
var x = yy + "-" + mn + "-" + dt;
var y = new Date(yy, mn, 0);
dd = y.getDate();
if (dd < dt) {
  console.log("in test.....");
  mn++;
  mn = ('0' + mn).slice(-2);
  var x = yy + "-" + mn + "-" + '01';
  console.log("test" + x);
}

That looks like a very ugly cludge. I can't replicate your issue, likely because my timezone is east. If you can reduce your problem to the actual issue (remove "ajaxFunction", HTML date input, cache, etc. and use hard coded values) and post a minimal example, perhaps a real answer will emerge. — RobG, Feb 02 '16 at 23:38

HTML Date : Get Correct date in yyyy - mm - dd

2 Answers2