如何基于另一个引导日期时间选择器更改一个引导日期时间选择器值

时间:2020-01-17 08:25:54

标签: javascript

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相同的日期,但是我不能这样做。有人可以帮我吗?

2 个答案:

答案 0 :(得分:0)

this.selectLoadings$.subscribe(
  loading => (this.isLoading = loading.directionsByBranch[this.branchId])
);

this.selectedDataByBranch$
      .pipe(filter(data => Object.keys(data).length > 0))
      .subscribe(selectedDataByBranch => {
        this.trainsDatasets = this.getDatasets(selectedDataByBranch);
        this.context = this.chartRef.nativeElement; ### Error undefined chartRef

答案 1 :(得分:0)

您可以在 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">