# DateTimePicker 年月选择器

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

## 功能特性

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

## 使用方法

```tsx
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. 组件会自动处理边界情况