README.md · TY RN鸿蒙化团队/ty-react-native-datepicker

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>@tuya-oh/react-native-datepicker</code> </h1>
</p>
<p align="center">
    <a href="https://github.com/xgfe/react-native-datepicker">
        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://github.com/xgfe/react-native-datepicker/blob/master/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>

> [!TIP] [Gitee 地址](https://gitee.com/rn-mi/ty-react-native-datepicker)

## 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：[@tuya-oh/react-native-datepicker Releases](https://gitee.com/rn-mi/ty-react-native-datepicker/releases) 。对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。

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

#### **npm**

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

#### **yarn**

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

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

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

```javascript
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](http://momentjs.com/)。默认值根据模式变化。                                                                                                                                                                                        | `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](http://momentjs.com/)格式化的新日期和时间。                                                                                                                                            | `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 的[手势响应系统](https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle)的回调为`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)](https://github.com/react-native-maps/react-native-maps/blob/master/LICENSE) ，请自由地享受和参与开源。

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

简介

发行版 (1)

贡献者

语言

近期动态

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

简介

发行版 (1)

贡献者

语言

近期动态

搜索帮助

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