CODEWITHSUNDEEP
javascriptjqueryjquery-uidatedatepicker
Wasim Shaikh
Wasim Shaikh

Reputation: 7030

jQuery UI datepicker range selector issue

Created date picker with range selector with help from this answer When we select date from "1st May" and to "1st Aug", user not able to change "from" date previous than 1st May. Is there any solution in this case that instead of not allowing user browse the date than min date. User should be allowed to go prev. date but with alert or notification that they have selected wrong date range.

Code snippet : credit 

$(function() {
    $("#from-datepicker").datepicker({
        dateFormat: "dd-M-yy",
        maxDate: "-1d",
        onClose: function (selectedDate) {             
            // Set 'TO' minDate
            $("#to-datepicker").datepicker("option", "minDate", selectedDate);             

            // Set 'TO' maxDate at 3 months if before yesterday
            var dt = new Date($(this).datepicker("getDate"));
            dt.setMonth(dt.getMonth() + 3);
            if(dt < Date.now()) {
                $("#to-datepicker").datepicker("option", "maxDate", dt);
            }
        }
    });
    $("#to-datepicker").datepicker({
        dateFormat: "dd-M-yy",
        maxDate: "-1d",
        onClose: function (selectedDate) {
            // Set 'FROM' maxDate
            $("#from-datepicker").datepicker("option", "maxDate", selectedDate);

            // Set 'FROM' minDate at 3 months if before yesterday
            var dt = new Date($(this).datepicker("getDate"));
            dt.setMonth(dt.getMonth() - 3);
            if(dt < Date.now()) {
                $("#from-datepicker").datepicker("option", "minDate", dt);
            }
        }
    });
});

http://jsfiddle.net/4Ln0cxpq/

Upvotes: 0

Views: 262

Answers (3)

Adnan Ahmed
Adnan Ahmed

Reputation: 939

Try this in JsFiddle

$(function() {
    $("#from-datepicker").datepicker({
        dateFormat: "dd-M-yy",
        onClose: function (selectedDate) {             
            var dt = new Date($(this).datepicker("getDate"));
            var dtTo = new Date($("#to-datepicker").datepicker("getDate"));

            if($("#to-datepicker").val()!="" && dt > dtTo) {
                $("#from-datepicker").val("");
                alert("selected date greater than 'To' date");
            }
        }
    });
    $("#to-datepicker").datepicker({
        dateFormat: "dd-M-yy",
        onClose: function (selectedDate) {
            var dt = new Date($(this).datepicker("getDate"));
            var dtFrom = new Date($("#from-datepicker").datepicker("getDate"));

            if($("#from-datepicker").val()!="" && dt<dtFrom){
                $("#to-datepicker").val("");
                alert("selected date less than 'From' date");
            }
        }
    });
});

Upvotes: 1

Sasa
Sasa

Reputation: 1190

you can remove this: 

// Set 'TO' minDate
            $("#to-datepicker").datepicker("option", "minDate", selectedDate);

and this:

 // Set 'FROM' maxDate
            $("#from-datepicker").datepicker("option", "maxDate", selectedDate);

Then add your check if FROM is greater than TO, if True, show your custom notification

DEMO

Upvotes: 0

ibrahimyilmaz
ibrahimyilmaz

Reputation: 2335

Your code set -3,+3 month from selected one.

Try this fiddle: JSFiddle

Upvotes: 0

Related Questions