Skip to content

Commit 6e1a9ac

Browse files
07akioni07akioni
committed
feat(date-picker): add year-range prop, closes #5968 
1 parent 3536bf0 commit 6e1a9ac

File tree

11 files changed

+54
-28
lines changed

11 files changed

+54
-28
lines changed

‎CHANGELOG.en-US.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,9 @@
3535
- `n-data-table` add `rowData` return for `render-expand-icon`, closes [#6108](https://github.com/tusen-ai/naive-ui/issues/6108)
3636
- `n-empty` `size` prop to support `tiny` size.
3737
- `n-config-provider` adds `style-mount-target` prop to control where to mount components' style.
38-
- `n-cascader` filter ignore case sensitive
39-
- `n-data-table` add allowExport prop for column
38+
- `n-cascader` filter ignore case sensitive.
39+
- `n-data-table` adds `allowExport` prop for column.
40+
- `n-date-picker` adds `year-range` prop.
4041

4142
## 2.39.0
4243

‎CHANGELOG.zh-CN.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@
3636
- `n-empty` `size` 支持 `tiny` 尺寸
3737
- `n-config-provider` 新增 `style-mount-target` 属性，用于控制样式的挂载位置
3838
- `n-cascader` 过滤算法忽略大小写
39-
- `n-data-table` 在列的配置中新增是否导出的属性
39+
- `n-data-table` 在列的配置中新增 `allowExport` 属性
40+
- `n-date-picker` 新增 `year-range` 属性
4041

4142
## 2.39.0
4243

‎src/date-picker/demos/enUS/index.demo-entry.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ panel.vue
5959
| value | `number \| [number, number] \| null` | `undefined` | Value of the date picker when being manually set. | |
6060
| value-format | `string` | Follow `format` prop | Format of the binding value. See [format](https://date-fns.org/v2.23.0/docs/format). | 2.24.0 |
6161
| year-format | `string` | `'y'` | Format of year item in the panel. See [format](https://date-fns.org/v2.23.0/docs/format). | 2.37.0 |
62+
| year-range | `[number, number]` | `[1901, 2100]` | Year range in month picker in panel. | NEXT_VERSION |
6263
| on-clear | `() => void` | `undefined` | On clear callback. | 2.28.3 |
6364
| on-confirm | `(value: number \| [number, number] \| null, formattedValue: string \| [string, string] \| null) => void` | `undefined` | On confirm callback. | 2.28.3 |
6465
| on-blur | `() => void` | `undefined` | On blur callback. | |

‎src/date-picker/demos/zhCN/index.demo-entry.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ form-debug.vue
6060
| value | `number \| [number, number] \| null` | `undefined` | Date Picker 的值 | |
6161
| value-format | `string` | 跟随 `format` 属性 | 绑定值的格式，详情见 [format](https://date-fns.org/v2.23.0/docs/format) |
6262
| year-format | `string` | `'y'` | 设置面板中年的显示方式，详情见 [format](https://date-fns.org/v2.23.0/docs/format) | 2.37.0 |
63+
| year-range | `[number, number]` | `[1901, 2100]` | 设置面板中的年份选择范围 | NEXT_VERSION |
6364
| on-clear | `() => void` | `undefined` | 用户 clear 时执行的回调 | 2.28.3 |
6465
| on-confirm | `(value: number \| [number, number] \| null, formattedValue: string \| [string, string] \| null) => void` | `undefined` | 用户 confirm 时执行的回调 | 2.28.3 |
6566
| on-blur | `() => void` | `undefined` | 用户 blur 时执行的回调 | |

‎src/date-picker/src/DatePicker.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -721,6 +721,7 @@ export default defineComponent({
721721
monthFormatRef: toRef(props, 'monthFormat'),
722722
yearFormatRef: toRef(props, 'yearFormat'),
723723
quarterFormatRef: toRef(props, 'quarterFormat'),
724+
yearRangeRef: toRef(props, 'yearRange'),
724725
...uniVaidation,
725726
...dualValidation,
726727
datePickerSlots: slots

‎src/date-picker/src/config.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
export const START_YEAR = 1901
21
// TODO: we need to remove it to make height customizable
32
export const MONTH_ITEM_HEIGHT = 40
43

‎src/date-picker/src/interface.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ export type DatePickerInjection = {
136136
yearFormatRef: Ref<string>
137137
quarterFormatRef: Ref<string>
138138
datePickerSlots: Slots
139+
yearRangeRef: Ref<[number, number]>
139140
} & ReturnType<typeof uniCalendarValidation> &
140141
ReturnType<typeof dualCalendarValidation>
141142

‎src/date-picker/src/panel/use-calendar.ts

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ import type {
4646
} from '../interface'
4747
import { datePickerInjectionKey } from '../interface'
4848
import type { DateItem, MonthItem, QuarterItem, YearItem } from '../utils'
49-
import { MONTH_ITEM_HEIGHT, START_YEAR } from '../config'
49+
import { MONTH_ITEM_HEIGHT } from '../config'
5050
import { usePanelCommon, usePanelCommonProps } from './use-panel-common'
5151

5252
const useCalendarProps = {
@@ -77,7 +77,8 @@ function useCalendar(
7777
datePickerSlots,
7878
yearFormatRef,
7979
monthFormatRef,
80-
quarterFormatRef
80+
quarterFormatRef,
81+
yearRangeRef
8182
} = inject(datePickerInjectionKey)!
8283
const validation = {
8384
isValueInvalid: isValueInvalidRef,
@@ -129,9 +130,14 @@ function useCalendar(
129130
})
130131
const yearArrayRef = computed(() => {
131132
const { value } = props
132-
return yearArray(Array.isArray(value) ? null : value, nowRef.value, {
133-
yearFormat: yearFormatRef.value
134-
})
133+
return yearArray(
134+
Array.isArray(value) ? null : value,
135+
nowRef.value,
136+
{
137+
yearFormat: yearFormatRef.value
138+
},
139+
yearRangeRef
140+
)
135141
})
136142
const quarterArrayRef = computed(() => {
137143
const { value } = props
@@ -517,7 +523,7 @@ function useCalendar(
517523
? mergedValue === null
518524
? getYear(Date.now())
519525
: getYear(mergedValue as number)
520-
: getYear(value)) - START_YEAR
526+
: getYear(value)) - yearRangeRef.value[0]
521527
yearVlRef.value.scrollTo({ top: yearIndex * MONTH_ITEM_HEIGHT })
522528
}
523529
}

‎src/date-picker/src/panel/use-dual-calendar.ts

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {
3434
datePickerInjectionKey
3535
} from '../interface'
3636
import type { ScrollbarInst } from '../../../_internal'
37-
import { MONTH_ITEM_HEIGHT, START_YEAR } from '../config'
37+
import { MONTH_ITEM_HEIGHT } from '../config'
3838
import { usePanelCommon, usePanelCommonProps } from './use-panel-common'
3939

4040
const useDualCalendarProps = {
@@ -80,7 +80,8 @@ function useDualCalendar(
8080
datePickerSlots,
8181
monthFormatRef,
8282
yearFormatRef,
83-
quarterFormatRef
83+
quarterFormatRef,
84+
yearRangeRef
8485
} = inject(datePickerInjectionKey)!
8586
const validation = {
8687
isDateDisabled: isDateDisabledRef,
@@ -225,14 +226,24 @@ function useDualCalendar(
225226
return shortcuts || rangesRef.value
226227
})
227228
const startYearArrayRef = computed(() => {
228-
return yearArray(pluckValueFromRange(props.value, 'start'), nowRef.value, {
229-
yearFormat: yearFormatRef.value
230-
})
229+
return yearArray(
230+
pluckValueFromRange(props.value, 'start'),
231+
nowRef.value,
232+
{
233+
yearFormat: yearFormatRef.value
234+
},
235+
yearRangeRef
236+
)
231237
})
232238
const endYearArrayRef = computed(() => {
233-
return yearArray(pluckValueFromRange(props.value, 'end'), nowRef.value, {
234-
yearFormat: yearFormatRef.value
235-
})
239+
return yearArray(
240+
pluckValueFromRange(props.value, 'end'),
241+
nowRef.value,
242+
{
243+
yearFormat: yearFormatRef.value
244+
},
245+
yearRangeRef
246+
)
236247
})
237248
const startQuarterArrayRef = computed(() => {
238249
const startValue = pluckValueFromRange(props.value, 'start')
@@ -739,7 +750,7 @@ function useDualCalendar(
739750
const yearIndex
740751
= (!Array.isArray(mergedValue)
741752
? getYear(Date.now())
742-
: getYear(mergedValue[0])) - START_YEAR
753+
: getYear(mergedValue[0])) - yearRangeRef.value[0]
743754
startYearVlRef.value.scrollTo({ index: yearIndex, debounce: false })
744755
}
745756
}
@@ -758,7 +769,7 @@ function useDualCalendar(
758769
const yearIndex
759770
= (!Array.isArray(mergedValue)
760771
? getYear(Date.now())
761-
: getYear(mergedValue[1])) - START_YEAR
772+
: getYear(mergedValue[1])) - yearRangeRef.value[0]
762773
endYearVlRef.value.scrollTo({ index: yearIndex, debounce: false })
763774
}
764775
}

‎src/date-picker/src/props.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,10 @@ export const datePickerProps = {
8181
monthFormat: { type: String, default: 'M' },
8282
yearFormat: { type: String, default: 'y' },
8383
quarterFormat: { type: String, default: '\'Q\'Q' },
84+
yearRange: {
85+
type: Array as unknown as PropType<[number, number]>,
86+
default: (): [number, number] => [1901, 2100]
87+
},
8488
'onUpdate:show': [Function, Array] as PropType<
8589
MaybeArray<(show: boolean) => void>
8690
>,

0 commit comments

Comments
 (0)