如何传递函数以禁用日期

Question

我正在使用带有 angular 包装的 fatpickr https://www.npmjs.com/package/angularx-flatpickr

StackBlitz 问题：https://stackblitz.com/edit/angular-npep74

Objective:我想让星期六和星期日显示为禁用（下一步是假期也不能选择）

问题：我找不到关于如何用这个angular包装来做的解释，并且像原始的 flatpickr 文档一样做它不起作用

官方文档说应该是这样的：

 "disable": [
        function(date) {
            // return true to disable
            return (date.getDay() === 0 || date.getDay() === 6);

        }
    ],

Wrapper 文档什么也没说

我尝试了什么？:

HTML:

<input
               type="text"
               mwlFlatpickr
               [altInput]="true"
               dateFormat="Z"
               [(ngModel)]="desiredDate"
               [disable]="[disabledDay(date)]">

TS:

disabledDay(date) {
    console.log(date); // <--- on this point date is undefined
    return true;
  }

提前致谢

Answer 1

你的代码有误，你不应该传递函数的执行你应该传递函数定义

而不是

<input
               type="text"
               mwlFlatpickr
               [altInput]="true"
               dateFormat="Z"
               [(ngModel)]="desiredDate"
               [disable]="[disabledDay(date)]">

改为

<input
               type="text"
               mwlFlatpickr
               [altInput]="true"
               dateFormat="Z"
               [(ngModel)]="desiredDate"
               [disable]="[disabledDay]">

我分叉了你的 blitz checkout 这个例子：

https://stackblitz.com/edit/angular-u7r7rj

Answer 2

如文档所述：[disable] 指令将采用您要禁用的日期数组。

例如：

通过函数 return true false（将 Date 对象作为默认参数），它会在加载到 UI 日历中的每个日期触发：

 [disable] = "[functionReturnBool]"

//In the ts:
 functionReturnBool(date){
   //Disable July:
   return date.getMonth() === 6 // july index is 6
 }

按范围：

 [disable] = "[{from: '2025-04-01',
                to: '2025-05-01'},
               {from: '2025-09-01',
                to: '2025-12-01'}]";

按具体日期：

 [disable] = "['2025-03-30', '2025-05-21']"

或将它们全部合并：

 [disable] = "[functionReturnBool, new Date(2019,6,24), '2019-07-25', {from: '2019-07-01', to: '2019-07-08'}]"

如何传递函数以禁用日期

How to pass function to disable dates

typescript

flatpickr

angular