angular - 角度引导日期选择器不调用函数

问题描述

我想在两天之间选择日期选择器后自动显示小时数。我正在使用角度 ngb 引导程序，但是每当我选择日期时，都不会调用执行操作的函数。即（更改）=“onChangeDate（）”。请，我需要帮助，看看我做错了什么。这是我的 html 和打字稿。谢谢

HTML

         <div class="col-md-5">
            <div class="form-group row">
                <label class="col-sm-12 col-md-8 form-control-label  ml-2" for="date_from">{{'From Date' | translate}} <span class="danger">*</span>:</label>
                <div class="col-md-12">
                <input  type="text"  placeholder="{{todayDate | date: 'MM-dd-yyyy 08:30'}}" [max]="leaveList.date_to" class="form-control input-md" id="date_from" 
                    name="date_from"  [(ngModel)]="leaveList.date_from" ngbDatepicker  #d="ngbDatepicker"  (change)="onChangeDate()"  max="9999-12-31">
                
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
                      <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
                    </button>
                </div>
                <div class="col-md-12 mt-1">
                    <ngb-timepicker name="time_from" 
                    [seconds]="true"
                    [(ngModel)]="leaveList.time_from" id="time_from"></ngb-timepicker>
                </div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group row">
                <label class="col-md-12 form-control-label" for="date_to">{{'Date To'| translate}} <span class="danger"> *</span></label>
                <div class="col-md-12">
                    <input type="text"  placeholder="{{todayDate | date: 'MM-dd-yyyy 16:00'}}"  [(ngModel)]="leaveList.date_to" [min]="leaveList.date_from" 
                    class="form-control input-md" id="date_to" ngbDatepicker  #f="ngbDatepicker" (change)="onChangeDate()"
                    name="date_to"  ngbDatepicker #f="ngbDatepicker" max="9999-12-31">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" (click)="f.toggle()" type="button">
                          <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
                        </button>
                    </div>
                <div class="col-md-12 mt-1">
                    <ngb-timepicker name="time_to"  
                    [seconds]="true"
                    [(ngModel)]="leaveList.time_to" ></ngb-timepicker>
                </div>
                </div>
            </div>
        </div>

onChange() 函数的 TS 文件

onChangeDate(){
var minutesWorked = 0;
var startDate = new Date(this.leaveList.date_from);
var endDate = new Date(this.leaveList.date_to);
if(endDate < startDate){
    return 0;
}
var current  = startDate
// Define work range
var workHoursStart = 8;
var workHoursEnd = 18;
var includeWeekends = false;
console.log("current", current.getHours()+''+current.getMinutes());
// console.log('')
// Loop while currentDate is less than end Date (by minutes)
while(current <= endDate){          
    // Is the current time within a work day (and if it 
    // occurs on a weekend or not)          
    if(current.getHours() >= workHoursStart && current.getHours() < workHoursEnd && (includeWeekends ? current.getDay() !== 0 && current.getDay() !== 6 : true)){
          minutesWorked++;
    }

    // Increment current time
    current.setTime(current.getTime() + 1000 * 60);
}

// Return the number of hours
this.leaveList.hours = Math.floor(minutesWorked / 60);

}

标签： angulartwitter-bootstrap

angular - 角度引导日期选择器不调用函数

问题描述

解决方案

推荐阅读