`react-native-datepicker`

模板版本：v0.2.2

`react-native-datepicker`

[!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 });
        }}
      />
    );
  }
}

属性

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) ，请自由地享受和参与开源。

RN鸿蒙化项目团队/ty-react-native-datepicker

`react-native-datepicker`

安装与使用

npm

yarn

属性

API

遗留问题

开源协议

简介

发行版 (1)

贡献者

语言

近期动态

RN鸿蒙化项目团队/ty-react-native-datepicker .gitee-modal { width: 500px !important; }

react-native-datepicker

安装与使用

npm

yarn

属性

API

遗留问题

开源协议

简介

发行版 (1)

贡献者

语言

近期动态

搜索帮助

RN鸿蒙化项目团队/ty-react-native-datepicker

`react-native-datepicker`