jQuery UI datepicker range selector issue

Question

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/

Adnan Ahmed · Accepted Answer · 2014-09-22 08:03:25Z

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");
            }
        }
    });
});

ibrahimyilmaz · Accepted Answer · 2014-09-22 07:53:16Z

0

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

Try this fiddle: JSFiddle

answered Sep 22, 2014 at 7:53

ibrahimyilmaz

2,3751 gold badge25 silver badges28 bronze badges

Comments

Sasa · Accepted Answer · 2014-09-22 08:02:55Z

0

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

edited Sep 22, 2014 at 8:02

answered Sep 22, 2014 at 7:54

Sasa

1,1901 gold badge15 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery UI datepicker range selector issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related