fix(date-picker): rerender date panel when max or min changes (#1782)

* fix(date-picker): rerender date panel when max or min changes

* test(date-picker): add test cases

packages/varlet-cli/src/node/config/vite.config.ts

@@ -36,7 +36,7 @@ export function getHtmlInject(inject: VarletConfigHtmlInject) {
 }
 
 export function getDevConfig(varletConfig: Required<VarletConfig>): InlineConfig {
- const { defaultLanguage, alias = {}, host } = varletConfig
+ const { alias = {}, host } = varletConfig
 
  const resolveAlias = Object.entries(alias).reduce((resolveAlias, [key, value]) => {
  const isRelative = value.startsWith('.')

packages/varlet-ui/src/date-picker/DatePicker.vue

@@ -107,7 +107,7 @@ import dayjs from 'dayjs/esm/index.js'
 import MonthPickerPanel from './src/month-picker-panel.vue'
 import YearPickerPanel from './src/year-picker-panel.vue'
 import DayPickerPanel from './src/day-picker-panel.vue'
-import { defineComponent, ref, computed, reactive, watch, type RendererNode } from 'vue'
+import { defineComponent, ref, computed, watch, type RendererNode } from 'vue'
 import {
  props,
  MONTH_LIST,
@@ -158,7 +158,7 @@ export default defineComponent({
  const yearPanelEl = ref<RendererNode | null>(null)
  const monthPanelEl = ref<RendererNode | null>(null)
  const dayPanelEl = ref<RendererNode | null>(null)
- const componentProps = reactive<ComponentProps>({
+ const componentProps = computed<ComponentProps>(() => ({
  allowedDates: props.allowedDates,
  type: props.type,
  color: props.color,
@@ -169,7 +169,7 @@ export default defineComponent({
  multiple: props.multiple,
  range: props.range,
  buttonElevation: props.buttonElevation,
- })
+ }))
  const getChoose = computed<Choose>(() => ({
  chooseMonth: chooseMonth.value,
  chooseYear: chooseYear.value,

packages/varlet-ui/src/date-picker/__tests__/index.spec.js

@@ -422,3 +422,31 @@ test('test datePicker titleColor', async () => {
 
  wrapper.unmount()
 })
+
+test('test datePicker rerender date panel when max or min changes', async () => {
+ const wrapper = mount({
+ components: {
+ [VarDatePicker.name]: VarDatePicker,
+ },
+ data() {
+ return {
+ date: '2024-12-23',
+ max: '2024-12-24',
+ min: '2024-12-22',
+ }
+ },
+ template: `<var-date-picker v-model="date" :min="min" :max="max" />`,
+ })
+
+ await delay(100)
+ expect(wrapper.html()).toMatchSnapshot()
+
+ await wrapper.setData({
+ min: '2025-01-05',
+ date: '2025-01-06',
+ max: '2025-01-07',
+ })
+ expect(wrapper.html()).toMatchSnapshot()
+
+ wrapper.unmount()
+})

packages/varlet-ui/src/date-picker/src/day-picker-panel.vue

@@ -302,6 +302,8 @@ export default defineComponent({
  }
  )
 
+ watch(() => [props.componentProps.max, props.componentProps.min], initHeader)
+
  return {
  n,
  nDate,

packages/varlet-ui/src/date-picker/src/month-picker-panel.vue

@@ -216,14 +216,14 @@ export default defineComponent({
  }
 
  watch(
- () => props.preview.previewYear,
- (year) => {
- const {
- componentProps: { min, max },
- } = props
-
- if (max) panelBtnDisabled.right = !dayjs(`${toNumber(year) + 1}`).isSameOrBefore(dayjs(max), 'year')
- if (min) panelBtnDisabled.left = !dayjs(`${toNumber(year) - 1}`).isSameOrAfter(dayjs(min), 'year')
+ () => [props.preview.previewYear, props.componentProps.max, props.componentProps.min],
+ ([year, max, min]) => {
+ if (max) {
+ panelBtnDisabled.right = !dayjs(`${toNumber(year) + 1}`).isSameOrBefore(dayjs(max), 'year')
+ }
+ if (min) {
+   panelBtnDisabled.left = !dayjs(`${toNumber(year) - 1}`).isSameOrAfter(dayjs(min), 'year')
+ }
  },
  { immediate: true }
  )

packages/varlet-ui/src/date-picker/src/year-picker-panel.vue

@@ -236,16 +236,20 @@ export default defineComponent({
  )
 
  watch(
- yearList,
- (list) => {
- const {
- componentProps: { min, max },
- } = props
- if (max)
+ () => [yearList.value, props.componentProps.max, props.componentProps.min],
+ (newVal) => {
+ const [list, max, min] = newVal as [number[], string, string]
+ if (max) {
  panelBtnDisabled.right = !dayjs(`${toNumber(list[list.length - 1])}`).isSameOrBefore(dayjs(max), 'year')
- if (min) panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min), 'year')
+ }
+
+ if (min) {
+ panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min), 'year')
+ }
 
- if (toNumber(list[0] <= 0)) panelBtnDisabled.left = false
+ if (toNumber(list[0] <= 0)) {
+ panelBtnDisabled.left = false
+ }
  },
  {
  immediate: true,