[Feature Request] Calendar 日历上添加月份，年份切换功能

[cy920820]

这个功能解决了什么问题？

遇到跨年多的场景，用户滑动起来很麻烦

你期望的 API 是什么样子的？

null

[wsi18n]

your can try this:

<script setup lang="tsx">
import dayjs from 'dayjs'
import type { Calendar } from 'vant'
import { computed, reactive, ref, useAttrs, useSlots } from 'vue'

const ATTRS = useAttrs<typeof Calendar>()

const DATA = reactive({
  quickJumpShow: false,
})

const needQuickJump = computed(() => {
  const min = ATTRS['min-date']
  const max = ATTRS['max-date']
  return max && min && dayjs(max).diff(min, 'month') >= 2
})

const SLOTS = {
  subtitle: ({ text }) => <>
    &nbsp; { text }{ needQuickJump.value && <van-icon name="play" /> }
  </>,
  ...useSlots(),
}

function Render({ render, data }) {
  return render?.(data)
}

const calenderRef = ref<typeof Calendar>()

function scrollToDate([year, month]: [string?, string?] = []) {
  if (year && month)
    calenderRef.value?.scrollToDate(new Date(+year, +month - 1, 1)) // month: 0-11
}
</script>

<template>
  <van-calendar
    ref="calenderRef"
    v-bind="ATTRS"
    :teleport="ATTRS.teleport || 'body'"
    @click-subtitle="(e) => {
      DATA.quickJumpShow = true
      ATTRS.onClickSubtitle?.(e)
    }"
  >
    <template v-for="slot, key in SLOTS" :key="key" #[key]="slotProp">
      <Render :render="slot" :data="slotProp" />
    </template>
  </van-calendar>

  <van-popup
    v-if="needQuickJump"
    v-model:show="DATA.quickJumpShow"
    position="bottom"
    :teleport="ATTRS.teleport || 'body'"
  >
    <van-date-picker
      title="跳转年月"
      :model-value="[]"
      :min-date="ATTRS['min-date']"
      :max-date="ATTRS['max-date']"
      :columns-type="['year', 'month']"
      @confirm="({ selectedValues }) => {
        DATA.quickJumpShow = false
        scrollToDate(selectedValues)
      }"
      @cancel="() => {
        DATA.quickJumpShow = false
      }"
    />
  </van-popup>
</template>

[inottn]

@chenjiahan 要支持这个功能的话，对外提供的 api 名称有什么参考的吗

[chenjiahan]

@inottn 可以考虑新增一个 switch-mode 属性：

• switch-mode: 'none' (默认值)：平铺展示所有月份，不展示切换按钮
• switch-mode: 'year-month' ：支持按年切换，也支持按月切换，展示上一年/下一年，上个月/下个月按钮
• switch-mode: 'month' ：仅支持按月切换，展示上个月/下个月按钮

[FrontEndDog]

@inottn 可以考虑新增一个 switch-mode 属性：

• switch-mode: 'none' (默认值)：平铺展示所有月份，不展示切换按钮
• switch-mode: 'year-month' ：支持按年切换，也支持按月切换，展示上一年/下一年，上个月/下个月按钮
• switch-mode: 'month' ：仅支持按月切换，展示上个月/下个月按钮

这种方案还是存在一个问题，比如我需要选中一个比较早的时间，我按年切换的话，还是需要按非常多次上一年。这种体验不太好。

我的另外一种方案是，点击日历副标题的时候，弹出一个年月选择器，用户选择之后则调用scrollToDate，滚动到指定日期。
这种方案有一个弊端，如果日历选择器是在弹窗中使用，点击日历副标题，则又出现一个年月弹窗。不知道是否可以接受弹窗中的弹窗。

如果考虑这种方案的话 我可以实现一下，提个PR。

[inottn]

@inottn 可以考虑新增一个 switch-mode 属性：

• switch-mode: 'none' (默认值)：平铺展示所有月份，不展示切换按钮
• switch-mode: 'year-month' ：支持按年切换，也支持按月切换，展示上一年/下一年，上个月/下个月按钮
• switch-mode: 'month' ：仅支持按月切换，展示上个月/下个月按钮

这种方案还是存在一个问题，比如我需要选中一个比较早的时间，我按年切换的话，还是需要按非常多次上一年。这种体验不太好。

我的另外一种方案是，点击日历副标题的时候，弹出一个年月选择器，用户选择之后则调用scrollToDate，滚动到指定日期。 这种方案有一个弊端，如果日历选择器是在弹窗中使用，点击日历副标题，则又出现一个年月弹窗。不知道是否可以接受弹窗中的弹窗。

如果考虑这种方案的话 我可以实现一下，提个PR。

1. switch-mode 需要解决的问题是，当前交互下可选时间范围过长时，页面节点过多引起的性能问题，并且可选时间范围过长不适合使用平铺展示所有月份的交互方式。
2. 目前基于现有的 api ，用户已经可以实现点击日历副标题的时候，弹出一个年月选择器，或者更贴合业务的逻辑，当然是否提供开箱即用的 api 后续也是可以讨论的。
3. 这两种方案不是相互矛盾的关系。

[nemo-shen]

@inottn

关于你说的缺少 '<<' '>>' icon问题，已和设计师沟通，预计最快会在下周增加，具体进度我会继续跟进

[inottn]

@inottn

关于你说的缺少 '<<' '>>' icon问题，已和设计师沟通，预计最快会在下周增加，具体进度我会继续跟进

nice!

[nemo-shen]

@inottn 两个icon已经增加啦~

[mmxxfff]

2024 年了，强烈要求增加一个 可以切换年月的的功能，如 uniapp 的 Calendar，就可以接受，期望官方大大赶紧实现呀