jquery ui datepicker range between two dates

Question

Can you please show me how to enable range in jquery ui datepicker, I want to determine range in the format: from 2012-12-10 to 2012-12-20 etc (yy-mm-dd, already specified). All other dates should not be available.

Appreciate the help I can get, cheers!

Have you looked at the [documentation](api.jqueryui.com/datepicker/), there is even a demo on how to do that. — Jack
– Jack, Commented Nov 23, 2012 at 14:14

Fseee · Accepted Answer · 2012-11-23 14:19:27Z

6

try this:

function setInterval(){
$(function() {
    $( "#startDate" ).datepicker({
        defaultDate: "+1w",
        onSelect: function( selectedDate ) {
            $( "#endDate" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#endDate" ).datepicker({
        defaultDate: "+1w",
        onSelect: function( selectedDate ) {
            $( "#startDate" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});
}

where

startDate  
endDate

are the two input fields of datepicker

answered Nov 23, 2012 at 14:19

Fseee

2,6199 gold badges42 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DarkAjax · Accepted Answer · 2012-11-23 14:15:46Z

1

Try something like:

jQuery("#date").datepicker({
    beforeShow: function() {
        return {
            dateFormat: 'yy-mm-dd',
            minDate: '2012-12-10',
            maxDate: '2012-12-20',
        }
    }
});

answered Nov 23, 2012 at 14:15

DarkAjax

16.3k11 gold badges60 silver badges67 bronze badges

Comments

Diego · Accepted Answer · 2012-11-23 14:14:24Z

0

Use maxDate and minDate options when creating.

Link

Code:

$( "#datepicker" ).datepicker({ minDate: value1, maxDate: value2 });

answered Nov 23, 2012 at 14:14

Diego

16.7k26 gold badges88 silver badges137 bronze badges

Comments

talegna · Accepted Answer · 2012-11-23 14:22:04Z

0

The previous answer is correct, example:

$(function() {
    $( "#datepicker" ).datepicker({ minDate: new Date(2012, 12, 10), maxDate: new Date(2012, 12, 20) });
});

I just wanted to add the following links which you might find useful:

http://jqueryui.com/datepicker/#min-max

http://api.jqueryui.com/datepicker/

answered Nov 23, 2012 at 14:22

talegna

2,3992 gold badges21 silver badges22 bronze badges

Collectives™ on Stack Overflow

jquery ui datepicker range between two dates

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related