Ver Fonte

docs: update Datepicker turn on timepicker cycle demo

林艳 há 1 ano atrás
pai
commit
ed0d9bff2f

+ 4 - 4
content/input/datepicker/index-en-US.md

@@ -77,7 +77,7 @@ class App extends React.Component {
 ### Date and Time Selection
 
 Set `type` to `dateTime`, can choose date and time.  
-If you want to remove the infinite loop scrolling interaction of TimePicker, you can pass timePickerOpts into a specific configuration to close it.
+Starting from version V2.22.0, we changed the default mode of ScrollItem in TimePicker from wheel to normal. If you want to apply the infinite scrolling effect again, you can enable it by passing in a specific configuration through timePickerOpts.
 
 ```jsx live=true
 import React from 'react';
@@ -91,8 +91,8 @@ class App extends React.Component {
                 <DatePicker type="dateTime" />
                 <br />
                 <br />
-                <h4>Turn off cycled mode</h4>
-                <DatePicker type="dateTime" timePickerOpts={{ scrollItemProps: { cycled: false } }} />
+                <h4>Turn on cycled mode</h4>
+                <DatePicker type="dateTime" timePickerOpts={{ scrollItemProps: { mode: "wheel", cycled: true } }} />
             </>
         );
     }
@@ -1057,7 +1057,7 @@ Multiple dates or times are used by default `","` (English comma) separated.
 ## FAQ
 
 -   **Date time picker, when you choose time, minute and second, you don't want to scroll infinitely. How to achieve the effect?**  
-    This behavior can be controlled by a specific switch in timePickerOpts, timePickerOpts={{scrollItemProps: {cycled: false}}}, and cycled is set to false
+    Starting from version V2.22.0, we changed the default mode of ScrollItem in TimePicker from wheel to normal. If you want to apply the infinite scrolling effect again, you can control this behavior through a specific switch in timePickerOpts, that is, timePickerOpts={{ scrollItemProps: { mode: "wheel", cycled: true } }}.
 
 -   **How to set the default display time when the panel is opened?**  
     You can use the defaultPickerValue property.

+ 5 - 5
content/input/datepicker/index.md

@@ -70,7 +70,7 @@ import { DatePicker } from '@douyinfe/semi-ui';
 ### 日期与时间选择
 
 将 `type` 设定为 `dateTime`,可以选择日期时间。  
-同时,如果希望去掉 TimePicker 的无限循环滚动交互,可以通过 timePickerOpts 传入特定配置关闭
+版本V2.22.0开始,我们将 TimePicker 内的 ScrollItem 的默认模式从 wheel 变更为了 normal, 若想应用回无限滚动的效果,可以通过 timePickerOpts 传入特定配置开启
 
 ```jsx live=true
 import React from 'react';
@@ -82,11 +82,11 @@ import { DatePicker } from '@douyinfe/semi-ui';
         <DatePicker type="dateTime" />
         <br />
         <br />
-        <h4>关闭时间列表无限循环</h4>
+        <h4>开启时间列表无限循环</h4>
         <DatePicker
             type="dateTime"
             timePickerOpts={{
-                scrollItemProps: { cycled: false },
+                scrollItemProps: { mode: "wheel", cycled: true }
             }}
         />
     </>
@@ -1018,8 +1018,8 @@ semi-ui 组件库中采用 [date-fns(v2.9.0)](https://date-fns.org/v2.9.0/docs/G
 
 ## FAQ
 
--   **日期时间选择器,时分秒选择时想要无限滚动效果如何实现?**  
-     可以通过 timePickerOpts 中的特定开关控制该行为, timePickerOpts={{ scrollItemProps: { cycled: false } }} ,cycled 设为 false 即可
+-   **日期时间选择器,时分秒选择时想要无限滚动效果如何实现?**  
+    版本V2.22.0开始,我们将 TimePicker 内的 ScrollItem 的默认模式从 wheel 变更为了 normal, 若想应用回无限滚动的效果,可以通过 timePickerOpts 中的特定开关控制该行为,即 timePickerOpts={{ scrollItemProps: { mode: "wheel", cycled: true } }}。
 
 -   **如何设置面板打开时默认显示的时间?**  
      可通过 defaultPickerValue 属性。