Bootstrap Datepicker: Ensuring EndDate > StartDate as well as having a max start date

Question

Apologies if my title is on the crappy side. I should also start by mentioning that this is an MVC application if that matters.

Here's what I'm trying to do. I want my datepickers to have the following requirements:

The start date must have a range of today - 45 days ago
The end date must not be able to go past today
The end date must come after the start date

Here is what I've tried so far and have gotten the first 2 bullets working:

HTML

<div class="col-md-6 row">
    <div class="form-group">
      <label for="StartDate">Start Date</label>
      <input  type="text" id="StartDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
      <label for="EndDate">End Date </label>
      <input  type="text" id="EndDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
      </div>
  </div>

Javascript:

<script type="text/javascript">
$(document).ready(function () {
  $("#StartDate").datepicker({
    dateFormat: 'mm/dd/yyyy',
    onSelect: function (selected) {
      $("#EndDate").datepicker("option", "minDate", selected)
    }
  });
  $("#EndDate").datepicker({
    dateFormat: 'mm/dd/yyyy',
    onSelect: function (selected) {
      $("#StartDate").datepicker("option", "maxDate", selected)
    }
  });

I've tried also removing some of the data attributes in the HTML and instead adding them to the datepicker methods in the javascript to no avail.

I tried using the solutions to these following questions as well to no avail:

It also appears that most of the examples I've found use JQuery UI 1.9.2. I only use JQuery 1.9.1 and NOT UI. Does that make a difference?

I'm new to javascript and all this other web stuff so I'm sure I'm missing something very simple but any assistance is appreciated.

Mkalafut · Accepted Answer · 2016-06-08T15:02:17.807

Well okay it looks like I found my own answer.

Turns out I was using a combination of two different plug-ins.. Oops. So in case anyone else has a problem with validating start date < end date at all times as well as restricting initial start and end dates, here is what I was able to get working.

$("#StartDate").datepicker({
    autoclose: true,
  }).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#EndDate').datepicker('setStartDate', minDate);
  });

  $("#EndDate").datepicker({
    autoclose: true
  }).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#StartDate').datepicker('setEndDate', minDate);
  });

Bootstrap Datepicker: Ensuring EndDate > StartDate as well as having a max start date

1 Answers1