Getting Wrong Value of Input Type "Month"

Question

I'm trying to get the value of the input type "month" - 2 digit month and 2 digit year.

PROBLEM
Format correct, but returns wrong date.

CODE

$("#cardExpireDate").change(function() {
 var expireDate = new Date ( $(this).val() );
  //var expireDay = expireDate.getDate();
  var expireMonth = expireDate.getMonth() + 1;
  var expireYear = parseInt(expireDate.getFullYear().toString().substr(2,2), 10);
 var expireDateMMYY = ([expireMonth, expireYear]).join('/');
  //alert([expireMonth, expireYear].join('/'));
 $("#summaryCardExpireDate").val( expireDateMMYY );
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
.container {width:400px; margin:0 auto;}
label {float:left; margin:10px 0; vertical-align:middle; line-height:30px;}
input {width:200px; height:30px; margin:10px; 0; vertical-align:middle; font-family:"Open Sans", sans-serif; font-size:15px; border:0; outline:0;}
#cardExpireDate {border:1px solid #999;}
#summaryCardExpireDate {border:0; border-bottom:1px solid #999;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="formField">
    <input type="month" id="cardExpireDate" name="card_expire_date" placeholder="Expiration..." title="Card Expire Date" required="">
    <label class="" for="cardExpireDate">Expiration Date:
    </label>
    <input type="text" id="summaryCardExpireDate">
    <label class="" for="summaryCardExpireDate">Returned Value:
    </label>
  </div>
</div>

CODEPEN
http://codepen.io/zuhloobie/pen/ggWdLj

Thanks in advance :)

UPDATE
This is what I see on Google Chrome: Version 55.0.2883.87 m (64 bit):

Me too, the mm/yy format looks fine, and the months match up to the numbers from what I could see. — Reisclef, Jan 22 '17 at 21:56
I am reading this page using Google Chrome Version 55.0.2883.87 m (64-bit) and when choosing January 2017 it returns `1/17` in the second input field. @chris — SaidbakR, Jan 22 '17 at 22:00
I'm using Goggle Chrome: Version 55.0.2883.87 m on 64 bit as well - but when I choose Jan 2017, it returns 12/16. I'm horribly confused now. — chris, Jan 22 '17 at 22:01
If you run `var rn = new Date(); rn.toUTCString()` in your browser console what is returned? — Brett DeWoody, Jan 22 '17 at 22:11
For me, the value returned from the new Date() in Chrome is wrong in my browser console log. However, it is correct in the codepen console log running on the stack overflow site. — Brendan Long, Jan 22 '17 at 22:14
In that case, I think the local settings of your OS may take a rule in this issue! In my case it is Windows 10 with regional seetings English US — SaidbakR, Jan 22 '17 at 22:15

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

1

Debugging date object shows that date is Sun Jan 01 2017 03:00:00 GMT+0300 (RTZ 2 (зима)). It is right the start of a month. Take a look at your localization, you must have not a UTC time. I would fix the issue just by adding 1 day to a date.

var expireDate = new Date ( $(this).val() );
expireDate.setDate(expireDate.getDate() + 1);

Looks like you are in western hemisphere of Earth. This will probably make it clear, why creating Date object is so sensible: Javascript date object always one day off?

edited May 23 '17 at 10:29

Community

1
1

answered Jan 22 '17 at 22:14

shukshin.ivan

11,075
4
53
69

I didn't downvote, but this worked. Curious why someone downvoted it? – chris Jan 22 '17 at 22:46

score 1 · Answer 2 · answered Jan 22 '17 at 22:24

1

If you went to have month value in two digits you have to change var expireMonth:

from : var expireMonth = expireDate.getMonth() + 1;

to : var expireMonth=('0'+(expireDate.getMonth()+1)).slice(-2);

It works fine :)

answered Jan 22 '17 at 22:24

Khlifi Hatem

31
8

Don't add multiple answers please. If your first one is wrong, then edit it or delete it. – DavidG Jan 22 '17 at 22:26

Getting Wrong Value of Input Type "Month"

2 Answers2