Question

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

请指教。提前致谢我在这里粘贴我的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'}];
  }

Answer 1

只需将maxDate属性设置为新的Date（），它就会对你有用。例如： this.datepickerOptions = new DatePickerOptions（{ 格式：'DD-MM-YYYY'， maxDate：新日期（） }）; 然后设置ng2-datepicker的选项属性：

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

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

1 个答案: