1

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

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

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

问题：我找不到如何使用这种角度包装的解释，并且像原来的 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;
  }

提前致谢

4

2 回答 2

2

您在代码中犯了错误，您不应该通过函数的执行您应该通过函数定义

代替

<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]">

我分叉了您的闪电战结帐示例：

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

于 2019-07-24T15:15:47.750 回答
1

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

例如：

通过返回 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'}]"
于 2019-07-24T15:33:32.143 回答