How to update multiple inputs with bootstrap-datepicker
<p>I'm working on a form that has fields for <code>start date</code> and <code>end date</code>, using bootstrap-datepicker.</p>

<p>For convenience, any time the user updates <code>start date</code>, I want <code>end date</code> to update to match <code>start date</code>. (Changing end date should not change start date though).</p>

<p>I'm pretty new to jQuery, but this is what I have so far:</p>

<pre><code>$(document).ready(function() {
  $('.dateinput').datepicker();
  $('#id_start_date').change(function() {
    var startDate = $(this).val();
    $('#id_end_date').val(startDate);
  });
});

&lt;input class="dateinput" id="id_start_date" name="start_date" type="text" /&gt;
&lt;input class="dateinput" id="id_end_date" name="end_date" type="text" /&gt;
</code></pre>

<p>This almost works; using the datepicker on <code>start date</code> correctly updates <code>end date</code>. But then if I try to click on the <code>end date</code> field, its datepicker still has a stale value for <code>end date</code> (calendar reflects the old value for <code>end date</code>).</p>

<p><a href="https://stackoverflow.com/a/13400149/5802442">This SO answer</a> suggests I need to call the datepicker's <code>update()</code> function when I update the input's <code>val()</code>. But at the time of changing <code>start date</code>, <code>end date</code>'s datepicker isn't in the DOM (so I don't think I can target it with <code>$('.dateinput')</code>).</p>

<p>I've also tried targeting it with <code>$('#id_end_date').datepicker('update');</code> but this doesn't seem to work either.</p>