Merge pull request #1599 from XiaoMi/feature/#1592

feat: #1592
XiaoMi · Feb 23, 2021 · 76a1eb2 · 76a1eb2
2 parents 5f423de + 310c5f4
commit 76a1eb2
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 2.15.8
 - 修复 `<Select />` 受控模式的异步多选, 多次搜索值覆盖问题[#1597](https://github.com/XiaoMi/hiui/issues/1597)
+- 新增 `<DatePicker />` onSelect 选择日期的回调函数 [#1592](https://github.com/XiaoMi/hiui/issues/1592)
 ## 2.15.7
 
 - 新增 `Transfer` 组件 render 自定义菜单渲染函数 [#1575](https://github.com/XiaoMi/hiui/issues/1575)

diff --git a/components/date-picker/BasePicker.js b/components/date-picker/BasePicker.js
@@ -8,6 +8,8 @@ import PropTypes from 'prop-types'
 import DatePickerType from './Type'
 
 import { dateFormat, isValid, startOfWeek, endOfWeek, parse, compatibleToDate, compatibleFormatString, toDate } from './dateUtil'
+function noop () {}
+
 class BasePicker extends Component {
   constructor (props) {
     super(props)
@@ -466,6 +468,7 @@ BasePicker.defaultProps = {
   showWeekNumber: true,
   weekOffset: 0,
   timeInterval: 240,
-  clearable: true
+  clearable: true,
+  onSelect: noop
 }
 export default BasePicker
diff --git a/components/date-picker/Calender.js b/components/date-picker/Calender.js
@@ -144,7 +144,7 @@ class Calender extends Component {
     }
   }
   handlerClick (e) {
-    const {onPick, date, type, range} = this.props
+    const {onPick, date, type, range, onSelect} = this.props
     let { year, month, day, hours, minutes, seconds } = deconstructDate(date)
 
     const td = e.target
@@ -176,16 +176,20 @@ class Calender extends Component {
       if (range.selecting) {
         if (range.startDate > newDate) {
           range.selecting = false
+          onSelect(newDate, true)
           onPick(newDate, range.startDate)
         } else {
           range.selecting = false
+          onSelect(newDate, true)
           onPick(range.startDate, newDate)
         }
       } else {
         range.selecting = true
+        onSelect(newDate, false)
         onPick(newDate, null)
       }
     } else {
+      onSelect(newDate, true)
       onPick(newDate)
     }
   }

diff --git a/components/date-picker/DatePanel.js b/components/date-picker/DatePanel.js
@@ -228,7 +228,7 @@ class DatePanel extends Component {
   }
   _getNormalComponent () {
     const { currentView } = this.state
-    const { min, max, weekOffset, disabledDate, showLunar, altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData } = this.props
+    const { min, max, weekOffset, disabledDate, showLunar, altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, onSelect } = this.props
     const {staticDate} = this.state
     const validDate = getValidDate(staticDate)
     const { year, month } = deconstructDate(validDate)
@@ -243,6 +243,7 @@ class DatePanel extends Component {
             altCalendarPresetData={altCalendarPresetData}
             dateMarkPresetData={dateMarkPresetData}
             altCalendar={altCalendar}
+            onSelect={onSelect}
             altCalendarPreset={altCalendarPreset}
             dateMarkRender={dateMarkRender}
             dateMarkPreset={dateMarkPreset}
@@ -266,6 +267,7 @@ class DatePanel extends Component {
             altCalendar={altCalendar}
             altCalendarPreset={altCalendarPreset}
             dateMarkRender={dateMarkRender}
+            onSelect={onSelect}
             dateMarkPreset={dateMarkPreset}
             showLunar={showLunar}
             date={validDate}
@@ -285,6 +287,7 @@ class DatePanel extends Component {
             altCalendarPreset={altCalendarPreset}
             dateMarkRender={dateMarkRender}
             dateMarkPreset={dateMarkPreset}
+            onSelect={onSelect}
             showLunar={showLunar}
             date={validDate}
             data={monthData}

diff --git a/components/date-picker/DateRangePanel.js b/components/date-picker/DateRangePanel.js
@@ -277,7 +277,7 @@ class DateRangePanel extends Component {
   }
   _getNormalComponent (date, flag) {
     let { minDate, maxDate, range, layout } = this.state
-    const { altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, type, disabledDate, weekOffset } = this.props
+    const { altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, type, disabledDate, weekOffset, onSelect } = this.props
     let component = null
     const { year, month } = deconstructDate(date)
     switch (layout[flag]) {
@@ -292,6 +292,7 @@ class DateRangePanel extends Component {
             date={date}
             weekOffset={weekOffset}
             data={yearData}
+            onSelect={onSelect}
             type={layout[flag]}
             onPick={this.yearPick.bind(this, flag)}
           />
@@ -304,6 +305,7 @@ class DateRangePanel extends Component {
             altCalendarPresetData={altCalendarPresetData}
             dateMarkPresetData={dateMarkPresetData}
             altCalendar={altCalendar}
+            onSelect={onSelect}
             altCalendarPreset={altCalendarPreset}
             dateMarkRender={dateMarkRender}
             dateMarkPreset={dateMarkPreset}
@@ -325,6 +327,7 @@ class DateRangePanel extends Component {
             dateMarkRender={dateMarkRender}
             dateMarkPreset={dateMarkPreset}
             date={date}
+            onSelect={onSelect}
             range={range}
             type={type}
             minDate={minDate}

diff --git a/components/date-picker/WeekRangePanel.js b/components/date-picker/WeekRangePanel.js
@@ -195,7 +195,7 @@ export default class WeekRangePanel extends Component {
   }
   _getNormalComponent (date, flag) {
     let { range, layout } = this.state
-    const { altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, max: maxDate, min: minDate, weekOffset } = this.props
+    const { altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, max: maxDate, min: minDate, weekOffset, onSelect } = this.props
 
     let component = null
     const { year, month } = deconstructDate(date)
@@ -210,6 +210,7 @@ export default class WeekRangePanel extends Component {
             altCalendarPreset={altCalendarPreset}
             dateMarkRender={dateMarkRender}
             dateMarkPreset={dateMarkPreset}
+            onSelect={onSelect}
             weekOffset={weekOffset}
             date={date}
             data={yearData}
@@ -230,6 +231,7 @@ export default class WeekRangePanel extends Component {
             dateMarkPreset={dateMarkPreset}
             weekOffset={weekOffset}
             date={date}
+            onSelect={onSelect}
             data={monthData}
             type={layout[flag]}
             onPick={this.monthPick.bind(this, flag)}
@@ -245,6 +247,7 @@ export default class WeekRangePanel extends Component {
             minDate={minDate}
             maxDate={maxDate}
             weekOffset={weekOffset}
+            onSelect={onSelect}
             onPick={this.pick.bind(this)}
             mouseMove={this.onMouseMoveHandler.bind(this)}
           />

diff --git a/components/date-picker/YMRangePanel.js b/components/date-picker/YMRangePanel.js
@@ -172,7 +172,7 @@ class YMRangePanel extends Component {
   }
   _getNormalComponent (date, flag) {
     let { range } = this.state
-    const { altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, type } = this.props
+    const { altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, type, onSelect } = this.props
     let component = null
     const { year } = deconstructDate(date)
     switch (type) {
@@ -189,6 +189,7 @@ class YMRangePanel extends Component {
             data={yearData}
             type={'yearrange'}
             onPick={this.pick.bind(this)}
+            onSelect={onSelect}
             mouseMove={this.onMouseMoveHandler.bind(this)}
           />
         )
@@ -198,6 +199,7 @@ class YMRangePanel extends Component {
         component = (
           <Calender
             range={range}
+            onSelect={onSelect}
             altCalendarPresetData={altCalendarPresetData}
             dateMarkPresetData={dateMarkPresetData}
             altCalendar={altCalendar}

diff --git a/docs/demo/date-picker/section-scope.jsx b/docs/demo/date-picker/section-scope.jsx
@@ -3,7 +3,7 @@ import DocViewer from '../../../libs/doc-viewer'
 import DatePicker from '../../../components/date-picker'
 const prefix = 'date-picker-scope'
 const desc = '以天、周、月、年等粒度展示一个时间的范围'
-const rightOptions = ['日期', '年份', '月份', '周', '日期时间']
+const rightOptions = ['日期', '年份', '月份', '周', '日期时间', '动态限制日期范围']
 const code = [
   {
     code: `import React from 'react'
@@ -125,6 +125,45 @@ class Demo extends React.Component {
   }
 }`,
     opt: ['日期时间']
+  },
+  {
+    code: `import React from 'react'
+import DatePicker from '@hi-ui/hiui/es/date-picker'\n
+class Demo extends React.Component {
+  constructor() {
+    super()
+    this.state={
+      selectDate: ''
+    }
+  }
+  render () {
+    const { selectDate } = this.state
+    return (
+      <div style={{display:'flex', flexWrap: 'wrap'}}>
+        <DatePicker
+          type='daterange'
+          disabledDate={(val)=>{
+            if(selectDate){
+              const timestampCurrent = new Date(val).getTime()
+              const timestampSelect = new Date(selectDate).getTime()
+              const range = 7 * 24 * 60 * 60 * 1000
+              return !(timestampSelect - range < timestampCurrent && timestampCurrent < timestampSelect + range)
+            }
+            return false
+          }}
+          onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
+          onSelect={(val, isCompleted)=>{
+            console.log(val, isCompleted)
+            this.setState({
+              selectDate: isCompleted ? '' : val
+            })
+          }}
+        />
+      </div>
+    )
+  }
+}`,
+    opt: ['动态限制日期范围']
   }
 ]
 const DemoScopeBan = () => (

diff --git a/docs/zh-CN/components/date-picker.mdx b/docs/zh-CN/components/date-picker.mdx
@@ -61,6 +61,7 @@ import DemoCalendar from '../../demo/date-picker/section-calendar.jsx'
 | shortcuts         | 快捷面板                                 | string[]                                                         | 近一周, 近一月, 近三月, 近半年, 近一年                                                                                                                                                               | null        |
 | weekOffset        | 周起始，默认周日做为第一列               | number                                                           | 0 \| 1                                                                                                                                                                                               | 0           |
 | placeholder       | 自定义占位符（数组用于范围日期）         | string \| string[]                                               | -                                                                                                                                                                                                    | -           |
+| onSelect          | 选择日期的回调函数                      | (data:Date, isCompleted?: 是否选择完成，仅在范围选择下有效) => void                                            | -                                                                                                                                                                                                    | -           |
 | onChange          | 值变化时的回调函数                       | (date: Date \| DateRange, dateStr: string \| DateRange ) => void | -                                                                                                                                                                                                    | -           |
 | altCalendar       | 自定义日期中历法展示信息                 | CalendarItem                                                     | -                                                                                                                                                                                                    | 农历 & 假日 |
 | altCalendarPreset | 预置历法信息（支持中国农历和印度节假日） | string                                                           | 'zh-CN' \| 'id-ID'                                                                                                                                                                                   | 'zh-CN'     |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/hiui",
-  "version": "2.15.7",
+  "version": "2.15.8",
   "description": "HIUI for React",
   "scripts": {
     "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",