20260720172840

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/_semantic.md

@@ -0,0 +1,73 @@
+# _semantic
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { SmileOutlined } from '@antdv-next/icons'
+import { computed, ref } from 'vue'
+import { SemanticPreview } from '@/components/semantic'
+import { useComponentLocale } from '@/composables/use-locale'
+import { locales } from '../locales'
+
+const { t } = useComponentLocale(locales)
+
+const semantics = computed(() => [
+  { name: 'root', desc: t('root') },
+  { name: 'prefix', desc: t('prefix') },
+  { name: 'input', desc: t('input') },
+  { name: 'suffix', desc: t('suffix') },
+  { name: 'popup.root', desc: t('popup') },
+  { name: 'popup.container', desc: t('popup.container') },
+  { name: 'popup.header', desc: t('popup.header') },
+  { name: 'popup.body', desc: t('popup.body') },
+  { name: 'popup.content', desc: t('popup.content') },
+  { name: 'popup.item', desc: t('popup.item') },
+  { name: 'popup.footer', desc: t('popup.footer') },
+])
+
+const type = ref<'Single' | 'Multiple'>('Single')
+const divRef = ref<HTMLDivElement | null>(null)
+</script>
+
+<template>
+  <SemanticPreview
+    :component-name="type === 'Single' ? 'DatePicker' : 'DatePicker.RangePicker'"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <a-flex ref="divRef" vertical :style="{ alignSelf: 'flex-start' }" gap="middle" align="center">
+        <a-segmented
+          :options="['Single', 'Multiple']"
+          :value="type"
+          @change="(val: 'Single' | 'Multiple') => type = val"
+        />
+        <a-date-picker
+          v-if="type === 'Single'"
+          :z-index="1"
+          open
+          :get-popup-container="() => divRef!"
+          need-confirm
+          :classes="classes"
+        >
+          <template #prefix>
+            <SmileOutlined />
+          </template>
+        </a-date-picker>
+        <a-range-picker
+          v-else
+          :z-index="1"
+          open
+          :get-popup-container="() => divRef!"
+          need-confirm
+          :classes="classes"
+        >
+          <template #prefix>
+            <SmileOutlined />
+          </template>
+        </a-range-picker>
+      </a-flex>
+    </template>
+  </SemanticPreview>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/allow-empty.md

@@ -0,0 +1,23 @@
+# Allow Empty
+
+## Description (en-US)
+
+Allow empty for the RangePicker. It's useful when you need to keep the "to date".
+
+## Source
+
+```vue
+<script setup lang="ts">
+function handleChange(date: any, dateString: string | string[]) {
+  console.log(date, dateString)
+}
+</script>
+
+<template>
+  <a-range-picker
+    :placeholder="['Start Date', 'Till Now']"
+    :allow-empty="[false, true]"
+    @change="handleChange"
+  />
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/basic.md

@@ -0,0 +1,29 @@
+# Basic
+
+## Description (en-US)
+
+Basic use case. Users can select or input a date in a panel.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+const date = shallowRef()
+const week = shallowRef()
+const month = shallowRef()
+const year = shallowRef()
+const quarter = shallowRef()
+</script>
+
+<template>
+  <a-flex gap="small" justify="flex-start" align="flex-start" vertical>
+    <a-date-picker v-model:value="date" />
+    <a-date-picker v-model:value="week" picker="week" />
+    <a-date-picker v-model:value="month" picker="month" />
+    <a-date-picker v-model:value="quarter" picker="quarter" />
+    <a-date-picker v-model:value="year" picker="year" />
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/buddhist-era.md

@@ -0,0 +1,73 @@
+# Buddhist Era
+
+## Description (en-US)
+
+Use `locale` to support special calendar format.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import en from 'antdv-next/date-picker/locale/en_US'
+import enUS from 'antdv-next/locale/en_US'
+import dayjs from 'dayjs'
+import buddhistEra from 'dayjs/plugin/buddhistEra'
+import { shallowRef } from 'vue'
+
+dayjs.extend(buddhistEra)
+
+const buddhistLocale: typeof en = {
+  ...en,
+  lang: {
+    ...en.lang,
+    fieldDateFormat: 'BBBB-MM-DD',
+    fieldDateTimeFormat: 'BBBB-MM-DD HH:mm:ss',
+    yearFormat: 'BBBB',
+    cellYearFormat: 'BBBB',
+  },
+}
+
+const globalBuddhistLocale: typeof enUS = {
+  ...enUS,
+  DatePicker: {
+    ...enUS.DatePicker!,
+    lang: buddhistLocale.lang,
+  },
+}
+
+const defaultValue = dayjs('2024-01-01')
+const localeDateValue = shallowRef(defaultValue)
+const localeDateTimeValue = shallowRef(defaultValue)
+const providerDateValue = shallowRef(defaultValue)
+const providerDateTimeValue = shallowRef(defaultValue)
+
+function handleChange(_: any, dateStr: string | string[]) {
+  console.log('onChange:', dateStr)
+}
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-typography-title :level="4" style="margin: 0;" title="no, it's not">
+      By locale props
+    </a-typography-title>
+    <a-date-picker v-model:value="localeDateValue" :locale="buddhistLocale" @change="handleChange" />
+    <a-date-picker
+      v-model:value="localeDateTimeValue"
+      show-time
+      :locale="buddhistLocale"
+      @change="handleChange"
+    />
+
+    <a-typography-title :level="4" style="margin: 0;">
+      By ConfigProvider
+    </a-typography-title>
+    <a-config-provider :locale="globalBuddhistLocale">
+      <a-space vertical :size="12">
+        <a-date-picker v-model:value="providerDateValue" @change="handleChange" />
+        <a-date-picker v-model:value="providerDateTimeValue" show-time @change="handleChange" />
+      </a-space>
+    </a-config-provider>
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/cell-render.md

@@ -0,0 +1,40 @@
+# Customized Cell Rendering
+
+## Description (en-US)
+
+We can customize the rendering of the cells in the calendar by providing a `cellRender` slot to `DatePicker`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { theme } from 'antdv-next'
+
+const { token } = theme.useToken()
+const highlightStyle = {
+  border: `1px solid ${token.value.colorPrimary}`,
+  borderRadius: '50%',
+}
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-date-picker>
+      <template #cellRender="{ current, info }">
+        <component :is="info.originNode" v-if="info.type !== 'date'" />
+        <div v-else class="ant-picker-cell-inner" :style="current.date() === 1 ? highlightStyle : {}">
+          {{ current.date() }}
+        </div>
+      </template>
+    </a-date-picker>
+    <a-range-picker>
+      <template #cellRender="{ current, info }">
+        <component :is="info.originNode" v-if="info.type !== 'date'" />
+        <div v-else class="ant-picker-cell-inner" :style="current.date() === 1 ? highlightStyle : {}">
+          {{ current.date() }}
+        </div>
+      </template>
+    </a-range-picker>
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/components.md

@@ -0,0 +1,104 @@
+# Customize Panel
+
+## Description (en-US)
+
+Replace panel with `components`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { Dayjs } from 'dayjs'
+import type { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { computed, defineComponent, h, ref, resolveComponent, watch } from 'vue'
+
+const MyDatePanel = defineComponent({
+  name: 'MyDatePanel',
+  // The picker passes panel props (e.g. `prefixCls="ant-picker"`) to the custom
+  // component; without this they would fall through to the root `<a-flex>` and make
+  // Flex generate styles under the `ant-picker` prefix, clobbering the picker styles.
+  inheritAttrs: false,
+  props: {
+    value: Object as PropType<Dayjs>,
+    onSelect: Function as PropType<(value: Dayjs) => void>,
+    onHover: Function as PropType<(value: Dayjs) => void>,
+  },
+  setup(props) {
+    const startDate = dayjs().date(1).month(0)
+    const innerValue = ref(props.value || startDate)
+
+    watch(
+      () => props.value,
+      (value) => {
+        if (value) {
+          innerValue.value = value
+        }
+      },
+    )
+
+    const dateCount = computed(() => {
+      const endDate = startDate.add(1, 'year').add(-1, 'day')
+      return endDate.diff(startDate, 'day')
+    })
+
+    const sliderValue = computed(() => {
+      const diff = innerValue.value.diff(startDate, 'day')
+      return Math.min(Math.max(0, diff), dateCount.value)
+    })
+
+    const handleChange = (nextValue: number) => {
+      const nextDate = startDate.add(nextValue, 'day')
+      innerValue.value = nextDate
+      props.onHover?.(nextDate)
+    }
+
+    const handleSelect = () => {
+      props.onSelect?.(innerValue.value)
+    }
+
+    return () => {
+      const Flex = resolveComponent('a-flex') as any
+      const Slider = resolveComponent('a-slider') as any
+      const Title = resolveComponent('a-typography-title') as any
+      const Button = resolveComponent('a-button') as any
+
+      return h(
+        Flex,
+        { vertical: true, gap: 'small', style: { padding: '16px' } },
+        {
+          default: () => [
+            h(Title, { level: 4, style: { margin: 0 }, title: 'no, it\'s not' }, () => 'The BEST Picker Panel'),
+            h(Slider, {
+              min: 0,
+              max: dateCount.value,
+              value: sliderValue.value,
+              onChange: handleChange,
+              tooltip: {
+                formatter: (nextValue?: number) =>
+                  startDate.add(nextValue || 0, 'day').format('YYYY-MM-DD'),
+              },
+            }),
+            h(Button, { type: 'primary', onClick: handleSelect }, () => 'That\'s It!'),
+          ],
+        },
+      )
+    }
+  },
+})
+
+function handleChange(date: any, dateString: string | string[]) {
+  console.log(date, dateString)
+}
+</script>
+
+<template>
+  <a-space vertical>
+    <a-date-picker
+      :show-now="false"
+      :components="{ date: MyDatePanel }"
+      @change="handleChange"
+    />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/date-range.md

@@ -0,0 +1,28 @@
+# Limit Date Range
+
+## Description (en-US)
+
+Limit the range of available dates by using `minDate` and `maxDate`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import { shallowRef } from 'vue'
+
+dayjs.extend(customParseFormat)
+
+const dateFormat = 'YYYY-MM-DD'
+const value = shallowRef(dayjs('2019-09-03', dateFormat))
+</script>
+
+<template>
+  <a-date-picker
+    v-model:value="value"
+    :min-date="dayjs('2019-08-01', dateFormat)"
+    :max-date="dayjs('2020-10-31', dateFormat)"
+  />
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/disabled-date.md

@@ -0,0 +1,80 @@
+# Disabled Date & Time
+
+## Description (en-US)
+
+Disable specific dates and times by using `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
+
+function range(start: number, end: number) {
+  const result: number[] = []
+  for (let i = start; i < end; i++) {
+    result.push(i)
+  }
+  return result
+}
+
+function disabledDate(current: any) {
+  return current && current < dayjs().endOf('day')
+}
+
+function disabledDateForMonth(current: any) {
+  return current && current < dayjs().startOf('month')
+}
+
+function disabledDateTime() {
+  return {
+    disabledHours: () => range(0, 24).splice(4, 20),
+    disabledMinutes: () => range(30, 60),
+    disabledSeconds: () => [55, 56],
+  }
+}
+
+function disabledRangeTime(_: any, type: 'start' | 'end') {
+  if (type === 'start') {
+    return {
+      disabledHours: () => range(0, 60).splice(4, 20),
+      disabledMinutes: () => range(30, 60),
+      disabledSeconds: () => [55, 56],
+    }
+  }
+  return {
+    disabledHours: () => range(0, 60).splice(20, 4),
+    disabledMinutes: () => range(0, 31),
+    disabledSeconds: () => [55, 56],
+  }
+}
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-date-picker
+      format="YYYY-MM-DD HH:mm:ss"
+      :disabled-date="disabledDate"
+      :disabled-time="disabledDateTime"
+      :show-time="{ defaultOpenValue: dayjs('00:00:00', 'HH:mm:ss') }"
+    />
+    <a-date-picker picker="month" :disabled-date="disabledDateForMonth" />
+    <a-range-picker :disabled-date="disabledDate" />
+    <a-range-picker
+      :disabled-date="disabledDate"
+      :disabled-time="disabledRangeTime"
+      :show-time="{
+        hideDisabledOptions: true,
+        defaultOpenValue: [
+          dayjs('00:00:00', 'HH:mm:ss'),
+          dayjs('11:59:59', 'HH:mm:ss'),
+        ],
+      }"
+      format="YYYY-MM-DD HH:mm:ss"
+    />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/disabled.md

@@ -0,0 +1,50 @@
+# Disabled
+
+## Description (en-US)
+
+A disabled state of the `DatePicker`. You can also set as array to disable one of input.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import { shallowRef } from 'vue'
+
+dayjs.extend(customParseFormat)
+
+const dateFormat = 'YYYY-MM-DD'
+const disabledDateValue = shallowRef(dayjs('2015-06-06', dateFormat))
+const disabledMonthValue = shallowRef(dayjs('2015-06', 'YYYY-MM'))
+const disabledRangeValue = shallowRef([
+  dayjs('2015-06-06', dateFormat),
+  dayjs('2015-06-06', dateFormat),
+])
+const partiallyDisabledRangeValue = shallowRef([
+  dayjs('2019-09-03', dateFormat),
+  dayjs('2019-11-22', dateFormat),
+])
+const minMaxValue = shallowRef(dayjs('2019-09-03', dateFormat))
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-date-picker v-model:value="disabledDateValue" disabled />
+    <a-date-picker v-model:value="disabledMonthValue" picker="month" disabled />
+    <a-range-picker
+      v-model:value="disabledRangeValue"
+      disabled
+    />
+    <a-range-picker
+      v-model:value="partiallyDisabledRangeValue"
+      :disabled="[false, true]"
+    />
+    <a-date-picker
+      v-model:value="minMaxValue"
+      :min-date="dayjs('2019-06-01', dateFormat)"
+      :max-date="dayjs('2020-06-30', dateFormat)"
+    />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/external-panel.md

@@ -0,0 +1,226 @@
+# External use panel
+
+## Description (en-US)
+
+Custom menu, external selection panel.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { MenuItemType } from 'antdv-next'
+import type { Dayjs } from 'dayjs'
+import { DownOutlined } from '@antdv-next/icons'
+import dayjs from 'dayjs'
+import { computed, h, ref, resolveComponent } from 'vue'
+
+const dateDropdownOpen = ref(false)
+const datePanelOpen = ref(false)
+const dateValue = ref<Dayjs | null>(dayjs())
+
+const rangeDropdownOpen = ref(false)
+const rangePanelOpen = ref(false)
+const rangeValue = ref<[Dayjs, Dayjs] | null>([dayjs(), dayjs().add(1, 'day')])
+
+const DatePicker = resolveComponent('a-date-picker') as any
+const RangePicker = resolveComponent('a-range-picker') as any
+
+const dateMenuItems = computed<MenuItemType[]>(() => [
+  {
+    key: 'today',
+    label: 'Today',
+    onClick() {
+      dateValue.value = dayjs()
+      dateDropdownOpen.value = false
+    },
+  },
+  {
+    key: 'tomorrow',
+    label: 'Tomorrow',
+    onClick() {
+      dateValue.value = dayjs().add(1, 'day')
+      dateDropdownOpen.value = false
+    },
+  },
+  {
+    key: 'custom-date',
+    label: h(
+      'div',
+      {
+        style: { position: 'relative', overflow: 'hidden' },
+        onClick: (event: MouseEvent) => {
+          event.stopPropagation()
+          datePanelOpen.value = true
+        },
+      },
+      [
+        h('div', 'Customize'),
+        h(
+          'div',
+          {
+            onClick: (event: MouseEvent) => {
+              event.stopPropagation()
+            },
+          },
+          [
+            h(DatePicker, {
+              open: datePanelOpen.value,
+              styles: {
+                root: {
+                  pointerEvents: 'none',
+                  opacity: 0,
+                  position: 'absolute',
+                  bottom: -12,
+                  insetInlineStart: 0,
+                },
+              },
+              onChange: (value: Dayjs | null) => {
+                dateValue.value = value
+                dateDropdownOpen.value = false
+                datePanelOpen.value = false
+              },
+            }),
+          ],
+        ),
+      ],
+    ),
+  },
+])
+
+const rangeMenuItems = computed<MenuItemType[]>(() => [
+  {
+    key: '7',
+    label: '7 days',
+    onClick() {
+      rangeValue.value = [dayjs(), dayjs().add(7, 'day')]
+      rangeDropdownOpen.value = false
+    },
+  },
+  {
+    key: '30',
+    label: '30 days',
+    onClick() {
+      rangeValue.value = [dayjs(), dayjs().add(30, 'day')]
+      rangeDropdownOpen.value = false
+    },
+  },
+  {
+    key: 'custom-date',
+    label: h(
+      'div',
+      {
+        style: { position: 'relative', overflow: 'hidden' },
+        onClick: (event: MouseEvent) => {
+          event.stopPropagation()
+          rangePanelOpen.value = true
+        },
+      },
+      [
+        h('div', 'Customize'),
+        h(
+          'div',
+          {
+            onClick: (event: MouseEvent) => {
+              event.stopPropagation()
+            },
+          },
+          [
+            h(RangePicker, {
+              open: rangePanelOpen.value,
+              styles: {
+                root: {
+                  pointerEvents: 'none',
+                  opacity: 0,
+                  position: 'absolute',
+                  bottom: 0,
+                  insetInlineStart: 0,
+                },
+              },
+              onChange: (ranges: [Dayjs, Dayjs] | null) => {
+                if (ranges?.[0] && ranges?.[1]) {
+                  rangeValue.value = [ranges[0], ranges[1]]
+                }
+                else {
+                  rangeValue.value = null
+                }
+                rangeDropdownOpen.value = false
+                rangePanelOpen.value = false
+              },
+            }),
+          ],
+        ),
+      ],
+    ),
+  },
+])
+
+const dateMenu = computed(() => ({ items: dateMenuItems.value }))
+const rangeMenu = computed(() => ({ items: rangeMenuItems.value }))
+
+function handleDateOpenChange(nextOpen: boolean) {
+  dateDropdownOpen.value = nextOpen
+  if (!nextOpen) {
+    datePanelOpen.value = false
+  }
+}
+
+function handleRangeOpenChange(nextOpen: boolean) {
+  rangeDropdownOpen.value = nextOpen
+  if (!nextOpen) {
+    rangePanelOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div style="display: flex; gap: 20%;">
+    <div>
+      <div style="margin-bottom: 12px;">
+        DatePicker
+      </div>
+      <a-dropdown
+        arrow
+        :open="dateDropdownOpen"
+        :menu="dateMenu"
+        :trigger="['click']"
+        destroy-on-hidden
+        @open-change="handleDateOpenChange"
+      >
+        <a @click.prevent>
+          <a-space>
+            <span>{{ dateValue?.format('YYYY-MM-DD') }}</span>
+            <DownOutlined />
+          </a-space>
+        </a>
+      </a-dropdown>
+    </div>
+
+    <div>
+      <div style="margin-bottom: 12px;">
+        RangePicker
+      </div>
+      <a-dropdown
+        arrow
+        :open="rangeDropdownOpen"
+        :menu="rangeMenu"
+        :trigger="['click']"
+        destroy-on-hidden
+        @open-change="handleRangeOpenChange"
+      >
+        <a @click.prevent>
+          <a-space>
+            <span>
+              {{
+                rangeValue
+                  ? `${rangeValue[0].format('YYYY-MM-DD')} ~ ${rangeValue[1].format('YYYY-MM-DD')}`
+                  : 'Select range'
+              }}
+            </span>
+            <DownOutlined />
+          </a-space>
+        </a>
+      </a-dropdown>
+    </div>
+  </div>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/extra-footer.md

@@ -0,0 +1,39 @@
+# Extra Footer
+
+## Description (en-US)
+
+Render extra footer in panel for customized requirements.
+
+## Source
+
+```vue
+<template>
+  <a-space vertical :size="12">
+    <a-date-picker>
+      <template #renderExtraFooter>
+        extra footer
+      </template>
+    </a-date-picker>
+    <a-date-picker show-time>
+      <template #renderExtraFooter>
+        extra footer
+      </template>
+    </a-date-picker>
+    <a-range-picker>
+      <template #renderExtraFooter>
+        extra footer
+      </template>
+    </a-range-picker>
+    <a-range-picker show-time>
+      <template #renderExtraFooter>
+        extra footer
+      </template>
+    </a-range-picker>
+    <a-date-picker picker="month">
+      <template #renderExtraFooter>
+        extra footer
+      </template>
+    </a-date-picker>
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/format.md

@@ -0,0 +1,61 @@
+# Date Format
+
+## Description (en-US)
+
+We can set the date format by `format`. When `format` is an array, the input box can be entered in any of the valid formats of the array.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { DatePickerProps } from 'antdv-next'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import { shallowRef } from 'vue'
+
+const dateFormat = 'YYYY/MM/DD'
+const weekFormat = 'MM/DD'
+const monthFormat = 'YYYY/MM'
+
+/** Manually entering any of the following formats will perform date parsing */
+const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY']
+
+dayjs.extend(customParseFormat)
+
+const customFormat: DatePickerProps['format'] = value =>
+  `custom format: ${value.format(dateFormat)}`
+
+const customWeekStartEndFormat: DatePickerProps['format'] = value =>
+  `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
+    .endOf('week')
+    .format(weekFormat)}`
+
+const basicValue = shallowRef(dayjs('2015/01/01', dateFormat))
+const listValue = shallowRef(dayjs('01/01/2015', dateFormatList[0]))
+const monthValue = shallowRef(dayjs('2015/01', monthFormat))
+const weekValue = shallowRef(dayjs())
+const rangeValue = shallowRef([
+  dayjs('2015/01/01', dateFormat),
+  dayjs('2015/01/01', dateFormat),
+])
+const customValue = shallowRef(dayjs('2015/01/01', dateFormat))
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-date-picker v-model:value="basicValue" :format="dateFormat" />
+    <a-date-picker v-model:value="listValue" :format="dateFormatList" />
+    <a-date-picker
+      v-model:value="monthValue"
+      picker="month"
+      :format="monthFormat"
+    />
+    <a-date-picker v-model:value="weekValue" picker="week" :format="customWeekStartEndFormat" />
+    <a-range-picker
+      v-model:value="rangeValue"
+      :format="dateFormat"
+    />
+    <a-date-picker v-model:value="customValue" :format="customFormat" />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/mask.md

@@ -0,0 +1,28 @@
+# Mask Format
+
+## Description (en-US)
+
+Align the date format. Switch the selection by arrow keys. Will try to align the date to the last valid date when blur.
+
+## Source
+
+```vue
+<script setup lang="ts">
+function handleChange(date: any, dateString: string | string[]) {
+  console.log(date, dateString)
+}
+</script>
+
+<template>
+  <a-space vertical>
+    <a-date-picker
+      :format="{ format: 'YYYY-MM-DD', type: 'mask' }"
+      @change="handleChange"
+    />
+    <a-date-picker
+      :format="{ format: 'YYYY-MM-DD HH:mm:ss', type: 'mask' }"
+      @change="handleChange"
+    />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/multiple.md

@@ -0,0 +1,50 @@
+# Multiple
+
+## Description (en-US)
+
+Multiple selections. Does not support `showTime` and `picker="time"`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { DatePickerEmits } from 'antdv-next/date-picker/generatePicker/generateSinglePicker.tsx'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import { shallowRef } from 'vue'
+
+const defaultValue = [dayjs('2000-01-01'), dayjs('2000-01-03'), dayjs('2000-01-05')]
+const smallValue = shallowRef([...defaultValue])
+const middleValue = shallowRef([...defaultValue])
+const largeValue = shallowRef([...defaultValue])
+
+const handleChange: DatePickerEmits<Dayjs>['change'] = (date, dateString) => {
+  console.log(date, dateString)
+}
+</script>
+
+<template>
+  <a-flex vertical gap="small">
+    <a-date-picker
+      v-model:value="smallValue"
+      multiple
+      size="small"
+      max-tag-count="responsive"
+      @change="handleChange"
+    />
+    <a-date-picker
+      v-model:value="middleValue"
+      multiple
+      max-tag-count="responsive"
+      @change="handleChange"
+    />
+    <a-date-picker
+      v-model:value="largeValue"
+      multiple
+      size="large"
+      max-tag-count="responsive"
+      @change="handleChange"
+    />
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/needConfirm.md

@@ -0,0 +1,22 @@
+# Need Confirm
+
+## Description (en-US)
+
+DatePicker will automatically determine whether to show a confirm button according to the `picker` property. You can also set the `needConfirm` property to determine whether to show a confirm button. When `needConfirm` is set, the user must click the confirm button to complete the selection. Otherwise, the selection will be submitted when the picker loses focus or selects a date.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { DatePickerProps } from 'antdv-next'
+import type { Dayjs } from 'dayjs'
+
+const handleChange: DatePickerProps<Dayjs, false>['onChange'] = (date, dateString) => {
+  console.log(date, dateString)
+}
+</script>
+
+<template>
+  <a-date-picker need-confirm @change="handleChange" />
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/placement.md

@@ -0,0 +1,39 @@
+# Placement
+
+## Description (en-US)
+
+You can manually specify the position of the popup via `placement`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { DatePickerProps } from 'antdv-next'
+import { shallowRef } from 'vue'
+
+type PlacementType = DatePickerProps['placement']
+
+const placement = shallowRef<PlacementType>('topLeft')
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-radio-group v-model:value="placement">
+      <a-radio-button value="topLeft">
+        topLeft
+      </a-radio-button>
+      <a-radio-button value="topRight">
+        topRight
+      </a-radio-button>
+      <a-radio-button value="bottomLeft">
+        bottomLeft
+      </a-radio-button>
+      <a-radio-button value="bottomRight">
+        bottomRight
+      </a-radio-button>
+    </a-radio-group>
+    <a-date-picker :placement="placement" />
+    <a-range-picker :placement="placement" />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/preset-ranges.md

@@ -0,0 +1,68 @@
+# Preset Ranges
+
+## Description (en-US)
+
+We can set preset ranges to RangePicker to improve user experience. Since `5.8.0`, preset value supports callback function.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { RangePickerProps } from 'antdv-next'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import { h } from 'vue'
+
+const rangePresets: RangePickerProps['presets'] = [
+  { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
+  { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
+  { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
+  { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
+]
+
+function handleChange(date: Dayjs | null) {
+  if (date) {
+    console.log('Date: ', date)
+  }
+  else {
+    console.log('Clear')
+  }
+}
+
+function handleRangeChange(dates: null | (Dayjs | null)[], dateStrings: string[]) {
+  if (dates) {
+    console.log('From: ', dates[0], ', to: ', dates[1])
+    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
+  }
+  else {
+    console.log('Clear')
+  }
+}
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-date-picker
+      :presets="[
+        { label: 'Yesterday', value: dayjs().add(-1, 'd') },
+        { label: 'Last Week', value: dayjs().add(-7, 'd') },
+        { label: 'Last Month', value: dayjs().add(-1, 'month') },
+      ]"
+      @change="handleChange"
+    />
+    <a-range-picker :presets="rangePresets" @change="handleRangeChange" />
+    <a-range-picker
+      :presets="[
+        {
+          label: h('span', { 'aria-label': 'Current Time to End of Day' }, 'Now ~ EOD'),
+          value: () => [dayjs(), dayjs().endOf('day')],
+        },
+        ...rangePresets,
+      ]"
+      show-time
+      format="YYYY/MM/DD HH:mm:ss"
+      @change="handleRangeChange"
+    />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/range-picker.md

@@ -0,0 +1,40 @@
+# Range Picker
+
+## Description (en-US)
+
+Set range picker type by `picker` prop.
+
+## Source
+
+```vue
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+
+const date = shallowRef()
+const week = shallowRef()
+const month = shallowRef()
+const quarter = shallowRef()
+const year = shallowRef()
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-range-picker v-model:value="date" />
+    <a-range-picker v-model:value="date" show-time />
+    <a-range-picker v-model:value="week" picker="week" />
+    <a-range-picker v-model:value="month" picker="month" />
+    <a-range-picker v-model:value="quarter" picker="quarter" />
+    <a-range-picker
+      :id="{ start: 'startInput', end: 'endInput' }"
+      v-model:value="year"
+      picker="year"
+      @focus="(_, info) => {
+        console.log('Focus:', info.range)
+      }"
+      @blur="(_, info) => {
+        console.log('Blur:', info.range)
+      }"
+    />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/select-in-range.md

@@ -0,0 +1,70 @@
+# Select range dates
+
+## Description (en-US)
+
+Using `info.from` of `disabledDate` to limit the dynamic date range selection.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { DatePickerProps } from 'antdv-next'
+import type { Dayjs } from 'dayjs'
+
+const getYearMonth = (date: Dayjs) => date.year() * 12 + date.month()
+
+const disabled7DaysDate: DatePickerProps['disabledDate'] = (current, { from, type }) => {
+  if (from) {
+    const minDate = from.add(-6, 'days')
+    const maxDate = from.add(6, 'days')
+
+    switch (type) {
+      case 'year':
+        return current.year() < minDate.year() || current.year() > maxDate.year()
+      case 'month':
+        return (
+          getYearMonth(current) < getYearMonth(minDate)
+          || getYearMonth(current) > getYearMonth(maxDate)
+        )
+      default:
+        return Math.abs(current.diff(from, 'days')) >= 7
+    }
+  }
+
+  return false
+}
+
+const disabled6MonthsDate: DatePickerProps['disabledDate'] = (current, { from, type }) => {
+  if (from) {
+    const minDate = from.add(-5, 'months')
+    const maxDate = from.add(5, 'months')
+
+    switch (type) {
+      case 'year':
+        return current.year() < minDate.year() || current.year() > maxDate.year()
+      default:
+        return (
+          getYearMonth(current) < getYearMonth(minDate)
+          || getYearMonth(current) > getYearMonth(maxDate)
+        )
+    }
+  }
+
+  return false
+}
+</script>
+
+<template>
+  <a-space vertical>
+    <a-typography-title :level="5">
+      7 days range
+    </a-typography-title>
+    <a-range-picker :disabled-date="disabled7DaysDate" />
+
+    <a-typography-title :level="5">
+      6 months range
+    </a-typography-title>
+    <a-range-picker picker="month" :disabled-date="disabled6MonthsDate" />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/size.md

@@ -0,0 +1,37 @@
+# Three Sizes
+
+## Description (en-US)
+
+The input box comes in three sizes: small, middle and large. The `middle` size will be used if `size` is omitted.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+type SizeType = 'large' | 'middle' | 'small'
+
+const size = shallowRef<SizeType>('middle')
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-radio-group v-model:value="size">
+      <a-radio-button value="large">
+        Large
+      </a-radio-button>
+      <a-radio-button value="middle">
+        middle
+      </a-radio-button>
+      <a-radio-button value="small">
+        Small
+      </a-radio-button>
+    </a-radio-group>
+    <a-date-picker :size="size" />
+    <a-date-picker :size="size" picker="month" />
+    <a-range-picker :size="size" />
+    <a-date-picker :size="size" picker="week" />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/status.md

@@ -0,0 +1,18 @@
+# Status
+
+## Description (en-US)
+
+Add status to DatePicker with `status`, which could be `error` or `warning`.
+
+## Source
+
+```vue
+<template>
+  <a-space vertical style="width: 100%;">
+    <a-date-picker status="error" style="width: 100%;" />
+    <a-date-picker status="warning" style="width: 100%;" />
+    <a-range-picker status="error" style="width: 100%;" />
+    <a-range-picker status="warning" style="width: 100%;" />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/style-class.md

@@ -0,0 +1,50 @@
+# Custom semantic dom styling
+
+## Description (en-US)
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { DatePickerProps } from 'antdv-next'
+import { theme } from 'antdv-next'
+
+const { useToken } = theme
+const { token } = useToken()
+
+const customClasses = {
+  root: 'custom-datepicker-root',
+}
+
+const stylesObject: DatePickerProps['styles'] = {
+  input: { fontStyle: 'italic' },
+  suffix: { opacity: 0.85 },
+}
+
+const stylesFn: DatePickerProps['styles'] = (info) => {
+  if (info.props.size === 'large') {
+    return {
+      root: { borderColor: '#722ed1' },
+      popup: {
+        container: { border: '1px solid #722ed1', borderRadius: '8px' },
+      },
+    }
+  }
+  return {}
+}
+</script>
+
+<template>
+  <a-flex vertical gap="middle">
+    <a-date-picker :classes="customClasses" :styles="stylesObject" placeholder="Object" />
+    <a-date-picker :classes="customClasses" :styles="stylesFn" placeholder="Function" size="large" />
+  </a-flex>
+</template>
+
+<style scoped>
+.custom-datepicker-root {
+  border: 1px solid v-bind('token.colorPrimary');
+  width: 200px;
+}
+</style>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/suffix.md

@@ -0,0 +1,38 @@
+# Prefix and Suffix
+
+## Description (en-US)
+
+Custom `prefix` and `suffixIcon`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { Dayjs } from 'dayjs'
+import { SmileOutlined } from '@antdv-next/icons'
+import { h } from 'vue'
+
+const smileIcon = h(SmileOutlined)
+
+function handleChange(date: Dayjs | (Dayjs | null)[] | null, dateString: string | string[] | null) {
+  console.log(date, dateString)
+}
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-date-picker :suffix-icon="smileIcon" @change="handleChange" />
+    <a-date-picker :suffix-icon="smileIcon" picker="month" @change="handleChange" />
+    <a-range-picker :suffix-icon="smileIcon" @change="handleChange" />
+    <a-date-picker :suffix-icon="smileIcon" picker="week" @change="handleChange" />
+    <a-date-picker suffix-icon="ab" @change="handleChange" />
+    <a-date-picker suffix-icon="ab" picker="month" @change="handleChange" />
+    <a-range-picker suffix-icon="ab" @change="handleChange" />
+    <a-date-picker suffix-icon="ab" picker="week" @change="handleChange" />
+    <a-date-picker :prefix="smileIcon" picker="week" @change="handleChange" />
+    <a-date-picker prefix="Event Period" picker="week" @change="handleChange" />
+    <a-range-picker :prefix="smileIcon" picker="week" @change="handleChange" />
+    <a-range-picker prefix="Event Period" picker="week" @change="handleChange" />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/switchable.md

@@ -0,0 +1,39 @@
+# Switchable picker
+
+## Description (en-US)
+
+Switch in different types of pickers by Select.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+type PickerType = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year'
+
+const type = shallowRef<PickerType>('time')
+
+const options = [
+  { label: 'Time', value: 'time' },
+  { label: 'Date', value: 'date' },
+  { label: 'Week', value: 'week' },
+  { label: 'Month', value: 'month' },
+  { label: 'Quarter', value: 'quarter' },
+  { label: 'Year', value: 'year' },
+]
+
+function handleChange(value: any) {
+  console.log(value)
+}
+</script>
+
+<template>
+  <a-space>
+    <a-select v-model:value="type" aria-label="Picker Type" :options="options" />
+    <a-time-picker v-if="type === 'time'" @change="handleChange" />
+    <a-date-picker v-else-if="type === 'date'" @change="handleChange" />
+    <a-date-picker v-else :picker="type" @change="handleChange" />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/time.md

@@ -0,0 +1,32 @@
+# Choose Time
+
+## Description (en-US)
+
+This property provides an additional time selection. When `showTime` is an Object, its properties will be passed on to the built-in `TimePicker`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+function handleOk(value: any) {
+  console.log('onOk: ', value)
+}
+
+function handleChange(value: any, dateString: string | string[]) {
+  console.log('Selected Time: ', value)
+  console.log('Formatted Selected Time: ', dateString)
+}
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-date-picker show-time @change="handleChange" @ok="handleOk" />
+    <a-range-picker
+      :show-time="{ format: 'HH:mm' }"
+      format="YYYY-MM-DD HH:mm"
+      @change="handleChange"
+      @ok="handleOk"
+    />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/value-format.md

@@ -0,0 +1,40 @@
+# Value Format
+
+## Description (en-US)
+
+Use `valueFormat` to define the date value format. With it, `v-model:value` can directly use string values.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+const singleValue = shallowRef<string | null>('2026-02-12')
+const rangeValue = shallowRef<[string | null, string | null] | null>(['2026-02-01', '2026-02-12'])
+</script>
+
+<template>
+  <a-space vertical :size="12">
+    <a-space>
+      <a-date-picker
+        v-model:value="singleValue"
+        value-format="YYYY-MM-DD"
+        format="YYYY-MM-DD"
+        allow-clear
+      />
+      <span>value: {{ singleValue ?? 'null' }}</span>
+    </a-space>
+
+    <a-space>
+      <a-range-picker
+        v-model:value="rangeValue"
+        value-format="YYYY-MM-DD"
+        format="YYYY-MM-DD"
+        allow-clear
+      />
+      <span>value: {{ rangeValue ? `${rangeValue[0]} ~ ${rangeValue[1]}` : 'null' }}</span>
+    </a-space>
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/demo/variant.md

@@ -0,0 +1,30 @@
+# Variants
+
+## Description (en-US)
+
+Variants of DatePicker, there are four variants: `outlined` `filled` `borderless` and `underlined`.
+
+## Source
+
+```vue
+<template>
+  <a-flex vertical :gap="12">
+    <a-flex :gap="8">
+      <a-date-picker placeholder="Outlined" />
+      <a-range-picker :placeholder="['Outlined Start', 'Outlined End']" />
+    </a-flex>
+    <a-flex :gap="8">
+      <a-date-picker placeholder="Filled" variant="filled" />
+      <a-range-picker :placeholder="['Filled Start', 'Filled End']" variant="filled" />
+    </a-flex>
+    <a-flex :gap="8">
+      <a-date-picker placeholder="Borderless" variant="borderless" />
+      <a-range-picker :placeholder="['Borderless Start', 'Borderless End']" variant="borderless" />
+    </a-flex>
+    <a-flex :gap="8">
+      <a-date-picker placeholder="Underlined" variant="underlined" />
+      <a-range-picker :placeholder="['Underlined Start', 'Underlined End']" variant="underlined" />
+    </a-flex>
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/docs.md

@@ -0,0 +1,301 @@
+---
+title: DatePicker
+description: To select or input a date.
+---
+
+## When To Use
+By clicking the input box, you can select a date from a popup calendar.
+
+## Examples
+
+## Demos
+
+| Demo | Path |
+| --- | --- |
+| Basic | demo/basic.md |
+| Range Picker | demo/range-picker.md |
+| Multiple | demo/multiple.md |
+| Need Confirm | demo/needConfirm.md |
+| Switchable picker | demo/switchable.md |
+| Date Format | demo/format.md |
+| Value Format | demo/value-format.md |
+| Choose Time | demo/time.md |
+| Mask Format | demo/mask.md |
+| Limit Date Range | demo/date-range.md |
+| Disabled | demo/disabled.md |
+| Disabled Date & Time | demo/disabled-date.md |
+| Allow Empty | demo/allow-empty.md |
+| Select range dates | demo/select-in-range.md |
+| Preset Ranges | demo/preset-ranges.md |
+| Extra Footer | demo/extra-footer.md |
+| Three Sizes | demo/size.md |
+| Customized Cell Rendering | demo/cell-render.md |
+| Customize Panel | demo/components.md |
+| External use panel | demo/external-panel.md |
+| Buddhist Era | demo/buddhist-era.md |
+| Status | demo/status.md |
+| Variants | demo/variant.md |
+| Custom semantic dom styling | demo/style-class.md |
+| Placement | demo/placement.md |
+| Prefix and Suffix | demo/suffix.md |
+
+## API
+
+Common props ref：[Common props](../../docs/vue/common-props.md)
+
+There are five kinds of picker:
+
+- DatePicker
+- DatePicker[picker="month"]
+- DatePicker[picker="week"]
+- DatePicker[picker="year"]
+- DatePicker[picker="quarter"] (Added in 4.1.0)
+- RangePicker
+
+### Localization
+
+The default locale is en-US, if you need to use other languages, recommend to use internationalized components provided by us at the entrance. Look at: [ConfigProvider](../config-provider/docs.md/).
+
+If there are special needs (only modifying single component language), Please use the property: locale. Example: [default](https://github.com/ant-design/ant-design/blob/masterdocs.md/locale/example.json).
+
+```vue
+<script setup lang="ts">
+import zhCN from 'antdv-next/locale/zh_CN'
+import dayjs from 'dayjs'
+
+import 'dayjs/locale/zh-cn'
+
+dayjs.locale('zh-cn')
+</script>
+
+<template>
+  <a-config-provider :locale="zhCN">
+    <a-date-picker :default-value="dayjs('2015-01-01', 'YYYY-MM-DD')" />
+  </a-config-provider>
+</template>
+```
+
+### Common API
+
+The following APIs are shared by DatePicker, RangePicker.
+
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| allowClear | Customize clear button | boolean \| \{ clearIcon?: VueNode \} | true | - | ✓ |
+| dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => VueNode | - | - | × |
+| cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: VueNode, today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => VueNode | - | - | × |
+| components | Custom panels. A custom panel component should set `inheritAttrs: false`; otherwise the picker-injected props (e.g. `prefixCls`) fall through to its root node, causing child components (such as Flex) to emit styles under the wrong prefix and break the panel layout | Record<Panel \| 'input', Component> | - | - | × |
+| defaultOpen | Initial open state of picker | boolean | - | - | × |
+| disabled | Determine whether the DatePicker is disabled | boolean | false | - | × |
+| disabledDate | Specify the date that cannot be selected | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | - | × |
+| format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#date-picker-demo-format) | [formatType](#formattype) | [@rc-component/picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | - | × |
+| valueFormat | Set the binding value format. After setting, `value`, `defaultValue`, and `v-model:value` can use formatted strings, and `change` returns strings in the same format. Demo: [Value Format](#date-picker-demo-value-format) | string | - | - | × |
+| order | Auto order date when multiple or range selection | boolean | true | - | × |
+| ~~popupClassName~~ | To customize the className of the popup calendar, use `classes.popup.root` instead | string | - | - | × |
+| preserveInvalidOnBlur | Not clean input on blur even when the typing is invalidate | boolean | false | - | × |
+| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | - | × |
+| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | - | × |
+| locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/masterdocs.md/locale/example.json) | - | × |
+| minDate | The minimum date, which also limits the range of panel switching | dayjs | - | - | × |
+| maxDate | The maximum date, which also limits the range of panel switching | dayjs | - | - | × |
+| mode | The picker panel mode（ [Cannot select year or month anymore?](../../docs/vue/faq.md#when-set-mode-to-datepickerrangepicker-cannot-select-year-or-month-anymore) ) | `time` \| `date` \| `month` \| `year` \| `decade` | - | - | × |
+| needConfirm | Need click confirm button to trigger value change. Default `false` when `multiple` | boolean | - | - | × |
+| nextIcon | The custom next icon | VueNode | - | - | × |
+| open | The open state of picker | boolean | - | - | × |
+| panelRender | Customize panel render | (panelNode) => VueNode | - | - | × |
+| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | - | × |
+| placeholder | The placeholder of date input | string \| [string, string] | - | - | × |
+| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | - | × |
+| ~~popupStyle~~ | To customize the style of the popup calendar, use `styles.popup.root` instead | CSSProperties | {} | - | × |
+| prefix | The custom prefix | VueNode | - | - | × |
+| presets | The preset ranges for quick selection, Since `5.8.0`, preset value supports callback function. | { label: VueNode, value: Dayjs \| (() => Dayjs) }[] | - | - | × |
+| prevIcon | The custom prev icon | VueNode | - | - | × |
+| previewValue | When the user selects the date hover option, the value of the input field undergoes a temporary change | false \| hover | hover | - | × |
+| size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | - | × |
+| status | Set validation status | 'error' \| 'warning' | - | - | × |
+| suffixIcon | The custom suffix icon | VueNode | - | - | ✓ |
+| superNextIcon | The custom super next icon | VueNode | - | - | × |
+| superPrevIcon | The custom super prev icon | VueNode | - | - | × |
+| clearIcon | (Only supports global configuration) Custom clear icon | VueNode | - | - | ✓ |
+| variant | Variants of picker | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
+
+### Common Methods
+
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus | - |
+| focus() | Get focus | - |
+
+### DatePicker
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| defaultPickerValue | Default panel date, will be reset when panel open | [dayjs](https://day.js.org/) | - | - |
+| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [dayjs](https://day.js.org/) | - | - |
+| disabledTime | To specify the time that cannot be selected | function(date) | - | - |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM-DD` | - |
+| multiple | Enable multiple selection. Not support `showTime` | boolean | false | - |
+| pickerValue | Panel date. Used for controlled switching of panel date. Work with `onPanelChange` | [dayjs](https://day.js.org/) | - | - |
+| renderExtraFooter | Render extra footer in panel | (mode) => VueNode | - | - |
+| showNow | Show the fast access of current datetime | boolean | - | - |
+| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](../time-picker/docs.md/#api) | - |
+| ~~showTime.defaultValue~~ | Use `showTime.defaultOpenValue` instead | [dayjs](https://day.js.org/) | dayjs() | - |
+| showTime.defaultOpenValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | - |
+| showWeek | Show week info when in DatePicker | boolean | false | - |
+| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |
+
+### DatePicker[picker=year]
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | - |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY` | - |
+| multiple | Enable multiple selection | boolean | false | - |
+| renderExtraFooter | Render extra footer in panel | () => VueNode | - | - |
+| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |
+
+### DatePicker[picker=quarter]
+
+Added in `4.1.0`.
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | - |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-\QQ` | - |
+| multiple | Enable multiple selection | boolean | false | - |
+| renderExtraFooter | Render extra footer in panel | () => VueNode | - | - |
+| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |
+
+### DatePicker[picker=month]
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | - |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM` | - |
+| multiple | Enable multiple selection | boolean | false | - |
+| renderExtraFooter | Render extra footer in panel | () => VueNode | - | - |
+| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |
+
+### DatePicker[picker=week]
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | - |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-wo` | - |
+| multiple | Enable multiple selection | boolean | false | - |
+| renderExtraFooter | Render extra footer in panel | (mode) => VueNode | - | - |
+| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |
+| showWeek | Show week info when in DatePicker | boolean | true | - |
+
+### RangePicker
+
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| allowEmpty | Allow start or end input leave empty | [boolean, boolean] | [false, false] | - | × |
+| cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: VueNode, today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => VueNode | - | - | × |
+| dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => VueNode | - | - | × |
+| defaultPickerValue | Default panel date, will be reset when panel open | [dayjs](https://day.js.org/)[] | - | - | × |
+| defaultValue | To set default date | [dayjs](https://day.js.org/)[] | - | - | × |
+| disabled | If disable start or end | [boolean, boolean] | - | - | × |
+| disabledTime | To specify the time that cannot be selected |`function(date: dayjs, partial: start \| end, info: { from?: dayjs })`| - | - | × |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` | - | × |
+| id | Config input ids | `{ start?: string, end?: string }` | - | - | × |
+| pickerValue | Panel date. Used for controlled switching of panel date. Work with `onPanelChange` | [dayjs](https://day.js.org/)[] | - | - | × |
+| presets | The preset ranges for quick selection, Since `5.8.0`, preset value supports callback function. | { label: VueNode, value: (Dayjs \| (() => Dayjs))[] }[] | - | - | × |
+| renderExtraFooter | Render extra footer in panel | () => VueNode | - | - | × |
+| separator | Set separator between inputs | VueNode | `<SwapRightOutlined />` | - | ✓ |
+| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](../time-picker/docs.md/#api) | - | × |
+| ~~showTime.defaultValue~~ | Use `showTime.defaultOpenValue` instead | [dayjs](https://day.js.org/)[] | [dayjs(), dayjs()] | - | × |
+| showTime.defaultOpenValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)[] | [dayjs(), dayjs()] | - | × |
+| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/)[] | - | - | × |
+
+#### formatType
+
+```typescript
+import type { Dayjs } from 'dayjs'
+
+type Generic = string
+type GenericFn = (value: Dayjs) => string
+
+export type FormatType
+  = | Generic
+    | GenericFn
+    | Array<Generic | GenericFn>
+    | {
+      format: string
+      type?: 'mask'
+    }
+```
+
+### Events
+
+| Event | Description | Type | Version |
+| --- | --- | --- | --- |
+| change | Callback function, can be executed when the selected time is changing | (date: Dayjs \| Dayjs[] \| null, dateString: string \| string[] \| null) => void | - |
+| update:value | - | (date: Dayjs \| Dayjs[] \| null) => void | - |
+| calendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | (dates: [Dayjs, Dayjs], dateStrings: [string, string], info: { range: 'start' \| 'end' }) => void | - |
+| panelChange | Callback when picker panel mode is changed | (value: Dayjs, mode: PickerMode) => void | - |
+| openChange | Callback function, can be executed whether the popup calendar is popped up or closed | (open: boolean) => void | - |
+| ok | Callback when click ok button | () => void | - |
+| clear | Callback when click clear button | () => void | 1.4.0 |
+| select | - | (date: Dayjs) => void | - |
+| focus | Trigger when get focus | (event: FocusEvent, info: { range: 'start' \| 'end' }) => void | - |
+| blur | Trigger when lose focus | (event: FocusEvent, info: { range: 'start' \| 'end' }) => void | - |
+| keydown | - | (event: KeyboardEvent, preventDefault: VoidFunction) => void | - |
+
+### Slots
+
+| Slot | Description | Type | Version |
+| --- | --- | --- | --- |
+| suffixIcon | The custom suffix icon | () => any | - |
+| renderExtraFooter | Render extra footer in panel | (mode: PickerMode) => any | - |
+| panelRender | Customize panel render | (originPanel: VueNode) => any | - |
+| inputRender | - | (props: Record<string, any>) => any | - |
+| cellRender | Custom rendering function for picker cells | (ctx: { current: AnyObject, info: any }) => any | - |
+| dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | (ctx: { date: AnyObject, today: AnyObject }) => any | - |
+| monthCellRender | - | (ctx: { date: AnyObject, locale: any }) => any | - |
+
+## Semantic DOM 
+| _semantic | demo/_semantic.md |
+
+## FAQ
+
+### When set mode to DatePicker/RangePicker, cannot select year or month anymore? 
+Please refer [FAQ](../../docs/vue/faq.md#when-set-mode-to-datepickerrangepicker-cannot-select-year-or-month-anymore)
+
+### Why does the date picker switch to the date panel after selecting the year instead of the month panel? 
+After selecting the year, the system directly switches to the date panel instead of month panel. This design is intended to reduce the user's operational burden by allowing them to complete the year modification with just one click, without having to enter the month selection interface again. At the same time, it also avoids additional cognitive burden of remembering the month.
+
+### How to use DatePicker with customize date library like dayjs? 
+Please refer [Use custom date library](../../docs/vue/use-custom-date-library.md#datepicker)
+
+### Why config dayjs.locale globally not work? 
+DatePicker default set `locale` as `en` in v4. You can config DatePicker `locale` prop or [ConfigProvider `locale`](../config-provider/docs.md) prop instead.
+
+#### Date-related components locale is not working?
+
+See FAQ [Date-related-components-locale-is-not-working?](../../docs/vue/faq.md#date-related-components-locale-is-not-working)
+
+### How to modify start day of week? 
+Please use correct [language](../../docs/vue/i18n.md) ([#5605](https://github.com/ant-design/ant-design/issues/5605)), or update dayjs `locale` config:
+
+- Example: <https://codesandbox.io/s/dayjs-day-of-week-x9tuj2?file=/demo.tsx>
+
+```js
+import dayjs from 'dayjs'
+
+import updateLocale from 'dayjs/plugin/updateLocale'
+
+import 'dayjs/locale/zh-cn'
+
+dayjs.extend(updateLocale)
+dayjs.updateLocale('zh-cn', {
+  weekStart: 0,
+})
+```
+
+### Why origin panel don't switch when using `panelRender`? 
+When you change the layout of nodes by `panelRender`, React will unmount and re-mount it which reset the component state. You should keep the layout stable. Please ref [#27263](https://github.com/ant-design/ant-design/issues/27263) for more info.
+
+### How to understand disabled time and date? 
+Please refer to the blog ['Why is it so hard to disable the date?'](/docs/blog/picker), to learn how to use it.

code/fms/.codebuddy/skills/antdv-next/references/components/date-picker/token.md

@@ -0,0 +1,65 @@
+# date-picker Token
+
+Use these variables through `theme.components.DatePicker`. This document lists definitions only and does not include values.
+
+```vue
+<a-config-provider
+  :theme="{
+    token: {
+      // Global token configuration
+    },
+    components: {
+      DatePicker: {
+        // Token name: value
+      },
+    },
+  }"
+>
+  ...
+</a-config-provider>
+```
+
+## Token List
+
+| Token | Type | Description |
+| --- | --- | --- |
+| `presetsWidth` | `number` | Width of preset area |
+| `presetsMaxWidth` | `number` | Max width of preset area |
+| `zIndexPopup` | `number` | z-index of popup |
+| `paddingInline` | `number` | Horizontal padding of input |
+| `paddingInlineSM` | `number` | Horizontal padding of small input |
+| `paddingInlineLG` | `number` | Horizontal padding of large input |
+| `paddingBlock` | `number` | Vertical padding of input |
+| `paddingBlockSM` | `number` | Vertical padding of small input |
+| `paddingBlockLG` | `number` | Vertical padding of large input |
+| `addonBg` | `string` | Background color of addon |
+| `hoverBorderColor` | `string` | Hover border color |
+| `activeBorderColor` | `string` | Active border color |
+| `activeShadow` | `string` | Box-shadow when active |
+| `errorActiveShadow` | `string` | Box-shadow when active in error status |
+| `warningActiveShadow` | `string` | Box-shadow when active in warning status |
+| `hoverBg` | `string` | Background color when the input box hovers |
+| `activeBg` | `string` | Background color when the input box is activated |
+| `inputFontSize` | `number` | Font size |
+| `inputFontSizeLG` | `number` | Font size of large |
+| `inputFontSizeSM` | `number` | Font size of small |
+| `cellHoverBg` | `string` | Background color of cell hover state |
+| `cellActiveWithRangeBg` | `string` | Background color of cell in range |
+| `cellHoverWithRangeBg` | `string` | Background color of hovered cell in range |
+| `cellBgDisabled` | `string` | Background color of disabled cell |
+| `cellRangeBorderColor` | `string` | Border color of cell in range when picking |
+| `timeColumnWidth` | `number` | Width of time column |
+| `timeColumnHeight` | `number` | Height of time column |
+| `timeCellHeight` | `number` | Height of time cell |
+| `cellHeight` | `number` | Height of cell |
+| `cellWidth` | `number` | Width of cell |
+| `textHeight` | `number` | Height of cell text |
+| `withoutTimeCellHeight` | `number` | Height of decade/year/quarter/month/week cell |
+| `multipleItemBg` | `string` | Background color of multiple tag |
+| `multipleItemBorderColor` | `string` | Border color of multiple tag |
+| `multipleItemHeight` | `number` | Height of multiple tag |
+| `multipleItemHeightSM` | `number` | Height of multiple tag with small size |
+| `multipleItemHeightLG` | `number` | Height of multiple tag with large size |
+| `multipleSelectorBgDisabled` | `string` | Background color of multiple selector when disabled |
+| `multipleItemColorDisabled` | `string` | Text color of multiple tag when disabled |
+| `multipleItemBorderColorDisabled` | `string` | Border color of multiple tag when disabled |