fix: 修复周和季度选择器问题

张鹏博 · 张鹏博 · commit 9136372391fa · 2023-08-01T14:16:06.000+08:00
diff --git a/src/components/c-picker/demos/more-picker.md b/src/components/c-picker/demos/more-picker.md
@@ -22,9 +22,9 @@ import {
 
 const {
 	YearPicker,
-	QuarterPicker,
 	MonthPicker,
-	WeekPicker
+	WeekPicker,
+	QuarterPicker
 } = DatePicker;
 
 export default class DatePickerDemo extends React.Component {
@@ -33,7 +33,8 @@ export default class DatePickerDemo extends React.Component {
 		year: 2021,
 		month: '2021/07',
 		monthDay: '06/07',
-		week: '2021/06/07 所在周',
+		week: '2021年 第24周',
+		quarter: '2021年 Q3',
 	}
 
 	onYearChange = year => {
@@ -51,13 +52,18 @@ export default class DatePickerDemo extends React.Component {
 		this.setState({ week });
 	}
 
+	onQuarterChange = quarter => {
+		console.log('quarter:', quarter);
+		this.setState({ quarter });
+	}
+
 	onMonthDayChange = monthDay => {
 		console.log('monthDay:', monthDay);
 		this.setState({ monthDay });
 	}
 
 	render() {
-		const { year, month, week, monthDay, disabled } = this.state;
+		const { year, month, week, quarter, monthDay, disabled } = this.state;
 		const { init } = this.field;
 		return (
 			<Form field={this.field} layout="horizontal" labelAlign="left" labelCol={{ span: 8 }}>
@@ -96,12 +102,21 @@ export default class DatePickerDemo extends React.Component {
 						onChange={this.onWeekChange}
 						disabled={disabled}
 						allowClear
-					  format="yyyy/MM/DD 所在周"
 						minYear={2020}
 						maxYear={2025}
 						presets={[{ label: '上周', value: () => moment().clone().subtract(1, 'weeks').startOf('week') }]}
 					/>
 				</Form.Item>
+				<Form.Item label="季度选择器">
+					<QuarterPicker
+						value={quarter}
+						onChange={this.onQuarterChange}
+						disabled={disabled}
+						allowClear
+						minYear={2020}
+						maxYear={2025}
+					/>
+				</Form.Item>
 				<Form.Item label="实现【月-日】选择">
 					<DatePicker
 					 	value={monthDay}
diff --git a/src/components/c-picker/formats.js b/src/components/c-picker/formats.js
@@ -1,6 +1,7 @@
 export const dateFormat = 'yyyy/MM/DD';
 export const timeFormat = 'HH:mm:ss';
 export const dateTimeFormat = 'yyyy/MM/DD HH:mm:ss';
-export const weekFormat = 'yyyy年 第W周';
+export const weekFormat = 'YYYY年 第w周';
 export const monthFormat = 'yyyy/MM';
+export const quarterFormat = 'yyyy年 [Q]Q';
 export const yearFormat = 'yyyy年';
diff --git a/src/components/c-picker/generator/range.js b/src/components/c-picker/generator/range.js
@@ -18,7 +18,7 @@ export default function generateRangePicker(generateConfig) {
         moment.locale('zh-cn', {
           week: {
             dow: 1,
-            day: 7,
+            doy: 4,
           },
         });
       }
diff --git a/src/components/c-picker/generator/single.js b/src/components/c-picker/generator/single.js
@@ -18,7 +18,7 @@ export default function generateSinglePicker(generateConfig) {
         moment.locale('zh-cn', {
           week: {
             dow: 1,
-            day: 7,
+            doy: 4,
           },
         });
       }
diff --git a/src/components/c-picker/index.js b/src/components/c-picker/index.js
@@ -3,6 +3,7 @@ import TimePicker from './pickers/time';
 import YearPicker from './pickers/year';
 import MonthPicker from './pickers/month';
 import WeekPicker from './pickers/week';
+import QuarterPicker from './pickers/quarter';
 import DateRangePicker from './pickers/date-range';
 import TimeRangePicker from './pickers/time-range';
 import './index.less';
@@ -13,6 +14,7 @@ CPicker.TimePicker = TimePicker;
 CPicker.YearPicker = YearPicker;
 CPicker.MonthPicker = MonthPicker;
 CPicker.WeekPicker = WeekPicker;
+CPicker.QuarterPicker = QuarterPicker;
 CPicker.RangePicker = DateRangePicker;
 CPicker.TimeRangePicker = TimeRangePicker;
 
diff --git a/src/components/c-picker/pickers/quarter.js b/src/components/c-picker/pickers/quarter.js
@@ -0,0 +1,149 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import moment from 'moment';
+import momentGenerateConfig from 'rc-picker/lib/generate/moment';
+import generatePicker from '../generator';
+import { quarterFormat } from '../formats';
+
+const { QuarterPicker: Picker } = generatePicker(momentGenerateConfig);
+
+const QuarterPicker = ({
+  size,
+  className,
+  dropdownClassName, // New
+  disabled,
+  defaultValue: _defaultValue,
+  value: _value,
+  open,
+  onOpenChange, // New
+  placeholder,
+  width,
+  minYear,
+  maxYear,
+  format: _format,
+  onChange,
+  getPopupContainer: _getPopupContainer, // New
+  isAppendToBody,
+  canEdit = true,
+  style,
+  showToday,
+  disabledDate: _disabledDate,
+  renderExtraFooter,
+  autoFocus,
+  allowClear,
+  onFocus,
+  onBlur,
+  onMouseDown,
+  onMouseUp,
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+  onContextMenu,
+  onKeyDown,
+  onSelect,
+  onPanelChange,
+  presets,
+}) => {
+  const [value, setValue] = useState();
+  const format = _format || quarterFormat;
+
+  useEffect(() => {
+    setValue(_value && moment(_value, format));
+  }, [_value, format]);
+
+  const handleChange = useCallback(
+    (m) => {
+      if (onChange) {
+        onChange(m && m.clone().format(format));
+      } else {
+        setValue(m);
+      }
+    },
+    [onChange, format],
+  );
+
+  const handleSelect = useCallback(
+    (m) => {
+      if (onSelect) {
+        onSelect(m && m.clone().format(format));
+      }
+    },
+    [onSelect, format],
+  );
+
+  const handlePanelChange = useCallback(
+    (val, mode) => {
+      if (onPanelChange) {
+        onPanelChange(val && val.clone().format(format), mode);
+      }
+    },
+    [onPanelChange, format],
+  );
+
+  const getPopupContainer = useMemo(() => {
+    if (_getPopupContainer) {
+      return _getPopupContainer;
+    }
+    if (!isAppendToBody) {
+      return () => document.body;
+    }
+    return undefined;
+  }, [_getPopupContainer, isAppendToBody]);
+
+  const getDisabledDate = useCallback(
+    (d) => {
+      const current = d.clone();
+      return (minYear && current.year() < minYear) || (maxYear && current.year() > maxYear);
+    },
+    [format, minYear, maxYear],
+  );
+
+  const handleGetDisabledDate = useCallback(
+    (m) => {
+      if (_disabledDate) {
+        return _disabledDate(m && m.clone().format(format));
+      }
+      return getDisabledDate(m);
+    },
+    [_disabledDate, getDisabledDate, format],
+  );
+
+  return (
+    <Picker
+      size={size}
+      style={{ width, ...style }}
+      defaultValue={_defaultValue && moment().year(Number(_defaultValue))}
+      onChange={handleChange}
+      onSelect={handleSelect}
+      onPanelChange={handlePanelChange}
+      inputReadOnly={!canEdit}
+      getPopupContainer={getPopupContainer}
+      disabledDate={handleGetDisabledDate}
+      {...{
+        className,
+        dropdownClassName,
+        format,
+        value,
+        disabled,
+        open,
+        placeholder,
+        showToday,
+        renderExtraFooter,
+        autoFocus,
+        allowClear,
+        onFocus,
+        onBlur,
+        onOpenChange,
+        onMouseDown,
+        onMouseUp,
+        onMouseEnter,
+        onMouseLeave,
+        onClick,
+        onContextMenu,
+        onKeyDown,
+        presets,
+      }}
+    />
+  );
+};
+
+export default QuarterPicker;
diff --git a/src/components/c-picker/pickers/week.js b/src/components/c-picker/pickers/week.js
@@ -53,7 +53,7 @@ const WeekPicker = ({
   const handleChange = useCallback(
     (m) => {
       if (onChange) {
-        onChange(m && m.clone().format(format));
+        onChange(m && m.clone().startOf('week').format(format));
       } else {
         setValue(m);
       }
@@ -94,7 +94,7 @@ const WeekPicker = ({
       const current = d.clone();
       return (minYear && current.year() < minYear) || (maxYear && current.year() > maxYear);
     },
-    [format, minYear, maxYear],
+    [minYear, maxYear],
   );
 
   const handleGetDisabledDate = useCallback(
diff --git a/src/locale/zh_CN.js b/src/locale/zh_CN.js
@@ -25,7 +25,7 @@ const locale = {
     dayFormat: 'D日',
     monthFormat: 'M月',
     dateFormat: 'YYYY/MM/DD',
-    weekFormat: 'YYYY年 第wo周',
+    weekFormat: 'YYYY年 第w周',
     dateTimeFormat: 'YYYY/MM/DD HH:mm:ss',
     previousYear: '上一年',
     nextYear: '下一年',
@@ -48,7 +48,7 @@ const locale = {
     // quarterRangePlaceholder: ['开始季度', '结束季度'],
   },
   dateFormat: 'YYYY/MM/DD',
-  weekFormat: 'YYYY年 第wo周',
+  weekFormat: 'YYYY年 第w周',
   monthFormat: 'YYYY/MM',
   yearFormat: 'YYYY年',
   dateTimeFormat: 'YYYY/MM/DD HH:mm:ss',

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export default function generateRangePicker(generateConfig) {`
`18`	`18`	`moment.locale('zh-cn', {`
`19`	`19`	`week: {`
`20`	`20`	`dow: 1,`
`21`		`- day: 7,`
	`21`	`+ doy: 4,`
`22`	`22`	`},`
`23`	`23`	`});`
`24`	`24`	`}`