Currently, I am attempting to retrieve the value of a two-digit month and a two-digit year from an input type called "month."
ISSUE
The format seems correct, but the incorrect date is being returned.
SOURCE 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 LINK:
http://codepen.io/zuhloobie/pen/ggWdLj
Many thanks in advance :)
UPDATE
Here's what I'm observing on Google Chrome: Version 55.0.2883.87 m (64 bit):
https://i.sstatic.net/RmfcF.jpg