Angular 9 Typescript fullCalendar Validation for previous date - 不能选择过去的日期答案

【问题标题】：Angular 9 Typescript fullCalendar Validation for previous date - date in the past cannot be selectedAngular 9 Typescript fullCalendar Validation for previous date - 不能选择过去的日期
【发布时间】：2020-10-03 21:13:01
【问题描述】：

我正在尝试使用 fullCalendar 在 Angular 9 应用程序中创建验证器。不能选择过去的日期。我看过很多关于这个的帖子，但不是 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,
       }
     }

任何帮助将不胜感激！

【问题讨论】：

如果您不使用 moment.js，我建议您尝试一下。 moment 具有出色的日期比较功能，可以轻松实现您想要实现的目标。你可以在这里阅读：momentjs.com
@Farasi78 github.com/you-dont-need/You-Dont-Need-Momentjs

标签： angular typescript validation fullcalendar

【解决方案1】：

假设您想要达到的结果是无法点击过去的日期，您可以安排触发这两个 fullcalendar 输出时调用的函数：(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
   }

}

【讨论】：

【解决方案2】：

我从时间值中发现了您的完整日期值。尝试将值转换为日期或时间，而不是您的逻辑将起作用。

使用日期管道将日期和时间值转换为您的偏好

如果要减去日期：

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');

【讨论】：