CODEWITHSUNDEEP
jquerydatetimejquery-uijquery-plugins
Nitz
Nitz

Reputation: 1726

Nothing happen on setting minDate in jquery datepicker?

I written like this..

<script>


$(function() {
                   $('#from').datepicker({
                            defaultDate: "+5d",
                            changeMonth: true,
                            numberOfMonths:1 ,
                            minDate:"+0d",
                            dateFormat: 'DD, MM d, yy',
                            onSelect: function(selectedDate) {
                                    var option = this.id == "from" ? "minDate" : "maxDate";

                                   var instance = $(this).data("datepicker");

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


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

                            }
                    });

});

$(function() {
    $('#to').datepicker({
                            defaultDate: "+5d",
                            changeMonth: true,
                            numberOfMonths:1 ,
                            minDate:"+0d",
                            dateFormat: 'DD, MM d, yy',
                            onSelect: function(selectedDate) {
                                    var option = this.id == "from" ? "minDate" : "maxDate";

                                   var instance = $(this).data("datepicker");

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


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

                            }
                    });
});

function callme(id){
    var temp1 = "#" + id;
    if(temp1 == "#from"){
        $("#to").unbind();
    }
    else{
        var temp = $("#from").val();
        var msecsInADay = 86400000;
        var startDate = new Date(temp);
        var endDate = new Date(startDate.getTime() + msecsInADay);
        var t = endDate.getDate() + '/' + (endDate.getMonth()+1) + '/' + endDate.getFullYear();

        $('#to').datepicker({minDate: new Date(t)});
        $('#to').datepicker().datepicker("show");
    }
}
</script>


</head>

<body>
     <label>date</label><input  id="from" type="text" onclick="callme(this.id)"/>
    <label>return</label><input id="to" type="text" onclick="callme(this.id)" />


Now what I want is....
when I select the first date. [means on "#from"] before today's dates should be disabled in calendar.
now when I select the second date [means on "#to"] in calendar date should start one day plus. then previous date.

But here the min date has not changed.

thanks in advance...

Upvotes: 0

Views: 2978

Answers (1)

Simen Echholt
Simen Echholt

Reputation: 11293

If i understand your question (and code, because the provided code does more than your specification) you want the following behaviour:

  1. When a date, F, in #from is selected, you should only be able to select dates greater than F in #to.
  2. When a date, T, in #to is selected, no dates greater than or equal to T should be selectable in #from

This code will do this:

$(function() {
    $('#from').datepicker({
        defaultDate: '+5d',
        changeMonth: true,
        numberOfMonths:1,
        minDate:'+0d',
        dateFormat: 'DD, MM d, yy',
        onClose: function(dateText, inst) {
            if (dateText !== '') {
                try {
                    var fromDate = $.datepicker.parseDate(inst.settings.dateFormat, dateText, inst.settings);
                    fromDate.setDate(fromDate.getDate() + 1);
                    $('#to').datepicker('option', 'minDate', fromDate);
                }
                catch (err) {
                    console.log(err);
                }
            }
            else {
                //If #from is empty, restore the original limit in #to
                $('#to').datepicker('option', 'minDate', '+0d');
            }
        }

    });

    $('#to').datepicker({
        defaultDate: '+5d',
        changeMonth: true,
        numberOfMonths:1,
        minDate:'+0d',
        dateFormat: 'DD, MM d, yy',
        onClose: function(dateText, inst) {
            if (dateText !== '') {
                try {
                    var toDate = $.datepicker.parseDate(inst.settings.dateFormat, dateText, inst.settings);
                    toDate.setDate(toDate.getDate() - 1);
                    $('#from').datepicker('option', 'maxDate', toDate);
                }
                catch (err) {
                    console.log(err);
                }
            }
            else {
                //If #to is empty, remove the limit in #from
                $('#from').datepicker('option', 'maxDate', null);
            }
        }
    });
});

The two onClose functions are pretty similar and could be generalized into one function, but I think it's easier to understand what's going on this way.

Also, there's no need for the onClick handler in #from or #to any longer.

Upvotes: 1

Related Questions