Merge pull request #1270 from XiaoMi/hotfix/#1267

Hotfix/#1267

CHANGELOG.md

@@ -4,9 +4,10 @@
 
 - 修复 `Input` 在受控状态下，设置 value 为 null 时报错问题 [#1246](https://github.com/XiaoMi/hiui/issues/1246)
 - 修复 `Select` 设置 autoload 为 true 时无限的调用接口问题 [#1249](https://github.com/XiaoMi/hiui/issues/1249)
-- 修复 `<Timepicker/>` 弹出层在页面底部未翻转到上方问题 [#1253](https://github.com/XiaoMi/hiui/issues/1253)
-- 优化 `<Timepicker/>` 支持字符串格式的 value [#1245](https://github.com/XiaoMi/hiui/issues/1245)
+- 修复 `Timepicker` 弹出层在页面底部未翻转到上方问题 [#1253](https://github.com/XiaoMi/hiui/issues/1253)
+- 优化 `Timepicker` 支持字符串格式的 value [#1245](https://github.com/XiaoMi/hiui/issues/1245)
 - 修复 `SelectTree` 弹出层在页面底部不能翻转问题 [#1254](https://github.com/XiaoMi/hiui/issues/1254)
+- 修复 `DatePicker` 周范围显示异常问题 [#1267](https://github.com/XiaoMi/hiui/issues/1267)
 - 修复 `SelectTree` data 数据中 Children 为空数组报错问题 [#1261](https://github.com/XiaoMi/hiui/issues/1261)
 - 修复 `Tag` 使用 ref 无效问题 [#1262](https://github.com/XiaoMi/hiui/issues/1262)
 - 修复 `Table` data 为 undefined 时的报错问题 [#1265](https://github.com/XiaoMi/hiui/issues/1265)

components/date-picker/hooks/useCalenderData.js

@@ -3,27 +3,18 @@ import moment from 'moment'
 import { DAY_MILLISECONDS } from '../constants'
 import _ from 'lodash'
 
-const getYearOrMonthRows = ({
-  originDate,
-  renderDate,
-  type,
-  view,
-  range,
-  localeDatas
-}) => {
+const getYearOrMonthRows = ({ originDate, renderDate, type, view, range, localeDatas }) => {
   const _date = renderDate ? moment(renderDate) : moment()
   const start = view === 'year' ? _date.year() - 4 : 0
-  let trs = [[], [], [], []]
+  const trs = [[], [], [], []]
   let num = 0
   const current = moment()
   for (let i = 0; i < 4; i++) {
-    let row = trs[i]
+    const row = trs[i]
     for (let j = 0; j < 3; j++) {
-      let col = row[j] || (row[j] = { type: 'normal' })
+      const col = row[j] || (row[j] = { type: 'normal' })
       const y = start + num
-      view === 'year'
-        ? (col.text = y)
-        : (col.text = localeDatas.datePicker.month[y])
+      view === 'year' ? (col.text = y) : (col.text = localeDatas.datePicker.month[y])
       col.value = y
       num++
       const currentYM = _date[view](y)
@@ -34,8 +25,7 @@ const getYearOrMonthRows = ({
         if (
           range.start &&
           range.end &&
-          (currentYM.isBetween(range.start, range.end) ||
-            currentYM.isBetween(range.end, range.start))
+          (currentYM.isBetween(range.start, range.end) || currentYM.isBetween(range.end, range.start))
         ) {
           col.range = true
         }
@@ -61,54 +51,38 @@ const getTime = (week, y, m) => {
   const t = r.getTime() - week * DAY_MILLISECONDS
   return t
 }
-const getDateRows = ({
-  originDate,
-  range,
-  type,
-  weekOffset,
-  min,
-  max,
-  renderDate,
-  view
-}) => {
+const getDateRows = ({ originDate, range, type, weekOffset, min, max, renderDate, view }) => {
   const rows = [[], [], [], [], [], []]
   const today = moment()
-  let _date = moment(renderDate)
+  const _date = moment(renderDate)
   // *  dayCount: 当月天数
   // *  lastMonthDayCount: 上月总天数
   // *  firstDayWeek: 当月第一天是周几
   let firstDayWeek = _date.startOf('month').day() - weekOffset
-  if (firstDayWeek <= 0) {
+  if (firstDayWeek === 0) {
     // 如果为0 代表该月第一天是周日，在日历上需要第二行开始显示
     firstDayWeek = 7
+  } else if (!type.includes('range')) {
+    firstDayWeek = 6
   }
-  const startTimeByCurrentPanel = getTime(
-    firstDayWeek,
-    _date.year(),
-    _date.month() + 1
-  )
+  const startTimeByCurrentPanel = getTime(firstDayWeek, _date.year(), _date.month() + 1)
   const dayCount = _date.daysInMonth()
-  const lastMonthDayCount = moment(_date)
-    .subtract(1, 'months')
-    .daysInMonth()
+  const lastMonthDayCount = moment(_date).subtract(1, 'months').daysInMonth()
   let count = 0
   for (let i = 0; i < 6; i++) {
-    let row = rows[i]
+    const row = rows[i]
     for (let j = 0; j < 7; j++) {
-      let col =
+      const col =
         row[j] ||
         (row[j] = {
           type: 'normal',
           range: false,
           rangeStart: false,
           rangeEnd: false
         })
-      const currentTime = moment(
-        startTimeByCurrentPanel + DAY_MILLISECONDS * (i * 7 + j)
-      )
+      const currentTime = moment(startTimeByCurrentPanel + DAY_MILLISECONDS * (i * 7 + j))
       let isPN = false // is Prev Or Next Month
-      const isDisabled =
-        currentTime.isBefore(moment(min)) || currentTime.isAfter(moment(max)) // isDisabled cell
+      const isDisabled = currentTime.isBefore(moment(min)) || currentTime.isAfter(moment(max)) // isDisabled cell
       if (i === 0) {
         // 处理第一行的日期数据
         if (j >= firstDayWeek) {
@@ -140,12 +114,10 @@ const getDateRows = ({
         col.type = 'today'
       }
       if (type.includes('range') && !isPN) {
-        if (
-          currentTime.isBetween(range.start, range.end) ||
-          currentTime.isBetween(range.end, range.start)
-        ) {
+        if (currentTime.isBetween(range.start, range.end) || currentTime.isBetween(range.end, range.start)) {
           col.range = true
         }
+
         if (range.start && currentTime.isSame(range.start, 'day')) {
           col.type = 'selected'
           col.range = false
@@ -165,16 +137,9 @@ const getDateRows = ({
         row.weekNum = weekNum
         if (originDate) {
           const _d = _.cloneDeep(originDate)
-          const wFirst = moment(_d)
-            .startOf('week')
-            .add(weekOffset, 'days')
-          const wLast = moment(_d)
-            .endOf('week')
-            .add(weekOffset, 'days')
-          if (
-            currentTime.isSame(wFirst, 'day') ||
-            currentTime.isSame(wLast, 'day')
-          ) {
+          const wFirst = moment(_d).startOf('week').add(weekOffset, 'days')
+          const wLast = moment(_d).endOf('week').add(weekOffset, 'days')
+          if (currentTime.isSame(wFirst, 'day') || currentTime.isSame(wLast, 'day')) {
             col.type = 'selected'
             continue
           }
@@ -188,40 +153,29 @@ const getDateRows = ({
   }
   return rows
 }
-const useDate = ({
-  view,
-  date,
-  originDate,
-  weekOffset,
-  localeDatas,
-  range,
-  type,
-  min,
-  max,
-  renderDate
-}) => {
+const useDate = ({ view, date, originDate, weekOffset, localeDatas, range, type, min, max, renderDate }) => {
   const [rows, setRows] = useState([])
   useEffect(() => {
     const _rows =
       view.includes('month') || view.includes('year')
         ? getYearOrMonthRows({
-          originDate,
-          renderDate,
-          type,
-          view,
-          localeDatas,
-          range
-        })
+            originDate,
+            renderDate,
+            type,
+            view,
+            localeDatas,
+            range
+          })
         : getDateRows({
-          originDate,
-          range,
-          type,
-          weekOffset,
-          min,
-          max,
-          renderDate,
-          view
-        })
+            originDate,
+            range,
+            type,
+            weekOffset,
+            min,
+            max,
+            renderDate,
+            view
+          })
     setRows(_rows)
   }, [renderDate, view, range])
 

components/date-picker/hooks/useDate.js

@@ -7,6 +7,12 @@ const parseValue = (value, type, format) => {
   const _value = moment(value)
   const isValid = moment(value).isValid()
   if (value && typeof value === 'object' && type.includes('range')) {
+    if (type === 'weekrange') {
+      return [
+        value.start ? moment(value.start).startOf('week') : null,
+        value.end ? moment(value.end).endOf('week') : null
+      ]
+    }
     return [value.start ? moment(value.start, format) : null, value.end ? moment(value.end, format) : null]
   }
   return [isValid ? _value : null]
@@ -22,7 +28,6 @@ const useDate = ({ value, defaultValue, cacheDate, type, format }) => {
     setOutDate(d)
     cacheDate.current = d
   }, [value])
-
   return [outDate, changeOutDate]
 }