Bootstrap datepicker date range end date updating

Question

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

Answer 1

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: '<', rightArrow: '>' } }); $('.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>