如何使用 bootstrap-datepicker 更新多个输入

Posted 2023-05-07

【中文标题】如何使用 bootstrap-datepicker 更新多个输入

【英文标题】：How to update multiple inputs with bootstrap-datepicker

【发布时间】：2016-06-14 19:53:01

【问题描述】：

我正在使用 bootstrap-datepicker 处理一个包含 start date 和 end date 字段的表单。

为方便起见，只要用户更新start date，我希望end date 更新以匹配start date。 （虽然更改结束日期不应更改开始日期）。

我对 jQuery 很陌生，但这是我目前所拥有的：

$(document).ready(function() 
  $('.dateinput').datepicker();
  $('#id_start_date').change(function() 
    var startDate = $(this).val();
    $('#id_end_date').val(startDate);
  );
);

<input class="dateinput" id="id_start_date" name="start_date" type="text" />
<input class="dateinput" id="id_end_date" name="end_date" type="text" />

这几乎可以工作；使用start date 上的日期选择器正确更新end date。但是，如果我尝试单击 end date 字段，它的日期选择器仍然有一个陈旧的 end date 值（日历反映了 end date 的旧值）。

This SO answer 建议我在更新输入的val() 时需要调用日期选择器的update() 函数。但是在更改 start date 时，end date 的日期选择器不在 DOM 中（所以我认为我不能使用 $('.dateinput') 定位它）。

我也尝试使用$('#id_end_date').datepicker('update'); 定位它，但这似乎也不起作用。

【参考方案1】：

使用setDate方法设置bootstrap datepicker的值

$('#id_end_date').datepicker('setDate',startDate)