事件 & Hooks

事件

flatpickr具有用于最常见和有用操作的事件Hook。对于每个Hook，您可以指定一个函数或一个函数数组。

实例化之后，可以通过实例的config对象访问所有钩子。在对象内部，所有函数都存储在数组中，因此您需要操纵数组本身以添加或删除函数：

例子: instance.config.onChange.push(function() { } );

调用时，添加到钩子的每个函数将接收3个参数。这些是：

  1. selectedDates - 用户选择的日期对象数组。如果没有选择日期，则该数组为空。

  2. dateStr - 用户最新选择的Date对象的字符串表示形式。字符串按照dateFormat 选项格式设置。

  3. instance - flatpickr对象，包含各种方法和属性。

Hooks（钩子）

onChange

当用户选择日期或更改选定日期的时间时，onChange会被触发。

onOpen

打开日历时会触发onOpen。

onClose

日历关闭时会触发onClose。

onMonthChange

当用户或以编程方式更改月份时，将触发onMonthChange。

onYearChange

当年份更改时（由用户或以编程方式）触发onYearChange。

{
                    onChange: function(selectedDates, dateStr, instance) {
                        //...
                    },
                    onOpen: [
                        function(selectedDates, dateStr, instance){
                            //...
                        },
                        function(selectedDates, dateStr, instance){
                            //...
                        }
                    ],
                    onClose: function(selectedDates, dateStr, instance){
                       // ...
                    }
                }

onReady

一旦日历处于就绪状态，就会触发onReady。

onValueUpdate

当使用新的日期字符串更新输入值时，将触发onValueUpdate。

onDayCreate

onDayCreate()钩子完全控制每个日期单元。

{
                    onDayCreate: function(dObj, dStr, fp, dayElem){
                        // 使用dayElem.dateObj，这是对应的日期
                
                        // 虚拟逻辑
                        if (Math.random() < 0.15)
                            dayElem.innerHTML += "<span class='event'></span>";
                
                        else if (Math.random() > 0.85)
                            dayElem.innerHTML += "<span class='event busy'></span>";
                    }
                }

每一天都有relative 定位，这使我们可以根据需要更轻松地定位指示器。

.event {
                    position: absolute;
                    width: 3px;
                    height: 3px;
                    border-radius: 150px;
                    bottom: 3px;
                    left: calc(50% - 1.5px);
                    content: " ";
                    display: block;
                    background: #3d8eb9;
                }
                .event.busy {
                    background: #f64747;
                }