Question

我正在使用角度5的owl-date-time选择器。当我从选择器中选择今天的日期时，它不应显示过去的日期和月份。

代码：

<div class="form-group">
 <label class="control-label col-sm-2 date-right-padding">Date</label>
  <div class="col-sm-5 datePickerField no-left-padding">
   <input [owlDateTime]="createTaskDatePicker" maxlength="19" 
    [disabled]="isDateEnabledCreateTask" 
    [(ngModel)]="createTask.activationDate" placeholder="dd/MM/yyyy hh:mm" 
    class="form-control owl-date-time-input" name="createTaskDate" 
    (click)="clearCreateTaskErrorMessages()">
   <owl-date-time #createTaskDatePicker></owl-date-time>
 </div>
 <div class="col-sm-1 datePickerIcon">
 </div>
</div>

注意：

当用户选择当前日期时，应该禁用过去日期。

问题：

如何在猫头鹰日期时间选择器中禁用过去的日期。

您的建议对我有帮助。

Answer 1

您可以在猫头鹰日期时间选择器中禁用过去的日期，例如

<input [min]="min"
           [owlDateTimeTrigger]="" [owlDateTime]="">

现在定义这样的最小值

// Min moment: May 10 2018, 10:50
public min = new Date(2018, 4, 10, 10, 50);

因此它将禁用2018年5月10日之前的所有日期。

希望它会对您有所帮助。

Answer 2

首先在组件中添加当前日期：

今天公开日期Date：any = new Date（）;

然后将以下属性添加到html输入中：

[min] =“ todayDate”

Answer 3

IN .ts文件

minDate = new Date();

在.html文件中

<input class="form-control" placeholder="dd/MM/yyyy hh:mm" [min]="minDate" required [(ngModel)]="createTask.activationDate" name="createTaskDate"  [owlDateTimeTrigger]="dt" [owlDateTime]="dt">
<owl-date-time [hour12Timer] = "true" #dt></owl-date-time>

Answer 4

上述解决方案是正确的，但如果用户要选择当前日期，则将无法使用。

startAt = new Date();

在构造函数中，将时间设置为午夜：

this.startAt.setHours(0, 0, 0, 0);

如何在角度5的猫头鹰日期时间选择器中禁用过去的日期

4 个答案: