Проверка полного календаря Angular 9 Typescript для предыдущей даты - дата в прошлом не может быть выбрана

#angular #typescript #validation #fullcalendar

#angular #typescript #проверка #полный календарь

Вопрос:

Я пытаюсь создать средство проверки в приложении angular 9, используя FullCalendar. Дата в прошлом не может быть выбрана. Я видел довольно много сообщений об этом в отношении javascript, но не Angular / typescript.

Я узнал, что для поиска текущей даты я могу использовать приведенную ниже функцию в Angular:

 today: number = Date.now();

У меня есть приведенная ниже проверка формы ts (не работает):

 eventDate:['',Validators.required,(c: AbstractControl) => (new Date(c.value).getTime() < Date.now() ? { invalid: true } : null)],

Я знаю о возможности использования приведенных ниже функций полного календаря, хотя я хочу, чтобы мои пользователи видели свои предыдущие встречи, и поэтому я хотел бы, чтобы средство проверки сообщало пользователям, что дата в прошлом не может быть забронирована:

  validRange:function(nowDate){
       return{
        start:nowDate,
       }
     }

Любая помощь была бы очень признательна!

1. Если вы не используете moment.js Я бы посоветовал попробовать это. в moment есть отличные функции сравнения дат, которые упрощают достижение того, чего вы пытаетесь достичь. Вы можете прочитать об этом здесь: momentjs.com

2. @Farasi78 github.com/you-dont-need/You-Dont-Need-Momentjs

Ответ №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:

Я обнаружил, что ваше полное значение даты зависит от значения времени. попробуйте преобразовать значение либо даты, либо времени, чем ваша логика будет работать.

используйте 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');