Merge pull request #1607 from XiaoMi/hotfix/#1604-v3

Hotfix/#1604 v3
XiaoMi · Feb 23, 2021 · 51e0ad5 · 51e0ad5
2 parents 030ad63 + 9d12c59
commit 51e0ad5
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,10 @@
 # 更新日志
-## 3.4.1
+## 3.5.0
 
 - 新增 `DatePicker` onSelect 选择日期的回调函数 [#1592](https://github.com/XiaoMi/hiui/issues/1592)
 - 新增 `Transfer` 组件 render 自定义菜单渲染函数 [#1575](https://github.com/XiaoMi/hiui/issues/1575)
 - 修复 `DatePicker` type 为 week 或者 weekrange 时 输入相应格式日期解析错误问题  [#1579](https://github.com/XiaoMi/hiui/issues/1579)
+- 修复 `DatePicker` type 为 timeperiod 时，设置 timeInterval 分钟显示不正确问题  [#1604](https://github.com/XiaoMi/hiui/issues/1604)
 - 修复 `Preview` 图片预览组件，滚轮放大缩小错误 [#1573](https://github.com/XiaoMi/hiui/issues/1573)
 - 修复 `TimePicker` 时间范围选择，为空时无法选择打开弹窗时的当前值 [#1530](https://github.com/XiaoMi/hiui/issues/1530)
 - 修复 `Collapse`  onChange 属性未传入控制台报错问题 [#1580](https://github.com/XiaoMi/hiui/issues/1580)

diff --git a/components/date-picker/components/RangePanel.jsx b/components/date-picker/components/RangePanel.jsx
@@ -151,8 +151,8 @@ const RangePanel = () => {
       const [leftDate] = _.cloneDeep(calRenderDates)
       if (outDate[0]) {
         onPick([
-          moment(leftDate).hour(parseInt(ts1)).minute(0).second(0),
-          moment(leftDate).hour(parseInt(ts2)).minute(0).second(0)
+          moment(leftDate).hour(parseInt(ts1)).minute(moment(ts1, 'HH:mm').format('mm')).second(0),
+          moment(leftDate).hour(parseInt(ts2)).minute(moment(ts2, 'HH:mm').format('mm')).second(0)
         ])
       }
     },

diff --git a/components/date-picker/components/TimePeriodPanel.jsx b/components/date-picker/components/TimePeriodPanel.jsx
@@ -11,22 +11,18 @@ const TimePeriodPanel = ({ date, onTimePeriodPick }) => {
     setPeriodData(getTimePeriodData(timeInterval))
   }, [])
   const getActiveIndex = () => {
-    return timeInterval >= 60
-      ? (date.hour() * 60) / timeInterval
-      : (date.minute() + date.hour() * 60) / timeInterval
+    return timeInterval >= 60 ? (date.hour() * 60) / timeInterval : (date.minute() + date.hour() * 60) / timeInterval
   }
   useEffect(() => {
     setTimeout(() => {
       listEl.current && (listEl.current.scrollTop = getActiveIndex() * 37)
     }, 0)
   }, [])
   return (
-    <div className='hi-datepicker__time-period'>
-      <div className='hi-datepicker__period-header'>
-        {localeDatas.datePicker.timePeriod}
-      </div>
-      <div className='hi-datepicker__period-body'>
-        <ul className='hi-datepicker__period-list' ref={listEl}>
+    <div className="hi-datepicker__time-period">
+      <div className="hi-datepicker__period-header">{localeDatas.datePicker.timePeriod}</div>
+      <div className="hi-datepicker__period-body">
+        <ul className="hi-datepicker__period-list" ref={listEl}>
           {periodData.map((item, index) => {
             const cls = classNames(
               'hi-datepicker__period-item',
@@ -37,7 +33,8 @@ const TimePeriodPanel = ({ date, onTimePeriodPick }) => {
                 className={cls}
                 key={index}
                 onClick={(e) => {
-                  onTimePeriodPick(item.timeStart, item.timeEnd)
+                  const [ts, te] = item.timeStr.split('~')
+                  onTimePeriodPick(ts, te)
                 }}
               >
                 {item.timeStr}

diff --git a/components/date-picker/index.d.ts b/components/date-picker/index.d.ts
@@ -34,6 +34,7 @@ interface DateProps extends CommonProps {
   max?: Date
   maxDate?: Date
   bordered?: boolean
+  timeperiod?: number
   disabledDate?: (currentDate: Date) => boolean
   showTime?: boolean
   shortcuts?: string[] | Shortcuts[]

diff --git a/docs/demo/date-picker/section-scope.jsx b/docs/demo/date-picker/section-scope.jsx
@@ -108,6 +108,7 @@ class Demo extends React.Component {
       <div>
         <DatePicker
           type='timeperiod'
+          timeInterval={30}
           onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
         />
       </div>

diff --git a/docs/zh-CN/components/date-picker.mdx b/docs/zh-CN/components/date-picker.mdx
@@ -60,6 +60,7 @@ import DemoCalendar from '../../demo/date-picker/section-calendar.jsx'
 | disabledDate      | 不可选择的日期(返回true为不可选)                                  | (currentDate: Date) => boolean                            | true \| false                                                                                                                                                                                                    | false       |
 | clearable         | 是否可以清空                                                   | boolean                                                   | true \| false                                                                                                                                                                                                    | true        |
 | showTime          | 是否在日期选择器中显示时间选择器，在使用时请注意 format 的设置 | boolean                                                   | true \| false                                                                                                                                                                                                    | false       |
+| timeInterval      | 时间段的间隔，以分钟为单位     | number                                       | 1 ~ 1440 分钟                                                                                                                                  | 240       |
 | format            | 展示的日期格式，配置参考 [moment.js](http://momentjs.cn/docs/#/displaying/format/) | string                                                   | -                                                                                                                                                                                                   | -       |
 | shortcuts         | 快捷面板                                                       | string[]                                                  | 近一周, 近一月, 近三月, 近一年                                                                                                                                                                                   | null        |
 | weekOffset        | 周起始，默认周日做为第一列(**3.3.0版本后，优化为根据中英文自动设置周起始**)                                     | number                                                    | 0 \| 1                                                                                                                                                                                                           | 0           |