CODEWITHSUNDEEP
jquerybootstrap-4bootstrap-datepicker
crazymatt
crazymatt

Reputation: 3286

Bootstrap Date Picker End/Start Date Limit with Date Range

I am using the Bootstrap Datepicker and I have 2 input fields (start date and end date) that use the date range option (inputs:) which works really well. I am trying to get the start field to require picking a date past today's date (so only a date today or a date in the past).

Here is the jQuery I am using:

  $('.input-daterange').datepicker({
    format: 'mm-dd-yyyy',
    inputs: $('.date-control'),
    todayBtn: true,
    todayHighlight: true
  });

Here are the form fields:

    <div class="col-md-6 mb-3">
      <label for="date-start"><span class="text-danger">*</span>Project Start Date</label>
      <div class="input-group input-daterange">
        <div class="input-group-prepend">
          <span class="input-group-text">Started</span>
        </div>
        <input type="text" class="form-control date-control start-daterange" name="date-start" id="date-start" value="" required="">
        <div class="invalid-feedback">
          Project Start Date is required.
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="date-end"><span class="text-danger">*</span>Project End Date</label>
      <div class="input-group input-daterange end-daterange">
        <div class="input-group-prepend">
          <span class="input-group-text">Finished</span>
        </div>
        <input type="text" class="form-control date-control" name="date-end" id="date-end" value="" required="">
        <div class="invalid-feedback">
          Project End Date is required.
        </div>
      </div>
    </div>

I have already tried to use endDate: "0d"; to limit the start date field but if I do this it will also limit the end date field because they are being associated with the inputs: $('.date-control'). I saw in the documents that I could use <input type="text" class="form-control" data-date-end-date="0d"> but this does not work either, maybe because I am using the inputs option?

So my question is there an easy way to keep using the date range option and be able to limit the start date field to select today date and any date in the past?

I have viewed these other semi-related SO questions how to restrict bootstrap date picker from future date and How to have a dynamic maximum end date in Bootstrap Date Picker. Also I am using the latest version of bootstrap datepicker (v1.8).

Upvotes: 2

Views: 1803

Answers (1)

Ricardo Montuan
Ricardo Montuan

Reputation: 78

It seems that the inputs option and the data-date-end-date attribute don't work well together. But there's a workaround and you'll get the same result. You can use the same class for both inputs and you can create the datepickers using that class. Besides that, you're gonna use the data-date-end-date attribute just in the start input, like this:

The Jquery code:

$('.date-control').datepicker({
  format: 'mm-dd-yyyy',
  todayBtn: true,
  todayHighlight: true
});

The form fields:

<div class="col-md-6 mb-3">
  <label for="date-start"><span class="text-danger">*</span>Project Start Date</label>
  <div class="input-group input-daterange">
    <div class="input-group-prepend">
      <span class="input-group-text">Started</span>
    </div>
    <input type="text" class="form-control date-control start-daterange" name="date-start" id="date-start" required="" data-date-end-date="0d">
    <div class="invalid-feedback">
      Project Start Date is required.
    </div>
  </div>
</div>
<div class="col-md-6 mb-3">
  <label for="date-end"><span class="text-danger">*</span>Project End Date</label>
  <div class="input-group input-daterange end-daterange">
    <div class="input-group-prepend">
      <span class="input-group-text">Finished</span>
    </div>
    <input type="text" class="form-control date-control" name="date-end" id="date-end" required="">
    <div class="invalid-feedback">
      Project End Date is required.
    </div>
  </div>
</div>

ps: I've removed the value attribute from both inputs just to make it clear.

Upvotes: 0

Related Questions