jQuery日期选择器选择的日期格式

Question

In my date script mentioned below when I select a month and year format it will show all the dates in that month. It's working fine but I want to dispaly the output like 2017-09-08 but it outputs like this 2017-9-8

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
    <div id="datecontent">
    </div>

<script type="text/javascript">
var weekday = new Array(7);
        weekday[0] = "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        minDate: 0,
        onClose: function(dateText, inst) { 
            $d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            html='';
            for(i=1;i<=$d;i++){
                console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
                d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
                console.log(d);
                n = weekday[d.getDay()];
                html += '<div class="datediv">div-'+i+'<br>'+n+'</div>';
            }
            $('#datecontent').html(html);
        }
    });
</script>

My Output

Console.log

2017-9-1
Fri Sep 01 2017 00:00:00 GMT+0530 (IST)
2017-9-2
Sat Sep 02 2017 00:00:00 GMT+0530 (IST)
2017-9-3
Sun Sep 03 2017 00:00:00 GMT+0530 (IST)
2017-9-4
Mon Sep 04 2017 00:00:00 GMT+0530 (IST)
2017-9-5
Tue Sep 05 2017 00:00:00 GMT+0530 (IST)
2017-9-6
Wed Sep 06 2017 00:00:00 GMT+0530 (IST)
2017-9-7
Thu Sep 07 2017 00:00:00 GMT+0530 (IST)
2017-9-8
Fri Sep 08 2017 00:00:00 GMT+0530 (IST)
2017-9-9
Sat Sep 09 2017 00:00:00 GMT+0530 (IST)
2017-9-10
Sun Sep 10 2017 00:00:00 GMT+0530 (IST)

How can I achieve this?

Answer 1

Before I answer your question, I would like to mention that time and date handling is a lot deeper than it may first appear, and that generally it's bad practice to reinvent the wheel . Consider using the excellent moment.js to parse, process and display your dates.

With that out of the way, let's zero-pad those dates.

You're using parseInt which parses a string into an integer. However, 01, 02, 03 etc are not valid integers - you will need to output strings.

One way to do this is:

function zeroPad(number)
{
    return ('0' + String(number)).slice(-2);
}

Which you can then call like:

console.log(inst.selectedYear+'-'+zeroPad(parseInt(inst.selectedMonth)+1)+'-'+zeroPad(i));

Note that the String() call isn't necessary (JavaScript will implicitly typecast number to a string), but I prefer to be explicit with these things.