CODEWITHSUNDEEP
javascriptasp.net-mvctwitter-bootstrapdatepickerbootstrap-datepicker
Mkalafut
Mkalafut

Reputation: 741

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

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:

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.

Upvotes: 1

Views: 9508

Answers (1)

Mkalafut
Mkalafut

Reputation: 741

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

Upvotes: 2

Related Questions