CODEWITHSUNDEEP
jqueryasp.netjquery-uic#-4.0jquery-ui-datepicker
DawoodKhanana
DawoodKhanana

Reputation: 11

jquery date range: input text box value is changed to null if date is not selected

I have enabled jquery date range picker on two input boxes to select start date & end date, by default value of startDateInput=Start Date and endDateInput=End Date. But when start input box is clicked and start date is selected, value written in endDateInput which is equal to End Date is changed to null. Script which i am using is below:

startDate(Name of input box for selecting Start Date) endDate(Name of input box for selecting End Date)

$(function () {
    $("#startDate").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        minDate: new Date(2012, 11 - 1, 27),
        maxDate: -1,
        onClose: function (selectedDate) {
            $("#endDate").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#endDate").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        minDate: new Date(2012, 11 - 1, 28),
        maxDate: -1,
        onClose: function (selectedDate) {
            $("#startDate").datepicker("option", "maxDate", selectedDate);
        }
    });
});

Upvotes: 0

Views: 1531

Answers (3)

Waqas Mehmood
Waqas Mehmood

Reputation: 26

The way date is set is not correct.

Replace:

$("#endDate").datepicker("option", "minDate", selectedDate);

With:

 $("#endDate").datepicker("setDate", selectedDate);

and also replace:

$("#startDate").datepicker("option", "maxDate", selectedDate);

with: 

$("#startDate").datepicker("setDate", selectedDate);

I hope it will help.

Upvotes: 0

Waqas Mehmood
Waqas Mehmood

Reputation: 26

If you were talking about water marks, then you can try this:

$(function () {
        $("#startDate").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            minDate: new Date(2012, 11 - 1, 27),
            maxDate: -1,
            onClose: function (selectedDate) {
                if ($("#endDate").val() != 'End Date') {
                    $("#endDate").datepicker("setDate", selectedDate);
                }
            }
        });
        $("#endDate").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            minDate: new Date(2012, 11 - 1, 28),
            maxDate: -1,
            onClose: function (selectedDate) {
                if ($("startDate").val() != 'Start Date') {
                    $("#startDate").datepicker("setDate", selectedDate);
                }
            }
        });
    });

Upvotes: 1

viki
viki

Reputation: 1178

Convert the selectedDate into Date object before assigning to datepicker in the onClose function.

Modify your code as below.

$(function () {
    $("#startDate").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        minDate: new Date(2012, 11 - 1, 27),
        maxDate: -1,
        onClose: function (selectedDate) {
            $("#endDate").datepicker("option", "minDate",new Date(selectedDate));
        }
    });
    $("#endDate").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        minDate: new Date(2012, 11 - 1, 28),
        maxDate: -1,
        onClose: function (selectedDate) {
            $("#startDate").datepicker("option", "maxDate", new Date(selectedDate));
        }
    });
});

Refer : Check for Demo

Upvotes: 2

Related Questions