禁用日期的 HTML5 日期选择器在 Angular 中不起作用
Posted
技术标签:
【中文标题】禁用日期的 HTML5 日期选择器在 Angular 中不起作用【英文标题】:HTML5 Datepicker with disabled dates not working in Angular 【发布时间】:2018-08-22 00:18:29 【问题描述】:我想在日期选择器 (html5) 中禁用过去的日期。当我在没有任何条件的情况下(自发地)使用日期选择器时,禁用的日期正在工作。
如果我在有条件的情况下使用日期选择器,它将不起作用。我使用 jQuery 将今天的日期附加到日期元素的“min”属性(使用 jQuery 和 Angular 是不好的做法)。因为我找不到如何使用表单控件打字稿访问/附加日期元素的属性。 (例如:formname.get('formcontrolName')....)
我希望日期选择器可以在条件下工作。
Source code
【问题讨论】:
【参考方案1】:您可以将 datepicker 的 min
属性绑定到组件的属性。这是工作示例的相关部分(请注意,必须将值分配给构造函数中的给定属性,因为 ngAfterViewInit
生命周期挂钩被调用到较晚):
HTML
<input type="date" class="form-control" [min]="today" id="applyDate1" formControlName="applyDate1"/>
打字稿
export class AppComponent implements AfterViewInit
public personalForm: FormGroup;
public today;
constructor(private fb: FormBuilder)
const currentDate:Date = new Date();
let dd:any = currentDate.getDate();
let mm:any = currentDate.getMonth()+1;
let yyyy:any = currentDate.getFullYear();
if(dd<10)
dd = '0'+dd
if(mm<10)
mm = '0'+mm
this.today = yyyy + '-' + mm + '-' + dd;
...
...
【讨论】:
让 dd:number 应改为 dd:any(不能与字符串连接),与 mm 和 yyyy 相同。以上是关于禁用日期的 HTML5 日期选择器在 Angular 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Telerik rad 日期选择器在用户键入未来日期时显示错误消息