Question

我有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表格日期选择器

Answer 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);
        });

Answer 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" />

Answer 3

你正在使用哪个bootstrap datepicker我不确定。但是根据您的问题，我可以建议onChange事件，您可以通过id或类名明确更新其他输入字段。

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

Answer 4

如果您打算在第一个日期选择器上选择的日期在第二个日期选择器上可用，则下面的代码段可能会有所帮助。

<强>的.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);

         });

Onchange bootstrap datepicker更改另一个bootstrap datepicker的值

4 个答案: