Question

187

Create a specific date range with jQuery datepicker

rated 0 times [ 193] [ 6] / answers: 1 / hits: 40605 / 13 Years ago, sat, may 7, 2011, 12:00:00

I'm trying to use the jQuery date picker to create a start date calendar and an end date calender. I'm using the date range example seen here: http://jqueryui.com/demos/datepicker/#date-range

The start date can not be before today's date and the end date can be 30 days past the selected start date.

For example if I chose a start date of May 17th in the first datepicker, then the end date in the second datepicker can only be selectable for May 18th through June 18th.

Here's my code:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<html xmlns=http://www.w3.org/1999/xhtml>

<head>

    <meta charset=utf-8 />    

    <title>Untitled Document</title>

    <link href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css rel=stylesheet type=text/css/>

    <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></script>

    <script src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js></script>



<script type=text/javascript>

    $(function() {

        var dates = $( #from, #to ).datepicker({

            defaultDate: +1w,

            changeMonth: true,

            numberOfMonths: 2,

            onSelect: function( selectedDate ) {

                var option = this.id == from ? 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 );

            }

        });

    });

    </script>

  </head>



<body>

<div class=date>



<label for=from>From</label>

<input type=text id=from name=from/>

<label for=to>to</label>

<input type=text id=to name=to/>



</div><!-- End demo -->



</html>

Any help would be appreciated. Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kylie

Add To Favorites

Follow

Total Points: 121

Total Questions: 84

Total Answers: 91

Location: Jordan

Member since Thu, Aug 5, 2021

3 Years ago

answered 13 Years ago luna · Accepted Answer

There you go : http://jsfiddle.net/c0mm0n/SJhmF/3/

$(function() {

    $( #from, #to ).datepicker({

        defaultDate: +1w,

        changeMonth: true,

        numberOfMonths: 3,

        onSelect: function( selectedDate ) {

            if(this.id == 'from'){

              var dateMin = $('#from').datepicker(getDate);

              var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); // Min Date = Selected + 1d

              var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 31); // Max Date = Selected + 31d

              $('#to').datepicker(option,minDate,rMin);

              $('#to').datepicker(option,maxDate,rMax);                    

            }



        }

    });

});