模板版本：v0.2.2

[!TIP] Gitee 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@tuya-oh/react-native-datepicker Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

npm install @tuya-oh/react-native-datepicker

yarn

yarn add @tuya-oh/react-native-datepicker

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

import React, { Component } from "react";
import DatePicker from "react-native-datepicker";

export default class MyDatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = { date: "2016-05-15" };
  }

  render() {
    return (
      <DatePicker
        style={{ width: 200 }}
        date={this.state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2016-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: "absolute",
            left: 0,
            top: 4,
            marginLeft: 0,
          },
          dateInput: {
            marginLeft: 36,
          },
          // ... You can check the source to find the other keys.
        }}
        onDateChange={(date) => {
          this.setState({ date: date });
        }}
      />
    );
  }
}

You can check index.js in the Example for detail.

属性

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------- | ----------- | ----------------- | | style | 指定 DatePicker 的样式，例如：宽度、高度... | object | no | ios/android | yes | | date | 指定 DatePicker 的显示日期。string类型值必须与指定的格式匹配 | string | date | Moment instance | no | ios/android | yes | | mode | The enum of date, datetime and time | enum | no | ios/android | yes | | androidMode | The enum of default, calendar and spinner (only Android) | enum | no | android | yes | | format | 指定日期的显示格式，使用moment.js。默认值根据模式变化。 | string | no | ios/android | yes | | confirmBtnText | 指定 iOS 中确认按钮的文本。 | string | no | ios | no | | cancelBtnText | 指定 iOS 中取消按钮的文本。 | string | no | ios | no | | iconSource | 指定图标。与 Image 的source相同，始终使用require() | {uri: string} | number | no | ios/android | yes | | minDate | 限制可能的日期值范围。 | string | date | no | ios/android | yes | | maxDate | 限制可能的日期值范围。 | string | date | no | ios/android | yes | | duration | 指定日期选择器的动画持续时间。 | number | no | ios/android | yes | | customStyles | 自定义日期选择器样式的钩子，与原生样式相同。dateTouchBody，dateInput... | object | no | ios/android | yes | | showIcon | 控制器是否显示图标 | boolean | no | ios/android | yes | | hideText | 控制器是否显示dateText | boolean | no | ios/android | yes | | iconComponent | 设置自定义图标 | element | no | ios/android | yes | | disabled | 控制器是否禁用选择器 | boolean | no | ios/android | yes | | is24Hour | 设置 TimePicker 的 is24Hour 标志。默认值取决于format。仅在 Android 中有效 | boolean | no | android | yes | | allowFontScaling | 设置为 false 以禁用每个文本组件的字体缩放 | boolean | no | ios/android | yes | | placeholder | 占位符显示当 this.props.date 为假时 | string | no | ios/android | yes | | onDateChange | 这是在用户在 UI 中确认选择的日期或时间时被调用的。唯一的参数是一个日期或时间字符串，表示由具有给定格式属性的moment.js格式化的新日期和时间。 | function | no | ios/android | yes | | onOpenModal | 这是在 DatePicker 模态框打开时被调用的。 | function | no | ios/android | yes | | onCloseModal | 这是在 DatePicker 模态框关闭时被调用 | function | no | ios/android | yes | | onPressMask | 这是在点击 iOS 模态遮罩时调用的 | function | no | ios | no | | modalOnResponderTerminationRequest | 设置 React Native 的手势响应系统的回调为onResponderTerminationRequest。默认情况下，这将拒绝终止请求，但在 Modal 下的视图实现自定义手势响应器，并且您希望在特定情况下覆盖这些响应器的情况下，可以覆盖此默认行为。仅在 iOS 中有效 | function | no | ios | no | | TouchableComponent | 用自定义的 “组件” 替换 “TouchableHighlight”。例如：TouchableOpacity | Component | no | ios/android | yes | | getDateStr | 一个函数用于覆盖如何将日期格式化为用于显示的String，接收一个Date实例 | Function | no | ios/android | yes |

API

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | -------------------- | ---------- | -------- | ----------- | ----------------- | | onPressDate | 手动打开日期选择面板 | function | no | ios/android | yes | | onPressCancel | 手动关闭日期选择面板，类似于按下取消按钮 | function | no | ios/android | yes |

遗留问题

开源协议

本项目基于 MIT License (MIT) ，请自由地享受和参与开源。