minhkydesignmobile

一个轻量级、移动端友好的 React UI 组件库。

✨ 特性

• 📱 移动端优化 - 专为移动端设计的交互体验
• 🎨 高度可定制 - 支持 className 和内联颜色自定义
• 🔒 数据校验 - 内置数据校验逻辑
• 📦 按需加载 - 支持按需导入，减小包体积
• 💪 TypeScript - 完整的类型定义
• 🌈 丰富组件 - 持续添加更多组件

📦 安装

npm install minhkydesignmobile

或使用 yarn:

yarn add minhkydesignmobile

或使用 pnpm:

pnpm add minhkydesignmobile

📚 组件列表

目前已包含以下组件：

Picker 选择器系列

• DatePicker - 日期/时间选择器
  • 支持年/月/日/时/分/秒多种精度
  • 触摸滑动选择
  • 惯性滚动效果
• DateRangePicker - 日期区间选择器
  • 开始/结束时间选择
  • 强制时间范围校验
  • 输入框样式

🚀 快速开始

方式1：从主包导入（推荐）

import { DatePicker, DateRangePicker } from 'minhkydesignmobile';
import 'minhkydesignmobile/style.css';

📖 使用示例

DatePicker - 单个日期选择器

import { useState } from 'react';
import { DatePicker } from 'minhkydesignmobile';

function App() {
  const [visible, setVisible] = useState(false);
  const [date, setDate] = useState(new Date());

  return (
    <>
      <button onClick={() => setVisible(true)}>
        选择日期: {date.toLocaleDateString()}
      </button>
      
      <DatePicker
        visible={visible}
        value={date}
        onClose={() => setVisible(false)}
        onConfirm={(date) => {
          setDate(date);
          setVisible(false);
        }}
        title="选择日期"
        precision="day"
      />
    </>
  );
}

DateRangePicker - 时间区间选择器

import { useState } from 'react';
import { DateRangePicker, DateRange } from 'minhkydesignmobile';

function App() {
  const [dateRange, setDateRange] = useState<DateRange | undefined>();

  return (
    <DateRangePicker
      value={dateRange}
      onChange={setDateRange}
      startPlaceholder="开始日期"
      endPlaceholder="结束日期"
      precision="day"
    />
  );
}

📖 API 文档

DatePicker Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | visible | boolean | - | 是否显示选择器 | | value | Date | new Date() | 当前选中的日期 | | onClose | () => void | - | 关闭回调 | | onConfirm | (date: Date) => void | - | 确认选择回调 | | title | string | '选择时间' | 标题 | | min | Date | new Date(1900, 0, 1) | 最小可选日期 | | max | Date | new Date(2100, 11, 31) | 最大可选日期 | | precision | PrecisionType | 'day' | 精度 | | className | string | '' | 自定义类名 | | classNames | object | {} | 细粒度控制类名 |

DateRangePicker Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | DateRange | - | 时间区间 | | onChange | (range: DateRange) => void | - | 变化回调 | | title | string | - | 标题 | | startPlaceholder | string | '开始日期' | 开始占位符 | | endPlaceholder | string | '结束日期' | 结束占位符 | | precision | PrecisionType | 'day' | 精度 | | min | Date | - | 最小日期 | | max | Date | - | 最大日期 | | className | string | '' | 自定义类名 | | separatorText | string | '-' | 分隔符 |

PrecisionType

type PrecisionType = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';

DateRange

interface DateRange {
  start: Date;
  end: Date;
}

🎨 样式自定义

使用 className

<DatePicker
  className="my-custom-picker"
  classNames={{
    mask: "custom-mask",
    header: "custom-header",
    confirmBtn: "custom-confirm"
  }}
  {...props}
/>

.my-custom-picker {
  border-radius: 20px 20px 0 0;
}

.custom-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.custom-confirm {
  color: #fff;
}