From ddf8ab9a570ae469fe868bbee21ad8db29ae0b67 Mon Sep 17 00:00:00 2001
From: Gyzztzj <Gyzztzj@163.com>
Date: Tue, 2 Jul 2024 17:43:19 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20[#IAA058]=20=E6=9B=B4=E6=96=B0react-nat?=
 =?UTF-8?q?ive-community/datetimepicker=E6=8C=87=E5=AF=BC=E6=96=87?=
 =?UTF-8?q?=E6=A1=A30.2.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-native-community-datetimepicker.md  | 54 +++++++++++++------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/zh-cn/react-native-community-datetimepicker.md b/zh-cn/react-native-community-datetimepicker.md
index 8492c217..3d5276cb 100644
--- a/zh-cn/react-native-community-datetimepicker.md
+++ b/zh-cn/react-native-community-datetimepicker.md
@@ -1,5 +1,5 @@
 <!-- {% raw %} -->
-> 模板版本：v0.1.3
+> 模板版本：v0.2.2
 
 <p align="center">
   <h1 align="center"> <code>@react-native-community/datetimepicker</code> </h1>
@@ -17,7 +17,7 @@
 
 ## 安装与使用
 
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/releases)，并下载适用版本的 tgz 包
+请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/datetimepicker Releases](https://github.com/react-native-oh-library/datetimepicker/releases)，并下载适用版本的 tgz 包。
 
 进入到工程目录并输入以下命令：
 
@@ -39,25 +39,27 @@ yarn add @react-native-oh-tpl/datetimepicker@file:#
 
 <!-- tabs:end -->
 
-快速使用：
+下面的代码展示了这个库的基本使用场景：
 
 > [!WARNING] 使用时 import 的库名不变。
 
 ```js
+import React, { useState } from 'react'
 import DateTimePicker from '@react-native-community/datetimepicker';
+import { SafeAreaView, Button, Text } from 'react-native'
 
-export const App = () => {
-  const [date, setDate] = useState(new Date(1598051730000));
+export const MDatetimepicker = () => {
+  const [date, setDate] = useState(new Date(new Date()));
   const [mode, setMode] = useState('date');
   const [show, setShow] = useState(false);
 
-  const onChange = (event, selectedDate) => {
+  const onChange = (event: any, selectedDate: any) => {
     const currentDate = selectedDate;
     setShow(false);
     setDate(currentDate);
   };
 
-  const showMode = (currentMode) => {
+  const showMode = (currentMode: React.SetStateAction<string>) => {
     setShow(true);
     setMode(currentMode);
   };
@@ -71,17 +73,21 @@ export const App = () => {
   };
 
   return (
-     </SafeAreaView>
+    <SafeAreaView>
       <Button onPress={showDatepicker} title="Show date picker!" />
       <Button onPress={showTimepicker} title="Show time picker!" />
       <Text>selected: {date.toLocaleString()}</Text>
       {show && (
         <DateTimePicker
-          testID="dateTimePicker"
-          value={date}
-          mode={mode}
-          is24Hour={true}
-          onChange={onChange}
+          mode={mode}//partially (仅支持 date/time 模式)
+          style={{ width: 180, height: 80, backgroundColor: '#FFFFDD' }}
+          display='default' //partially (支持"default"，"spinner"，"compact"，"inline")
+          onChange={onChange}//partially (仅支持 type 为 set 类型)
+          value={date}//partially (仅 mode=date 且 display=spinner 时支持动态设置)
+          is24Hour={true} 
+          maximumDate={new Date()} //partially (仅支持在 mode=date 且 display=spinner 时设置)
+          minimumDate={new Date()}//partially (仅支持在 mode=date 且 display=spinner 时设置)
+          disabled={true} textColor={'#FFFFFF'}//partially (仅支持在 mode=date 且 display=compact 时设置)
         />
       )}
     </SafeAreaView>
@@ -95,6 +101,19 @@ export const App = () => {
 
 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`
 
+### 在工程根目录的 `oh-package.json` 添加 overrides 字段
+
+
+```json
+{
+  ...
+  "overrides": {
+    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
+  }
+}
+```
+
+
 ### 引入原生端代码
 
 目前有两种方法：
@@ -195,11 +214,10 @@ function buildCustomComponent(ctx: ComponentBuilderContext) {
       buildCustomComponent: buildCustomComponent
     })
   }
-+ else if (ctx.componentName === DATETIME_PICKER_VIEW_TYPE) {
++ if (ctx.componentName === DATETIME_PICKER_VIEW_TYPE) {
 +   RNDateTimePicker({
 +     ctx: ctx.rnComponentContext,
-+     tag: ctx.tag,
-+     buildCustomComponent: buildCustomComponent
++     tag: ctx.tag
 +   })
 + }
  ...
@@ -220,6 +238,8 @@ ohpm install
 
 然后编译、运行即可。
 
+## 约束与限制
+
 ## 兼容性
 
 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
@@ -232,6 +252,8 @@ ohpm install
 
 > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
 
+详情请查看[datetimepicker 官方文档](https://github.com/react-native-datetimepicker/datetimepicker)
+
 | Name        | Description                                                               | Type     | Required | Platform                 | HarmonyOS Support                                          |
 | ----------- | ------------------------------------------------------------------------- | -------- | -------- | ------------------------ | ---------------------------------------------------------- |
 | mode        | Defines the type of the picker                                            | string   | 否       | All                      | partially (仅支持 date/time 模式)                          |
-- 
Gitee