Repository: element-plus/element-plus
File: packages/components/date-picker/src/date-picker-com/panel-date-pick.vue (Vue)

Code before:
    [EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.numpadEnter].includes(
      code
    ) &&
    userInputDate.value === null &&
    userInputTime.value === null
  ) {
    event.preventDefault()
    emit(innerDate.value, false)
  }
}

const handleKeyControl = (code: string) => {
  type KeyControlMappingCallableOffset = (date: Date, step?: number) => number
  type KeyControl = {
    [key: string]:
      | number
      | KeyControlMappingCallableOffset
      | ((date: Date, step: number) => any)
    offset: (date: Date, step: number) => any
  }
  interface KeyControlMapping {
    [key: string]: KeyControl
  }

  const { up, down, left, right, home, end, pageUp, pageDown } = EVENT_CODE
  const mapping: KeyControlMapping = {
    year: {
      [up]: -4,
      [down]: 4,
      [left]: -1,
      [right]: 1,
      offset: (date: Date, step: number) =>
        date.setFullYear(date.getFullYear() + step),
    },
    month: {
      [up]: -4,
      [down]: 4,
      [left]: -1,
      [right]: 1,
      offset: (date: Date, step: number) =>
        date.setMonth(date.getMonth() + step),
    },
    week: {
      [up]: -1,
      [down]: 1,
      [left]: -1,
      [right]: 1,
      offset: (date: Date, step: number) =>
        date.setDate(date.getDate() + step * 7),
    },
    date: {

Review comment (bug):
Same with #11609

This PR will affect accessibility features. [Bug](https://element-plus.run/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgY3VycmVudERhdGUgPSByZWY8RGF0ZT4oKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPHA+Q2xpY2sgbWU8L3A+XG4gIDxwPlByZXNzIHRoZSBUYWIga2V5PC9wPlxuICA8cD5QcmVzcyB0aGUgQXJyb3cgZG93biBrZXk8L3A+XG4gIDxwPlByZXNzIHRoZSBBcnJvdyBkb3duIGtleTwvcD5cblxuICA8ZWwtZGF0ZS1waWNrZXJcbiAgICB2LW1vZGVsPVwiY3VycmVudERhdGVcIlxuICAgIHR5cGU9XCJ3ZWVrXCJcbiAgICBmb3JtYXQ9XCJbV2Vla10gd3dcIlxuICAgIHBsYWNlaG9sZGVyPVwiUGljayBhIHdlZWtcIlxuICAvPlxuPC90ZW1wbGF0ZT5cbiIsImVsZW1lbnQtcGx1cy5qcyI6ImltcG9ydCB7IGdldEN1cnJlbnRJbnN0YW5jZSB9IGZyb20gJ3Z1ZSdcbmltcG9ydCBFbGVtZW50UGx1cyBmcm9tICdlbGVtZW50LXBsdXMnXG5cbmxldCBpbnN0YWxsZWQgPSBmYWxzZVxuYXdhaXQgbG9hZFN0eWxlKClcblxuZXhwb3J0IGZ1bmN0aW9uIHNldHVwRWxlbWVudFBsdXMoKSB7XG4gIGlmIChpbnN0YWxsZWQpIHJldHVyblxuICBjb25zdCBpbnN0YW5jZSA9IGdldEN1cnJlbnRJbnN0YW5jZSgpXG4gIGluc3RhbmNlLmFwcENvbnRleHQuYXBwLnVzZShFbGVtZW50UGx1cylcbiAgaW5zdGFsbGVkID0gdHJ1ZVxufVxuXG5leHBvcnQgZnVuY3Rpb24gbG9hZFN0eWxlKCkge1xuICBjb25zdCBzdHlsZXMgPSBbJ2h0dHBzOi8vcHJldmlldy0xNjc5NS1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL2luZGV4LmNzcycsICdodHRwczovL3ByZXZpZXctMTY3OTUtZWxlbWVudC1wbHVzLnN1cmdlLnNoL2J1bmRsZS9pbmRleC5jc3MnXS5tYXAoKHN0eWxlKSA9PiB7XG4gICAgcmV0dXJuIG5ldyBQcm9taXNlKChyZXNvbHZlLCByZWplY3QpID0+IHtcbiAgICAgIGNvbnN0IGxpbmsgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaW5rJylcbiAgICAgIGxpbmsucmVsID0gJ3N0eWxlc2hlZXQnXG4gICAgICBsaW5rLmhyZWYgPSBzdHlsZVxuICAgICAgbGluay5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgcmVzb2x2ZSlcbiAgICAgIGxpbmsuYWRkRXZlbnRMaXN0ZW5lcignZXJyb3InLCByZWplY3QpXG4gICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZChsaW5rKVxuICAgIH0pXG4gIH0pXG4gIHJldHVybiBQcm9taXNlLmFsbFNldHRsZWQoc3R5bGVzKVxufVxuIiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIlBsYXlncm91bmRNYWluLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG5pbXBvcnQgQXBwIGZyb20gJy4vQXBwLnZ1ZSdcbmltcG9ydCB7IHNldHVwRWxlbWVudFBsdXMgfSBmcm9tICcuL2VsZW1lbnQtcGx1cy5qcydcbnNldHVwRWxlbWVudFBsdXMoKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPEFwcCAvPlxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vdW5wa2cuY29tL0B2dWUvcnVudGltZS1kb21AbGF0ZXN0L2Rpc3QvcnVudGltZS1kb20uZXNtLWJyb3dzZXIuanNcIixcbiAgICBcIkB2dWUvc2hhcmVkXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zaGFyZWRAbGF0ZXN0L2Rpc3Qvc2hhcmVkLmVzbS1idW5kbGVyLmpzXCIsXG4gICAgXCJlbGVtZW50LXBsdXNcIjogXCJodHRwczovL3ByZXZpZXctMTY3OTUtZWxlbWVudC1wbHVzLnN1cmdlLnNoL2J1bmRsZS9pbmRleC5mdWxsLm1pbi5tanNcIixcbiAgICBcImVsZW1lbnQtcGx1cy9cIjogXCJ1bnN1cHBvcnRlZFwiLFxuICAgIFwiQGVsZW1lbnQtcGx1cy9pY29ucy12dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AZWxlbWVudC1wbHVzL2ljb25zLXZ1ZUAyL2Rpc3QvaW5kZXgubWluLmpzXCJcbiAgfSxcbiAgXCJzY29wZXNcIjoge31cbn0iLCJfbyI6eyJzaG93SGlkZGVuIjp0cnVlLCJzdHlsZVNvdXJjZSI6Imh0dHBzOi8vcHJldmlldy0xNjc5NS1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL2luZGV4LmNzcyJ9fQ==)

The contextEmit('set-picker-option', ['handleFocusPicker', handleFocusPicker]) needs to call handleKeyControl(EVENT_CODE.down).


Code after:
    : (value as Dayjs).format(props.format)
}

const parseUserInput = (value: Dayjs) => {
  return dayjs(value, props.format).locale(lang.value)
}

const getDefaultValue = () => {
  const parseDate = dayjs(defaultValue.value).locale(lang.value)
  if (!defaultValue.value) {
    const defaultTimeDValue = defaultTimeD.value
    return dayjs()
      .hour(defaultTimeDValue.hour())
      .minute(defaultTimeDValue.minute())
      .second(defaultTimeDValue.second())
      .locale(lang.value)
  }
  return parseDate
}

const handleFocusPicker = () => {
  if (['week', 'month', 'year', 'date'].includes(selectionMode.value)) {
    currentViewRef.value?.focus()
  }
}

const _handleFocusPicker = () => {
  handleFocusPicker()
  // TODO: After focus the date input, the first time you use the ArrowDown keys, you cannot focus on the date cell
  if (selectionMode.value === 'week') {
    handleKeyControl(EVENT_CODE.down)
  }
}

const handleKeydownTable = (event: KeyboardEvent) => {
  const { code } = event
  const validCode = [
    EVENT_CODE.up,
    EVENT_CODE.down,
    EVENT_CODE.left,
    EVENT_CODE.right,
    EVENT_CODE.home,
    EVENT_CODE.end,
    EVENT_CODE.pageUp,
    EVENT_CODE.pageDown,
  ]
  if (validCode.includes(code)) {
    handleKeyControl(code)
    event.stopPropagation()
    event.preventDefault()
  }