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

Question

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

请指教。提前致谢我通过粘贴我的 HTML 代码来到这里：

HTML Code:

 <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 中。因此，基于此日期，必须禁用未来日期，必须启用之前的日期。

TypeScript:

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'}];
  }

Answer 1

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

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

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

How to Disable the Future Date Entries in Angular 2?

angular2-template

angular