37

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({});

12 Answers 12

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
});
1
  • Thank you! Also your selector for "endDatePicker" should be "#endDatePicker" Apr 28, 2017 at 12:36
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"));
  }
});
1
  • 1
    Simplest and useful-est way. Dec 9, 2016 at 10:16
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
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());
5
  $('#start_date').datepicker({
       endDate: new Date(),
       autoclose: true,
  }).on("changeDate", function (e) {
       $('#end_date').datepicker('setStartDate', e.date);
  });

  $('#end_date').datepicker({
      autoclose: true,
  });
1
  • After going through all the above solutions, finally, this one worked. Thanks. May 31, 2021 at 8:38
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.

2
  • 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! Nov 20, 2012 at 19:58
  • This is good advice, but how about setting defaultDate instead using a technique similar to Tin Man suggests below? This was my solution. Dec 19, 2012 at 3:03
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")
});
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>
0
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.

4
  • Your snippet results in Error: { "message": "ReferenceError: $ is not defined", "filename": "stacksnippets.net/js", "lineno": 12, "colno": 9 }
    – McAuley
    Nov 8, 2021 at 23:56
  • 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!
    – Yotta_Dev
    Nov 22, 2021 at 9:57
  • 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.
    – McAuley
    Nov 24, 2021 at 21:44
  • 1
    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!
    – Yotta_Dev
    Dec 7, 2021 at 10:55
0
 $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);
        }
0

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);
-1
$("#<%=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);
            }
        });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.