Jquery datepicker Date format Issue

Question

I have a date of birth and need to auto calculate retirement date. It works fine as long as I do not change the dateFormat.

I have been trying to change the dateformat to 'dd/mm/yy' and while calculating the retirement date, I get NaN/NaN/NaN as output for the dates selected above 13 and It works if dates selected is less than 13.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Retirement Date</title>
  <link href="jquery-ui.css" rel="stylesheet">
</head>
<body>

<p>DOB: <input type="text" id="dob"></p>
<p>DORetirement: <input type="text" id="doret"></p> 

<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
 <script>
  $( function() {    
    $('#dob').datepicker({
        onSelect: function(value) {
            var retirementDate = new Date(value);
            var lastDay = new Date(retirementDate.getFullYear()+58, retirementDate.getMonth() + 1, 0);
            var lastDayWithSlashes = (lastDay.getMonth() + 1) + '/' + (lastDay.getDate()) + '/' + lastDay.getFullYear();    
            $('#doret').val(lastDayWithSlashes);
        },
        yearRange: "-100:+0", // last hundred years
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true
    });

  } );
  </script>

</body>
</html>

demo

The issue is because the Date object constructor will only work when provided with a date string in YYYY-MM-DD or MM-DD-YYYY format. To solve your issue you'll need to store two dates - one to do the calculation in one of the above formats, and another one to show in the UI in the DD-MM-YYYY format — Rory McCrossan
– Rory McCrossan, Commented Apr 18, 2017 at 7:54

Ajith · Accepted Answer · 2017-04-18 09:55:22Z

Eventhough you set the date format dd/mm/yy while initialising the datepicker, the date received on selection is in the format mm/dd/yyyy. This is why you were getting the output NaN/NaN/NaN for date above 12 is selected. The day and the month content in the date got upon selection from the date picker got interchanged.

Please change the script as given below :

$('#dob').datepicker({
    onSelect: function(value) {
        var retirementDate = new Date(value);
        var dob = retirementDate.getDate() +'/' + (retirementDate.getMonth() + 1) +'/' + retirementDate.getFullYear() ;
        $('#dob').val(dob);

        var lastDay = new Date(retirementDate.getFullYear()+58, retirementDate.getMonth() + 1, retirementDate.getDate() );

         var lastDayWithSlashes = ( lastDay.getDate() + '/' + ( lastDay.getMonth() + 1) ) + '/' + lastDay.getFullYear();    

        $('#doret').val(lastDayWithSlashes);
    },
    yearRange: "-100:+0", // last hundred years
    dateFormat: 'yy/mm/dd',
    changeMonth: true,
    changeYear: true
});

Working code snippet : https://jsfiddle.net/pqygjLe8/

Collectives™ on Stack Overflow

Jquery datepicker Date format Issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related