New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
建议Calendar日历组件增加月份和年份的选择 #12564
Comments
@luckyguanxin 你是希望 |
@luckyguanxin 事实上,目前的 我给你提供一个代码实现,你可以直接使用 <script setup lang="ts">
import { ref } from 'vue';
import {
Calendar as VanCalendar,
DatePicker as VanDatePicker,
Popup as VanPopup,
showToast
}, type { CalendarInstance } from 'vant';
const calendarRef = ref<CalendarInstance>();
const showCalendar = ref(false);
const showDatePicker = ref(false);
// 当前展示的年月
const date = new Date();
const yearMonthDate = ref([date.getFullYear().toString(), '01']);
/**
* 格式化副标题
* @param date 日期
*/
const formatSubtitle = (date: Date) => {
if (date) {
return `${date.getFullYear()}年${date.getMonth() + 1}月`;
}
};
/**
* 展示日历
*/
const show = () => {
showCalendar.value = true;
};
/**
* 日历【确认】按钮点击
* @param date 日期
*/
const onConfirm = (date: Date | Date[]) => {
showToast(date.toLocaleString());
showCalendar.value = false;
};
/**
* 日期选择器【确认】按钮点击
* @param param0 当前选中的年月
*/
const onConfirmDatePicker = ({
selectedValues,
}: {
selectedValues: [string, string];
}) => {
const [year, month] = selectedValues;
calendarRef.value?.scrollToDate(new Date(Number(year), Number(month) - 1, 1));
showDatePicker.value = false;
};
/**
* 点击日历副标题
* @param date 当前副标题日期
*/
const onClickSubtitle = (date: Date) => {
yearMonthDate.value = [
date.getFullYear().toString(),
(date.getMonth() + 1).toString(),
];
showDatePicker.value = true;
};
</script> <template>
<button @click="show">show calendar</button>
<van-calendar
ref="calendarRef"
v-model:show="showCalendar"
@confirm="onConfirm"
>
<template #subtitle="{ date }">
<span @click="onClickSubtitle(date)">{{ formatSubtitle(date) }}</span>
</template>
</van-calendar>
<van-popup position="bottom" v-model:show="showDatePicker">
<van-date-picker
v-model="yearMonthDate"
:columns-type="['year', 'month']"
@confirm="onConfirmDatePicker"
/>
</van-popup>
</template> |
#11228 @chenjiahan 这个是相同的issue么?我们是需要支持切换年月的能力么? |
计划是在 #11228 中提供切换年月的能力,不需要复杂的交互,顶部增加几个切换按钮即可 |
这个 issue 大概是想要可以选择月份或年份区间的能力,类似下图这种交互 然后 #11228 这个之前写的差不多的,但是现有的 icon 少一个像这种的 |
@inottn icon可以用这个么? 但是,emm,看起来如果是要实现月份区间选择的话,你实现的那个左右切年月是不是就无法做到了? 或者直接按照你截图中的实现? |
@nemo-shen 会有同时展示上下月和上下年切换的场景,所以需要两组 icon,单箭头表示上下月切换,双箭头表示上下年切换。 |
@inottn 😂 我已经想到了这个样子了,但是就是这个样子的话好像就无法支持区间选择了 我有个想法是这样的,但是仅做参考,因为改动有点。。。大(或者可以单独提供月份calendar和年份calendar) |
@inottn icon的问题我明天去问问吧,但是大概率会被驳回🤣 @chenjiahan fork一份icon,我们自己画口不口以?毕竟sketch也是开源的 🤡 (仅限vant4) |
这个交互可能有点少见,用户不太会用。。月份 calendar 和年 份calendar 倒没必要,用 picker 就行 |
get~ |
@nemo-shen 我描述的就是想要月份 calendar 和年 份calendar的区间选择,虽然我用PickerGroup选择器组实现了,但是在交互上不是很好,需要进行切换 我描述的就是想要月份 calendar 和年 份calendar的区间选择,虽然我用PickerGroup选择器组实现了,但是在交互上不是很好,需要进行切换 |
所以现在4.8.2有这个效果了吗 |
这个功能解决了什么问题?
在某些场景需要选择月份或年份区间,而PickerGroup选择器组的界面不能直观的显示和操作。
你期望的 API 是什么样子的?
```[tasklist] ### Tasks ```The text was updated successfully, but these errors were encountered: