onchange bootstrap datepicker 改变另一个 bootstrap datepicker 的值答案

【问题标题】：Onchange bootstrap datepicker change the value of another bootstrap datepickeronchange bootstrap datepicker 改变另一个 bootstrap datepicker 的值
【发布时间】：2016-07-18 10:25:42
【问题描述】：

我有 2 个日期选择器，我想更改一个日期选择器的值，并且应该为第二个日期选择器设置相同的值

表格 1 日期选择器

<input  name="start" class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />

表格 2 日期选择器

  <input  name="start" class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />

如果我更改表格 1 日期选择器，它应该会自动更改更改 2 表格日期选择器

【问题讨论】：

标签： javascript jquery twitter-bootstrap datepicker

【解决方案1】：

   <input type="text" class="form-control form-control-sm" readonly="" style="background-color:#FFFFFF;" name="txtFdate" id="txtFdate" placeholder="From Date" />
   <input type="text" class="form-control form-control-sm" readonly="" style="background-color:#FFFFFF;" name="txtTdate" id="txtTdate" placeholder="To Date" />


        $("#txtFdate").datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            endDate: '0'
        }).on('changeDate', function (selected) {
            var minDate = new Date(selected.date.valueOf());
            $('#txtTdate').datepicker('setStartDate', minDate);
        });

        $("#txtTdate").datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            endDate: '0'
        })
        .on('changeDate', function (selected) {
            var minDate = new Date(selected.date.valueOf());
            $('#txtFdate').datepicker('setEndDate', minDate);
        });

【讨论】：

【解决方案2】：

更改两种输入类型的名称可以解决您的问题，但我不太确定，因为给定问题的代码有限。

<input  name="start" class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />

<input  name="start1" class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />

【讨论】：

【解决方案3】：

我不确定您使用的是哪个引导日期选择器。但是根据您的问题，我可以建议 onChange 事件，您可以通过 id 或类名显式更新其他输入字段。

但是，如果您使用两个输入框来获取日期范围，那么您可以检查此 datepicker 类型为 range

【讨论】：

【解决方案4】：

如果您想让第一个日期选择器上选择的日期在第二个日期选择器上可用，下面的代码 sn-p 可能会有所帮助。

.jsp

<input type="text" name="firstDate" id="firstDate" value="" class="datepicker" readonly>  
<input type="text" name="secondDate" id="secondDate" value="" class="datepicker" readonly>

.js

             $(function() {    
           $('.datepicker').datepicker();

           var updateSecondDate= function() {

        var firstDate = new Date($('#firstDate').val());
       $('#secondDate').datepicker('setDate', firstDate);
                                     }
      $('#firstDate').change(updateSecondDate);

         });

【讨论】：