feat(components): [date-picker] type add months params

- closes: #17317 BREAKING CHANGE : - 新增功能: `date-picker` 支持月份多选 ( element-ui 曾支持此功能 ) closed #17317
element-plus · Jun 28, 2024 · 9106477 · 9106477
1 parent 9e76e6f
commit 9106477
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 10 deletions.
diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md
@@ -158,7 +158,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
 | placeholder             | placeholder in non-range mode                                                                                                | ^[string]                                                                                                                           | ''            |
 | start-placeholder       | placeholder for the start date in range mode                                                                                 | ^[string]                                                                                                                           | —             |
 | end-placeholder         | placeholder for the end date in range mode                                                                                   | ^[string]                                                                                                                           | —             |
-| type                    | type of the picker                                                                                                           | ^[enum]`'year' \| 'years' \|'month' \| 'date' \| 'dates' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange' \| 'monthrange'` | date          |
+| type                    | type of the picker                                                                                                           | ^[enum]`'year' \| 'years' \| 'month' \| 'months' \| 'date' \| 'dates' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange' \| 'monthrange'` | date          |
 | format                  | format of the displayed value in the input box                                                                               | ^[string] see [date formats](/en-US/component/date-picker#date-formats)                                                             | YYYY-MM-DD    |
 | popper-class            | custom class name for DatePicker's dropdown                                                                                  | ^[string]                                                                                                                           | —             |
 | popper-options          | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/)                                             | ^[object]`Partial<PopperOptions>`                                                                                                   | {}            |

diff --git a/packages/components/date-picker/src/date-picker-com/basic-month-table.vue b/packages/components/date-picker/src/date-picker-com/basic-month-table.vue
@@ -223,7 +223,20 @@ const handleMonthTableClick = (event: MouseEvent | KeyboardEvent) => {
   const row = (target.parentNode as HTMLTableRowElement).rowIndex
   const month = row * 4 + column
   const newDate = props.date.startOf('year').month(month)
-  if (props.selectionMode === 'range') {
+  if (props.selectionMode === 'months') {
+    if (event.type === 'keydown') {
+      emit('pick', castArray(props.parsedValue), false)
+      return
+    }
+    const newMonth = props.date.startOf('month').month(month)
+
+    const newValue = hasClass(target, 'current')
+      ? castArray(props.parsedValue).filter(
+          (d) => Number(d) !== Number(newMonth)
+        )
+      : castArray(props.parsedValue).concat([dayjs(newMonth)])
+    emit('pick', newValue)
+  } else if (props.selectionMode === 'range') {
     if (!props.rangeState.selecting) {
       emit('pick', { minDate: newDate, maxDate: null })
       emit('select', true)

diff --git a/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue b/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue
@@ -151,6 +151,7 @@
           <month-table
             v-if="currentView === 'month'"
             ref="currentViewRef"
+            :selection-mode="selectionMode"
             :date="innerDate"
             :parsed-value="parsedValue"
             :disabled-date="disabledDate"
@@ -161,7 +162,11 @@
     </div>
     <div v-show="footerVisible" :class="ppNs.e('footer')">
       <el-button
-        v-show="selectionMode !== 'dates' && selectionMode !== 'years'"
+        v-show="
+          selectionMode !== 'dates' &&
+          selectionMode !== 'months' &&
+          selectionMode !== 'years'
+        "
         text
         size="small"
         :class="ppNs.e('link-btn')"
@@ -225,6 +230,7 @@ import type { PanelDatePickProps } from '../props/panel-date-pick'
 import type {
   DateTableEmits,
   DatesPickerEmits,
+  MonthsPickerEmits,
   WeekPickerEmits,
   YearsPickerEmits,
 } from '../props/basic-date-table'
@@ -393,7 +399,8 @@ const handleShortcutClick = (shortcut: Shortcut) => {
 
 const selectionMode = computed<DatePickType>(() => {
   const { type } = props
-  if (['week', 'month', 'year', 'years', 'dates'].includes(type)) return type
+  if (['week', 'month', 'months', 'year', 'years', 'dates'].includes(type))
+    return type
   return 'date' as DatePickType
 })
 
@@ -405,11 +412,17 @@ const keyboardMode = computed<string>(() => {
 
 const hasShortcuts = computed(() => !!shortcuts.length)
 
-const handleMonthPick = async (month: number) => {
-  innerDate.value = innerDate.value.startOf('month').month(month)
+const handleMonthPick = async (
+  month: number | MonthsPickerEmits,
+  keepOpen?: boolean
+) => {
   if (selectionMode.value === 'month') {
+    innerDate.value = innerDate.value.startOf('month').month(month as number)
     emit(innerDate.value, false)
+  } else if (selectionMode.value === 'months') {
+    emit(month as MonthsPickerEmits, keepOpen ?? true)
   } else {
+    innerDate.value = innerDate.value.startOf('month').month(month as number)
     currentView.value = 'date'
     if (['month', 'year', 'date', 'week'].includes(selectionMode.value)) {
       emit(innerDate.value, true)
@@ -454,9 +467,15 @@ const showTime = computed(
 const footerVisible = computed(() => {
   const showDateFooter = showTime.value || selectionMode.value === 'dates'
   const showYearFooter = selectionMode.value === 'years'
+  const showMonthFooter = selectionMode.value === 'months'
   const isDateView = currentView.value === 'date'
   const isYearView = currentView.value === 'year'
-  return (showDateFooter && isDateView) || (showYearFooter && isYearView)
+  const isMonthView = currentView.value === 'month'
+  return (
+    (showDateFooter && isDateView) ||
+    (showYearFooter && isYearView) ||
+    (showMonthFooter && isMonthView)
+  )
 })
 
 const disabledConfirm = computed(() => {
@@ -468,7 +487,11 @@ const disabledConfirm = computed(() => {
   return disabledDate(props.parsedValue.toDate())
 })
 const onConfirm = () => {
-  if (selectionMode.value === 'dates' || selectionMode.value === 'years') {
+  if (
+    selectionMode.value === 'dates' ||
+    selectionMode.value === 'months' ||
+    selectionMode.value === 'years'
+  ) {
     emit(props.parsedValue as Dayjs[])
   } else {
     // deal with the scenario where: user opens the date time picker, then confirm without doing anything
@@ -740,6 +763,9 @@ watch(
     } else if (val === 'years') {
       currentView.value = 'year'
       return
+    } else if (val === 'months') {
+      currentView.value = 'month'
+      return
     }
     currentView.value = 'date'
   },
@@ -767,7 +793,11 @@ watch(
   () => props.parsedValue,
   (val) => {
     if (val) {
-      if (selectionMode.value === 'dates' || selectionMode.value === 'years')
+      if (
+        selectionMode.value === 'dates' ||
+        selectionMode.value === 'months' ||
+        selectionMode.value === 'years'
+      )
         return
       if (Array.isArray(val)) return
       innerDate.value = val

diff --git a/packages/components/date-picker/src/date-picker.type.ts b/packages/components/date-picker/src/date-picker.type.ts
@@ -4,6 +4,7 @@ export declare type IDatePickerType =
   | 'year'
   | 'years'
   | 'month'
+  | 'months'
   | 'date'
   | 'dates'
   | 'week'

diff --git a/packages/components/date-picker/src/props/basic-date-table.ts b/packages/components/date-picker/src/props/basic-date-table.ts
@@ -21,6 +21,7 @@ export type BasicDateTableEmits = typeof basicDateTableEmits
 export type RangePickerEmits = { minDate: Dayjs; maxDate: null }
 export type DatePickerEmits = Dayjs
 export type DatesPickerEmits = Dayjs[]
+export type MonthsPickerEmits = Dayjs[]
 export type YearsPickerEmits = Dayjs[]
 export type WeekPickerEmits = {
   year: number

diff --git a/packages/components/date-picker/src/props/shared.ts b/packages/components/date-picker/src/props/shared.ts
@@ -11,6 +11,7 @@ const selectionModes = [
   'year',
   'years',
   'month',
+  'months',
   'week',
   'range',
 ]

diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
@@ -37,6 +37,7 @@
           !editable ||
           readonly ||
           isDatesPicker ||
+          isMonthsPicker ||
           isYearsPicker ||
           type === 'week'
         "
@@ -483,7 +484,7 @@ const displayValue = computed<UserInput>(() => {
   if (!isTimePicker.value && valueIsEmpty.value) return ''
   if (!pickerVisible.value && valueIsEmpty.value) return ''
   if (formattedValue) {
-    return isDatesPicker.value || isYearsPicker.value
+    return isDatesPicker.value || isMonthsPicker.value || isYearsPicker.value
       ? (formattedValue as Array<string>).join(', ')
       : formattedValue
   }
@@ -496,6 +497,8 @@ const isTimePicker = computed(() => props.type.startsWith('time'))
 
 const isDatesPicker = computed(() => props.type === 'dates')
 
+const isMonthsPicker = computed(() => props.type === 'months')
+
 const isYearsPicker = computed(() => props.type === 'years')
 
 const triggerIcon = computed(

diff --git a/packages/components/time-picker/src/constants.ts b/packages/components/time-picker/src/constants.ts
@@ -9,6 +9,7 @@ export const DEFAULT_FORMATS_DATEPICKER = {
   year: 'YYYY',
   years: 'YYYY',
   month: 'YYYY-MM',
+  months: 'YYYY-MM',
   datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
   monthrange: 'YYYY-MM',
   daterange: DEFAULT_FORMATS_DATE,

diff --git a/packages/constants/date.ts b/packages/constants/date.ts
@@ -2,6 +2,7 @@ export const datePickTypes = [
   'year',
   'years',
   'month',
+  'months',
   'date',
   'dates',
   'week',

diff --git a/packages/utils/__tests__/vue/validator.test.ts b/packages/utils/__tests__/vue/validator.test.ts
@@ -13,6 +13,7 @@ describe('validator', () => {
     expect(isValidDatePickType('year')).toBe(true)
     expect(isValidDatePickType('years')).toBe(true)
     expect(isValidDatePickType('month')).toBe(true)
+    expect(isValidDatePickType('months')).toBe(true)
     expect(isValidDatePickType('date')).toBe(true)
     expect(isValidDatePickType('dates')).toBe(true)
     expect(isValidDatePickType('week')).toBe(true)