DatePickerView Standalone

一个独立的 React Native 日期选择器组件，从 ant-design-mobile-rn 中提取。

安装

npm install date-picker-view-standalone

使用方法

基本用法

import React, { useState } from 'react'
import { View, Text } from 'react-native'
import { DatePickerView, LocaleProvider } from 'date-picker-view-standalone'

const App = () => {
  const [date, setDate] = useState(new Date())

  return (
    <LocaleProvider>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>选择的日期: {date.toLocaleDateString()}</Text>
        <DatePickerView
          value={date}
          onChange={setDate}
          mode="datetime"
        />
      </View>
    </LocaleProvider>
  )
}

export default App

自定义本地化

import { DatePickerView, LocaleProvider } from 'date-picker-view-standalone'

const customLocale = {
  year: '年',
  month: '月',
  day: '日',
  hour: '时',
  minute: '分',
  am: '上午',
  pm: '下午',
}

const App = () => {
  return (
    <LocaleProvider locale={{ DatePickerView: customLocale }}>
      <DatePickerView
        value={new Date()}
        onChange={(date) => console.log(date)}
        mode="date"
      />
    </LocaleProvider>
  )
}

API

DatePickerView Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | Date | - | 当前选中的日期 | | onChange | (date: Date) => void | - | 日期改变时的回调函数 | | mode | 'datetime' | 'date' | 'time' | 'month' | 'year' | 'datetime' | 选择器模式 | | minDate | Date | 2000-01-01 | 最小可选日期 | | maxDate | Date | 2030-01-01 | 最大可选日期 | | minuteStep | number | 1 | 分钟步长 | | use12Hours | boolean | false | 是否使用12小时制 | | itemStyle | StyleProp | - | 选项样式 | | style | StyleProp | - | 容器样式 |

LocaleProvider Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | locale | Partial | - | 本地化配置 | | children | React.ReactNode | - | 子组件 |

特性

• 🎯 轻量级，无额外依赖
• 🌍 支持国际化
• 📱 专为 React Native 设计
• 🎨 可自定义样式
• ⚡ 高性能

许可证

MIT