@kordar/easyui-datepicker

基于 flatpickr 与 rc-easyui 的日期选择封装，提供一个可插拔的 TextBox 日期输入组件，以及轻量的 flatpickr 初始化/销毁工具方法。

安装

npm install @kordar/easyui-datepicker flatpickr rc-easyui moment

快速上手（组件）

import React from 'react'
import { DatepickerBox } from '@kordar/easyui-datepicker'

export default function Demo() {
  return (
    <DatepickerBox
      value={new Date()}
      placeholder="请选择日期"
      options={{ dateFormat: 'Y-m-d' }}
      onChange={(dates, str) => console.log(dates, str)}
    />
  )
}

组件 API

export interface DatepickerBoxProps {
  value?: string | Date | Date[]
  options?: Partial<Options>    // flatpickr Options
  editable?: boolean
  placeholder?: string
  showAddon?: boolean           // 是否显示右侧图标（打开/清空）

  onInit?: (instance: FlatpickrInstance | null) => void
  onChange?: (selectedDates: Date[], dateStr: string, instance: FlatpickrInstance) => void
  onClean?: () => void
  onDestroy?: () => void
}

工具方法（flatpickr）

import { initFlatpickrOptions, createFp, cleanFp } from '@kordar/easyui-datepicker'

// 全局默认：只需初始化一次
initFlatpickrOptions({ locale: Mandarin, dateFormat: 'Y-m-d' })

// 局部创建
const fp = createFp({
  input: '#my-input',            // 或 HTMLInputElement
  value: new Date(),
  options: { enableTime: true },
  onChange: (dates, str, inst) => {}
})

// 销毁
cleanFp(fp)

注意事项

• 组件依赖 flatpickr、rc-easyui；样式已内置 flatpickr/dist/flatpickr.min.css，并附带图标字体。
• options 与 flatpickr 官方 Options 类型完全一致，可自由扩展（如时间选择、范围、多选等）。

构建与类型（Monorepo：npm）

在仓库根目录执行：

npm install --legacy-peer-deps
(cd easyui/easyui-datepicker && npm run build)

类型检查（在包目录执行）：

npm exec -- tsc -p tsconfig.json --noEmit