如何根据另一个 bootstrap datetimepicker 更改一个 bootstrap datetimepicker 值

Question

 function setCheckOutDate(){ var str1 = document.getElementById("checkInDate").value; document.getElementById("checkOutDate").value=str1; }

 <div class="control-group"> <td colspan="16" style="text-align:right; vertical-align:middle;"><label class="control-label">Enter Check In Date:</label></td> <td colspan="16"> <div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input size="16" name="checkInDate" id="checkInDate" type="text" value="" readonly style="height:30px;" onchange="setCheckOutDate();"> <span class="add-on" style="height:30px;"><i class="icon-remove"></i></span> <span class="add-on" style="height:30px;"><i class="icon-th"></i></span> </div> <input type="hidden" id="dtp_input2" value="" /><br/> </td> </div> <div class="control-group"> <td colspan="16" style="text-align:right; vertical-align:middle;"><label class="control-label">Enter Check Out Date:</label></td> <td colspan="16"> <div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input3" data-link-format="yyyy-mm-dd"> <input size="16" name="checkOutDate" id="checkOutDate" type="text" style="height:30px;" value="" readonly onchange="showRoomBooking(this.value);"> <span class="add-on" style="height:30px;"><i class="icon-remove"></i></span> <span class="add-on" style="height:30px;"><i class="icon-th"></i></span> </div> <input type="hidden" id="dtp_input3" value="" /><br/> </td> </div>

我想将 checkOutDate 的日期设置为与我选择 checkInDate 的日期相同，但是我无法做到。 谁能帮我解决这个问题？

Answer 1

.on('changeDate', function (selected) {
            var minDate = new Date(selected.date.valueOf());
            $('#otherdate').datepicker('setEndDate', minDate);
        }); 

Answer 2

您可以在checkinDate上捕获事件changeDate然后更新checkoutDate值

P/S：您应该使用代码段功能来显示您的情况，如下所示

 $.fn.datepicker.defaults.format = "mm/dd/yyyy"; let dateElm1 = $('.datepicker1'); let dateElm2 = $('.datepicker2'); dateElm1.datepicker({}); dateElm2.datepicker({}); dateElm1.on('changeDate', function (data) { dateElm2.datepicker('update', data.date); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet"/> <input class="datepicker1" data-date-format="mm/dd/yyyy"> <input class="datepicker2" data-date-format="mm/dd/yyyy">