#### 属性 | 属性名称 | 说明 | 默认值 | 数据类型 | | --------------------- | ------------------------------------------------------------ | ------ | ----------- | | altFormat | 与日期格式属性dateFormat一样,但是用于输入框展示的数据格式 | F j,Y | String | | altInput | 向用户创建并展示一个可读的日期元素(隐藏原始的日期元素),并且展示为altFormat配置的格式 | false | Boolean | | altInputClass | 这个样式将会添加到新创建的日期元素(此时原始的日期元素是隐藏的)上,并且新创建的元素会继承原始的日期元素的样式 | "" | String | | allowInput | 是否允许用户在日期输入框手动输入日期 | false | Boolean | | appendTo | 不是body元素,而是添加到指定的节点元素上 | null | HTMLElement | | ariaDateFormat | 定义如何在日期中的aria-label中使用与dateformat相同的标记格式化日期。如果你更改这个值，你应该选择一个值，如果屏幕阅读器大声读出它，这个值将是有意义的 | F j,Y | String | | clickOpens | 单击输入框是否打开日期弹框,如果你希望通过open()方法手动打开日期弹窗,可以禁用此功能 | true | Boolean | | dateFormat | 输入框展示的日期的格式 | Y-m-d | String | | defaultDate | 设置初始选定日期。如果使用的mode：“multiple”或range日期，则需要提供日期对象或者一个日期数组并且按照dateFormat属性配置的格式。否则，可以提供单个日期对象或日期字符串。 | null | String | | defaultHour | 小时日期元素的初始值 | 12 | Number | | defaultMinute | 分钟日期元素的初始值 | 0 | Number | | disable | 1.禁用多个日期时:config:{disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9) ],dateFormat: "Y-m-d"},2.禁用的类型为多个范围时:config:{dateFormat: "Y-m-d", disable: [{from: "2025-04-01", to: "2025-05-01"},{from: "2025-09-01",to: "2025-12-01"}]}3.通过方法来禁用日期:config:{"disable": [ function(date) {return (date.getDay() === 5;}]},配置的方法必须返回一个Boolean类型的值,方法的参数是每一个日期对象 | [] | Array | | disableMobile | 当前运行环境为移动端浏览器时,会自动启用系统本机的日期控件,如果需要使用该日期组件的功能,所以需要设置disableMobile为true | false | Boolean | | enable | 同disable的设置一样,只需要把配置的属性改成enable即可 | [] | Array | | enableTime | 启用时间选择器(时:分:秒) | false | Boolean | | enableSeconds | 启用时间选择器的秒 | false | Boolean | | formatDate | 允许使用函数来构建自定义的日期格式,以此来取代dateFormat,altFormat | null | Function | | hourIncrement | 上下箭头调整小时日期的的步进值 | 1 | Integer | | inline | 以内联方式显示日期面板,不会有关闭功能 | false | Boolean | | maxDate | 最大可选日期 | null | String/Date | | minDate | 最小可选日期 | null | String/Date | | minuteIncrement | 上下箭头调整分钟日期的的步进值 | 5 | Integer | | mode | 日期选择的模式:1."single"(单选),2."multiple"(多选),3.range(范围选择) | single | String | | nextArrow | 用于选择下一个月份的箭头图标 | > | String | | noCalendar | 隐藏日期天的操作面板 | false | Boolean | | onChange | 每一次日期改变触发的回调事件,具体参数操作下面onChange事件说明 | null | Function | | onClose | 每一次日期组件面板关闭的时候触发的回调事件,具体参数操作下面onClose事件说明 | null | Function | | onOpen | 每一次日期组件面板打开的时候触发的回调事件,具体参数操作下面onOpen事件说明 | null | Function | | onReady | 每一次日期组件加载完成的时候触发的回调事件,具体参数操作下面onReady事件说明 | null | Function | | parseDate | 接收一个日期类型的子浮窗,返回一个日期对象 | false | Function | | prevArrow | 用于选择上一个月份的箭头图标 | < | String | | shorthandCurrentMonth | 当前月份英文民名称的简写 | false | Boolean | | time_24hr | 当前的日期面板使用的日期模式是24制的 | false | Boolean | | weekNumbers | 启用周数在日期面板中显示 | false | Boolean | | wrap | 自定义和输入框同组 | false | Boolean | #### 事件 | 事件名称 | 说明 | 参数 | | --------------- | --------------------------------------------------- | ------------------------------ | | `onChange` | 当用户选择一个日期或用户改变当前日期时触发 | selectedDates,dateStr,instance | | `onOpen` | 当日期面板打开时触发 | selectedDates,dateStr,instance | | `onClose` | 当日期面板关闭时触发 | selectedDates,dateStr,instance | | `onMonthChange` | 当用户或者通过代码改变月份时触发 | selectedDates,dateStr,instance | | `onYearChange` | 当用户或者通过代码改变年份时触发 | selectedDates,dateStr,instance | | `onReady` | 当日期组件加载完毕时触发一次 | | | `onValueUpdate` | 当日期的输入框更新时,同时产生一个新的日期字符串触发 | | | `onDayCreate` | 每一个日期天都会有的一个钩子 | dObj, dStr, fp, dayElem | ##### 方法参数说明: selectedDates: ​ 释意:存储用户选择的日期,当没有选择任何日期时,是一个空数组 ​ 类型:Array dateStr: ​ 释意:当前用户最后选择的日期对象通过dateFormat属性格式化后的日期字符串 ​ 类型:String instance: ​ 释意:日期组件对象,包含各种方法和属性 类型:Object

想了解更多更详细的信息请跳转至: flatpickr日期组件官方网站