Restrict date in jquery datepicker based on another datepicker or textbox

Question

I have two text boxes with a datepicker hooked up to them. The text boxes are for start date and end date. The first datepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.

How can I setup the second datepicker so that it cannot choose a date before the date chosen in the first date picker? For example: If today is 12/11/10 and I choose 12/15/10 in the first datepicker, then the second date picker shouldn't be able to choose anything before 12/15/10.

Heres what I have so far:

$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});

Heemanshu Bhalla · Accepted Answer · 2017-11-06 05:21:38Z

41

For example, in this sample code, startDatePicker is selected as 2010-12-12, change event of startDatePicker sets the minDate of endDatePicker 2010-12-13. It locks the cells before this date. This is a sample for what @Victor mentioned..I hope it helps...Regards...Ozlem.

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    minDate: new Date(),
    maxDate: '+2y',
    onSelect: function(date){

        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);

       //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
        $("#endDatePicker").datepicker( "option", "minDate", endDate );
        $("#endDatePicker").datepicker( "option", "maxDate", '+2y' );

    }
});

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true
});

edited Nov 6, 2017 at 5:21

Heemanshu Bhalla

3,8201 gold badge31 silver badges57 bronze badges

answered Dec 21, 2010 at 1:30

user403295

8263 gold badges15 silver badges19 bronze badges

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

1 Comment

greaterKing Over a year ago

Thank you! Also your selector for "endDatePicker" should be "#endDatePicker"

the Tin Man · Accepted Answer · 2011-10-12 04:05:36Z

39

Update:

The approach above set the minDate only on creation time. I used the onSelect event to change the minDate option of the second datepicker like this:

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});

edited Oct 12, 2011 at 4:05

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Dec 14, 2010 at 18:11

Nguyen Van Long

4213 silver badges2 bronze badges

1 Comment

Bud Damyanov Over a year ago

Simplest and useful-est way.

aby · Accepted Answer · 2016-02-26 08:02:43Z

7

the Tin Man's solution worked for me after adding $("#txtEndDate").datepicker() at the bottom

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});

$("#txtEndDate").datepicker(); //it is not working with out this line

answered Feb 26, 2016 at 8:02

aby

8406 gold badges22 silver badges37 bronze badges

Comments

Orlando Alfonso · Accepted Answer · 2016-01-21 23:42:07Z

6

try this man:

$("#dateTo").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    minDate:  new Date()
    }).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    onSelect: function(){
        $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
    }
    }).datepicker("setDate", new Date());

answered Jan 21, 2016 at 23:42

Orlando Alfonso

711 silver badge2 bronze badges

Comments

beatusfk · Accepted Answer · 2019-04-19 10:43:50Z

5

  $('#start_date').datepicker({
       endDate: new Date(),
       autoclose: true,
  }).on("changeDate", function (e) {
       $('#end_date').datepicker('setStartDate', e.date);
  });

  $('#end_date').datepicker({
      autoclose: true,
  });

answered Apr 19, 2019 at 10:43

beatusfk

4616 silver badges5 bronze badges

1 Comment

Dipak Kumar Pusti Over a year ago

After going through all the above solutions, finally, this one worked. Thanks.

Victor Nicollet · Accepted Answer · 2010-12-12 00:41:18Z

4

From a pure UI standpoint, you shouldn't. If the user picks the wrong month on both datepickers, and tries to select the correct month, he has a 50% change of being hindered by the UI. Ideally, you would allow the incorrect selection and display a helpful error message saying the end date should be after the end date.

If you wish to implement your idea : give each datepicker a "change" event that changes the options on the other datepicker appropriately.

answered Dec 12, 2010 at 0:41

Victor Nicollet

24.7k4 gold badges62 silver badges90 bronze badges

2 Comments

Mike Perrenoud Over a year ago

Very good point, I was just about to implement this same concept and then realized I'll just use JavaScript to display the error! Thanks Victor!

Robert MacGrogan Over a year ago

This is good advice, but how about setting defaultDate instead using a technique similar to Tin Man suggests below? This was my solution.

the Tin Man · Accepted Answer · 2011-10-12 04:07:30Z

3

Use the "getDate" method of the first datepicker UI and pass it into minDate option of the second datepicker:

$("#txtEndDate").datepicker({
    showOn: "both",
    minDate: $("#txtStartDate").datepicker("getDate")
});

edited Oct 12, 2011 at 4:07

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Dec 14, 2010 at 17:38

Nguyen Van Long

4213 silver badges2 bronze badges

Comments

ANJYR · Accepted Answer · 2017-11-27 12:35:20Z

1

Use This Code:

<script type="text/javascript">
    $(function () {
        $("#txtStartDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
            minDate: 'dateToday'
        });
        $("#txtEndDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
             minDate: $("#txtStartDate").datepicker("getDate") });
        });
</script>

edited Nov 27, 2017 at 12:35

answered Aug 20, 2013 at 9:09

ANJYR

2,6196 gold badges43 silver badges62 bronze badges

Comments

Yotta_Dev · Accepted Answer · 2021-12-07 10:51:46Z

1

Hi everyone going to show what works with me in this case:

2 Datepickers ( DateFrom and DateTo)
HTML:

<!-- Datapicker dateFrom -->    
<label for="dateFrom"> Date from: </label>
  <div>
    <input type="text" id="dateFrom" class="form-control" autocomplete="off"
               th:placeholder="Enter a date From.."/>
    </div>
                                    
<!-- Datapicker dateTo-->   
<label for="dateTo"> Date to: </label>
  <div>
      <input type="text" id="dateTo" class="form-control" autocomplete="off"
               th:placeholder="Enter a date to..."/>
    </div>

Next you build your datapickers in JavaScript:
Datapicker activation (With YOUR datapicker build requirements)

$("#dateFrom").datepicker({ 
    dateFormat: 'yy-mm-dd',
    showButtonPanel: true
    });

$('#dateTo').datepicker({                
    dateFormat: 'yy-mm-dd',
    showButtonPanel: true
});

-And finally on the OnChange Event, for every time a Date is picked in any of the datepickers the selectable range avaliable in the other Datapicker changes.

$("body").on("change", "#dateFrom", function() {    
    $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
});

$("body").on("change", "#dateTo", function() {
    $('#dateFrom').datepicker('option', 'maxDate', $("#dateTo").datepicker("getDate"));
});

This make the DateTo DataPicker limit on change the date of the DateFrom Datapicker and viceversa.

edited Dec 7, 2021 at 10:51

answered Jun 14, 2021 at 11:53

Yotta_Dev

114 bronze badges

4 Comments

McAuley Over a year ago

Your snippet results in Error: { "message": "ReferenceError: $ is not defined", "filename": "stacksnippets.net/js", "lineno": 12, "colno": 9 }

Yotta_Dev Over a year ago

Hello friend, the Incidence here is not in my example. It is in your environment since you have not loaded JQuery in your project. This is why the $ sign is not being recognize in your system. To do this you have several ways, downloading the library, or linking the library with a <script> tag <script src = 'http: //ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min .js'> </script> . Hope it helps you!

McAuley Over a year ago

Yotta Dev, I'm not running it in my environment. I'm clicking the button under your code that says "Run Code Snippet". If the snippet needs Jquery in order to run, then maybe you ought to enable jquery for it. Or use a "fiddle". So no, it's not in my environment, it's in your snippet. I have jquery in every script in my environment, but I'm not downloading or copying this snippet to use in my own environment.

Yotta_Dev Over a year ago

Hi McAuley, ok now I understand you. I disable the ability to run the Snippet. I just add in the snippet format because of the visual format, easy to see instead of plain text. But thank you a lot for the clarification. Have a great day!

Jaydeep Shil · Accepted Answer · 2019-02-07 11:33:10Z

 $startDateCtrl.change(function () {
            setMinEndDateValue($startDateCtrl, $endDateCtrl);
        });

 $endDateCtrl.datepicker();

I have two Date picker start and end. End Date min and max date we are setting based on the selection from start. Min start date for End date picker is start date from start picker selection. Max end date for end date picker is selected start date from start date picker + 7 days.

function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
            var $maxSchedulingDate = new Date(@MaxDate.Year, @MaxDate.Month -1, @MaxDate.Day );
            var $startDate = $startDateCtrl.val();
            var $selectedStartDate = new Date($startDate);
            $selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
            var $maxEndDate = new Date();
            if ($selectedStartDate > $maxSchedulingDate) {
                $maxEndDate = $maxSchedulingDate;
            }
            else {
                $maxEndDate = $selectedStartDate;
            }
            $endDateCtrl.datepicker("option", "minDate", $startDate);
            $endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
        }

Rasmus Björling · Accepted Answer · 2019-02-19 12:47:16Z

Building on the previous answers in this thread, I felt a solution that worked with defaults and reapplied both min and max dates would be useful:

// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);

// To
$("#datepickerTo").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);

function limitToDateSpan(currentFromDate) {
  $("#datepickerTo").datepicker("option", "minDate", currentFromDate);

  var maxDate = new Date(currentFromDate.getTime());
  maxDate.setFullYear(maxDate.getFullYear() + 1);

  $("#datepickerTo").datepicker("option", "maxDate", maxDate);
}

limitToDateSpan(defaultFromDate);

// From
$("#datepickerFrom").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
  minDate: "2013-01-01",
  maxDate: "+1Y",
  onSelect: function (dateText) {
    limitToDateSpan(new Date(dateText));
  }
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);

Himalaya Garg · Accepted Answer · 2021-09-28 08:46:18Z

$("#<%=txtFromDate.ClientID%>").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-M-yy',
            showOn: "button",
            buttonImage: "../Images/Calendar.png",
            buttonImageOnly: true,
            yearRange: '-20:+20',
            buttonText: "Date with abbreviated month name",
            onSelect: function (selected) {
                var dt = new Date(selected);
                dt.setDate(dt.getDate() + 1);
                $("#<%=txtToDate.ClientID%>").datepicker("option", "minDate", dt);
            }
        });

    

$("#<%=txtToDate.ClientID%>").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-M-yy',
            showOn: "button",
            buttonImage: "../Images/Calendar.png",
            buttonImageOnly: true, 
            yearRange: '-20:+20',
            buttonText: "Date with abbreviated month name",
            onSelect: function (selected) {
                var dt = new Date(selected);
                dt.setDate(dt.getDate() - 1);
                $("#<%=txtFromDate.ClientID%>").datepicker("option", "maxDate", dt);
            }
        });

Collectives™ on Stack Overflow

Restrict date in jquery datepicker based on another datepicker or textbox

12 Answers 12

1 Comment

1 Comment

Comments

Comments

1 Comment

2 Comments

Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

1 Comment

1 Comment

Comments

Comments

1 Comment

2 Comments

Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related