Question

I am trying to create date functionality using jquery on start date and end date controls. i want to select start date and when coming to end date before the start date , the previous date will come as disable my code is below.

$( "#" + TxtStrtDate,"#" + TxtExpDte" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onSelect: function( selectedDate ) {
        var option = this.id == "abc" ? "minDate" : "maxDate",

        instance = $( this ).data( "datepicker" ),
        date = $.datepicker.parseDate(
            instance.settings.dateFormat ||
        $.datepicker._defaults.dateFormat,
        selectedDate, instance.settings );

        dates.not( this ).datepicker( "option", option, date );
    }
});

what is the mistake in my code please suggest.

Answer 1

Since you mentioned that these were server controls, I assume you are using ASP.NET. If this is the case and you are using MasterPages, MasterPages mangle the id of the control so you have to do the following:

$('#<%= TxtStrtDate.ClientID %>, #<%= TxtExpDte.ClientID %>').datepicker({
...
});

Otherwise, you have an extra ” in your selector and your ids need to be within the quotes unless they are actually javascript variables:

$( "#" + TxtStrtDate,"#" + TxtExpDte" )

should be changed to:

$("#TxtStrtDate, #TxtExpDte")
// or if they are javascript variables
$("#" + TxtStrtDate + ", #" + TxtExpDte)

Edit:

Per your comment, it seems that you want to use the date range version of the jquery datepicker. For that you will have to do the following:

$( "#TxtStrtDate" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onSelect: function( selectedDate ) {
        $( "#TxtExpDte" ).datepicker( "option", "minDate", selectedDate );
    }
});
$( "#TxtExpDte" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onSelect: function( selectedDate ) {
        $( "#TxtStrtDate" ).datepicker( "option", "maxDate", selectedDate );
    }
});

Checkout the date range demo on the jquery ui site for more information.