Question

My question is. Why this bug only happen when I choose CheckIn_Date in August and September?

I have a project using ASP.NET MVC 3 and using jQuery for date picker. Lets say that I have 3 textboxes named CheckIn_Date, CheckOut_Date (this two using datepicker) and Days in my view.

When i set Days = 3 then I choose CheckIn_Date = 2012-01-01, my CheckOut_Date will automatically count the days and set the value to 2012-01-03.

All goes as I expect, until I choose 2012-08-01 in my CheckIn_Date and set the Days = 3. My CheckOut_Date value is not 2012-08-04 but 2012-12-04. This only happens when I choose my CheckIn_Date in August and September. Choosing any other month give me what I expect for my CheckOut_Date.

Here is my code:

$("input[data-datepicker='true']").change(function () {
    var id = $(this).attr("name");
    var days = parseInt($("#maxProgramDays").val());
    //var o = new Date();
    var val = $(this).val();
    var s = val.split("-");
    var x = [];
    var thisDate = new Date();
    thisDate.setFullYear(parseInt(s[0]), parseInt(s[1]) - 1, parseInt(s[2]));

    //alert(thisDate.toDateString())
    if (id == "Reservation[0].CheckIn_Date") {
        thisDate.setDate(thisDate.getDate() + days);

        x['year'] = thisDate.getFullYear();
        x['month'] = m2d(thisDate.getMonth() + 1);
        x['day'] = m2d(thisDate.getDate());

        $("input[name='Reservation[0].CheckOut_Date']").val(x['year'] + '-' + x['month'] + '-' + x['day']);

        //alert(thisDate.toDateString())
    }

    if (id == "Reservation[0].CheckOut_Date") {
        thisDate.setDate(thisDate.getDate() - days);

        x['year'] = thisDate.getFullYear();
        x['month'] = m2d(thisDate.getMonth() + 1);
        x['day'] = m2d(thisDate.getDate());

        $("input[name='Reservation[0].CheckIn_Date']").val(x['year'] + '-' + x['month'] + '-' + x['day']);

        //alert(thisDate.toDateString())
    }

Here is my View:

<div class="display-label">Program Days</div>
<div class="display-field"><span id="pDays"></span></div>

<div class="editor-label">@Html.LabelFor(model => model.Reservation[0].CheckIn_Date)</div>
<div class="editor-field reserveDate">
    @Html.Datepicker("Reservation[0].CheckIn_Date", "")
    @Html.ValidationMessageFor(model => model.Reservation[0].CheckIn_Date)
</div>

<div class="editor-label">@Html.LabelFor(model => model.Reservation[0].CheckOut_Date)</div>
<div class="editor-field reserveDate">
    @Html.Datepicker("Reservation[0].CheckOut_Date", "")
    @Html.ValidationMessageFor(model => model.Reservation[0].CheckOut_Date)
</div>

Answer 1

The problem was out of this world. Here it goes when you give date as 2010-08-01, in your thisDate.setFullYear(parseInt(s[0]), parseInt(s[1]) - 1, parseInt(s[2])); function, parseInt(s[1]) at runtime look likes parseInt("08"), and here it goes wrong

parseInt(“08”) returns Zero, it is same for parseInt(“09”)

Reason

Both parseInt(’08’) and parseInt(’09’) return zero because the function tries to determine the correct base for the numerical system used. In Javascript numbers starting with zero are considered octal and there’s no 08 or 09 in octal, hence the problem.

How to fix it

To fix this just add the second parameter for parseInt, the base to be used for the conversion. The correct calls should be parseInt(“08”, 10) and parseInt(“09”, 10).

So your code will become

thisDate.setFullYear(parseInt(s[0], 10), parseInt(s[1], 10) - 1, parseInt(s[2], 10));

This will work for you.