如何禁用 Angular 2 中的未来日期条目？答案

【问题标题】：How to Disable the Future Date Entries in Angular 2?如何禁用 Angular 2 中的未来日期条目？
【发布时间】：2017-06-28 19:09:29
【问题描述】：

我需要在 DateTimePicker 日历上禁用未来日期。（即）今天的日期是预填日历中的 6 月 27 日，然后应禁用从 6 月 28 日开始的所有日期（即所有未来日期都应显示为禁用），同样所有当用户看到 DatePicker 的日历元素时，应启用过去的日期条目。我正在使用引导库。

请指教。提前致谢我在这里粘贴我的 HTML 代码：

HTML 代码：

 <div style="border:0;box-shadow:none;background:none;width:100px;padding:0;height:14px;text-align:center;" (click)="onStartEdit(d)">
                                                <img src="../../assets/images/icons/editicon.png" alt="edit" style="cursor:pointer;"> {{d.date | date:'dd/MM/yyyy'}}
                                            </div>
                                            <div *ngIf="datePickers[d.state]" id="startPicker" style="width: auto;">
                                                <datepicker name="datePickerEdit" [(ngModel)]="datePickerEdit" [showWeeks]="false" (selectionDone)="onEditDate(d,$event,edit_entry)" [dateDisabled]="dateDisabled"></datepicker>
                                                <div class="pickerBtns">
                                            <button type="button" class="btn btn-sm btn-success  pull-right" (click)="onClose(d)">Close</button>
                                        </div>
                                            </div>

有了这个 {{d.date | date:'dd/MM/yyyy'}}，日期被预填充在 HTML 中。因此，基于此日期，必须禁用未来日期，启用之前的日期。

打字稿：

public dateDisabled: {date: Date, mode: string}[];
public tomorrow: Date;
onStartEdit(d:any) {
  this.datePickers[d.state] = true;
  this.datePickerEdit = d.date;
}
onClose(d:any){
 this.datePickers[d.state] = false; 
}
public disableTomorrow(): void {
    this.dateDisabled = [{date: this.tomorrow, mode: 'day'}];
  }

【问题讨论】：

您甚至没有说明您使用的是哪个日期选择器库，您希望有人如何帮助您？
我正在使用引导库

标签： angular angular2-template

【解决方案1】：

只需将 maxDate 属性设置为 new Date()，它就会为您工作。例子： this.datepickerOptions = new DatePickerOptions({ 格式：'DD-MM-YYYY', 最大日期：新日期（） }); 然后设置 ng2-datepicker 的 options 属性：

<ng2-datepicker class="DatePicker" name="fromDate" [options]="datepickerOptions"></ng2-datepicker>

【讨论】：

@MusheerAiman 您需要使用 ng2-datepicker(ngx-datepicker)，它会正常工作，我在我的一个项目中使用了它。
还需要提供[options]="datepickerOptions"，并在TS文件中设置datepickerOptions：this.datepickerOptions = new DatePickerOptions({ format: 'DD-MM-YYYY', maxDate: new Date () });
@MohitJain: 因为日期是预填的，所以你能指导如何获取预填日期
@MohitJain 你可以分享任何 plunker。