Onchange引导程序日期选择器更改另一个引导程序日期选取器的值

Onchange bootstrap datepicker change the value of another bootstrap datepicker

本文关键字：引导程序 日期 选取 选择器 Onchange 另一个      更新时间：2023-09-26

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

表单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日期选择器

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

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

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

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

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

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

.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);
         });
相关文章：