如何解决Angular 9 Typescript fullCalendar以前日期的验证-无法选择过去的日期
我正在尝试使用fullCalendar在angular 9应用中创建一个验证器。无法选择过去的日期。我已经看到了很多关于javascript的文章,但是没有Angular / typescript。
我了解到要找到当前日期,可以在Angular中使用以下功能:
today: number = Date.now();
我的ts表单验证中包含以下内容(无效):
eventDate:['',Validators.required,(c: AbstractControl) => (new Date(c.value).getTime() < Date.now() ? { invalid: true } : null)],
我知道可以使用下面的fullCalendar功能,尽管我希望我的用户看到他们以前的约会,所以我希望有一个验证程序来建议用户不能预订过去的日期:
validRange:function(nowDate){
return{
start:nowDate,}
}
任何帮助将不胜感激!
解决方法
假设您要获得的结果是无法单击过去的日期,则可以安排触发全日历的以下两个输出时调用的函数:(dateClick)
(此输出触发一天的值选择)或(select)
(此输出触发多日选择的值),方法如下:
mycomponent.component.html
<full-calendar
#calendar
[plugins]="somevalue"
[header]="somevalue"
[events]="somevalue"
(dateClick)="handleDateClick($event)"
</full-calendar>
mycomponent.component.ts
handleDateClick(event) {
if(new Date(event.dateStr).getTime() >= Date.now()) {
//do something
}
}
,
我发现您的完整日期值来自时间值。尝试将日期或时间值转换为逻辑值。
使用datepipe将日期和时间值转换为您的首选项
如果要减去日期:
this.datePipe.transform(new Date(c.value),'yyyy-MM-dd') - this.datePipe.transform(new Date(today),'yyyy-MM-dd');
如果要减去时间;
this.datePipe.transform(new Date(c.value),'HH:mm') - this.datePipe.transform(new Date(today),'HH:mm');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。