CODEWITHSUNDEEP
javascriptjquerydatepickerbootstrap-datepicker
Kusanagi2k
Kusanagi2k

Reputation: 132

Bootstrap datepicker date range end date updating

I'm using this plugin https://bootstrap-datepicker.readthedocs.io/en/latest/

The problem i'm facing comes from using the "range" form of this plugin.

From the docs I understand there's a way to capture the "changeDate" event and do something when this happens, however, when the initial date is higher than the end date, the end date gets updated inmediately and I don't want this behaviour; what I want is the end date to be blank and to re-select the end date instead, but I have no clue how to capture and modify this.

Thanks in advance.

EDIT2: To clarify, this happens when both dates are already entered, but then, you select a start date that is higher to the end date.

EDIT: Here's the load code to show which options i'm using.

$('.input-daterange').datepicker({
                    format: "dd/mm/yyyy",
                    weekStart: 1,
                    language: lang,
                    daysOfWeekHighlighted: "0,6",
                    startDate: obj.initialDate,
                    orientation: "bottom auto",
                    autoclose: true,
                    showOnFocus: false,
                    maxViewMode: 'days',
                    keepEmptyValues: true,
                    templates: {
                        leftArrow: '<',
                        rightArrow: '>'
                    }
                });

Upvotes: 1

Views: 10017

Answers (1)

Alexander
Alexander

Reputation: 4527

The snippet below shows the order of changeDate event firing. If a user set started date value that is later then finished date, then the changeDate event will be fired on finish input firstly.

$('.input-daterange').datepicker({
  format: "dd/mm/yyyy",
  weekStart: 1,
  language: "en",
  daysOfWeekHighlighted: "0,6",
  startDate: "01/01/2017",
  orientation: "bottom auto",
  autoclose: true,
  showOnFocus: true,
  maxViewMode: 'days',
  keepEmptyValues: true,
  templates: {
    leftArrow: '<',
    rightArrow: '>'
  }
});
$('.input-daterange').on('changeDate', function(e){
  console.log(e.target.name + ": " + $(e.target).val());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<div class="input-group input-daterange">
  <span class="input-group-addon">From</span>
  <input type="text" name="start" class="form-control" value="22/05/2017">
  <span class="input-group-addon">to</span>
  <input type="text" name="finish" class="form-control" value="22/05/2017">
</div>

Therefore, it is neccessary to detect the reason of the firing. If the reason is not a user action then reset value of date. Also I find that preventDefault() method does not work for this event. Thus, I used two auxiliary variables to solve your question:

var userTarget = "";
var exit = false;
$('.input-daterange').datepicker({
  format: "dd/mm/yyyy",
  weekStart: 1,
  language: "en",
  daysOfWeekHighlighted: "0,6",
  startDate: "01/01/2017",
  orientation: "bottom auto",
  autoclose: true,
  showOnFocus: true,
  maxViewMode: 'days',
  keepEmptyValues: true,
  templates: {
    leftArrow: '&lt;',
    rightArrow: '&gt;'
  }
});
$('.input-daterange').focusin(function(e) {
  userTarget = e.target.name;
});
$('.input-daterange').on('changeDate', function(e) {
  if (exit) return;
  if (e.target.name != userTarget) {
    exit = true;
    $(e.target).datepicker('clearDates');
  }
  exit = false;
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<div class="input-group input-daterange">
  <span class="input-group-addon">From</span>
  <input type="text" name="start" class="form-control" value="20/05/2017">
  <span class="input-group-addon">to</span>
  <input type="text" name="finish" class="form-control" value="22/05/2017">
</div>

Upvotes: 2

Related Questions