mini-programs/src/components/DateTimePicker/README.md

DateTimePicker 年月选择器

一个基于 NutUI 的年月切换弹窗组件，支持自定义年份范围和默认值。

功能特性

• 🎯 年月分别选择，操作简单直观
• 🎨 遵循设计稿样式，美观易用
• 📱 支持移动端手势操作
• ⚙️ 可自定义年份范围
• <EFBFBD><EFBFBD> 基于 NutUI 组件库，稳定可靠

使用方法

import { DateTimePicker } from '@/components'

const MyComponent = () => {
  const [visible, setVisible] = useState(false)

  const handleConfirm = (year: number, month: number) => {
    console.log('选择的年月:', year, month)
    setVisible(false)
  }

  return (
    <DateTimePicker
      visible={visible}
      onClose={() => setVisible(false)}
      onConfirm={handleConfirm}
      defaultYear={2025}
      defaultMonth={11}
      minYear={2020}
      maxYear={2030}
    />
  )
}

API 参数

参数	类型	默认值	说明
visible	boolean	-	是否显示弹窗
onClose	() => void	-	关闭弹窗的回调
onConfirm	(year: number, month: number) => void	-	确认选择的回调
defaultYear	number	当前年份	默认选中的年份
defaultMonth	number	当前月份	默认选中的月份
minYear	number	2020	可选择的最小年份
maxYear	number	2030	可选择的最大年份

样式定制

组件使用 CSS Modules，可以通过修改 index.module.scss 文件来自定义样式。

主要样式类：

• .date-time-picker-popup - 弹窗容器
• .picker-columns - 选择器列容器
• .picker-column - 单列选择器
• .action-buttons - 操作按钮区域

注意事项

1. 组件基于 NutUI 的 Picker 和 Popup 组件
2. 年份范围建议不要设置过大，以免影响性能
3. 月份固定为 1-12 月
4. 组件会自动处理边界情况