vue横向滚动日期选择器组件

vue横向滚动日期选择器组件

组件使用到了element-plus组件库和dayjs库，使用前先保证项目中已经下载导入

主要功能：选择日期，点击日期可以让此日期滚动到视图中间，左滑右滑同理，支持跳转至任意日期，支持自定义滚动日期的数量

组件中用到了other.ts
工具代码other.ts

import dayjs from 'dayjs'
import calendar from 'dayjs/plugin/calendar'
import 'dayjs/locale/zh-cn'dayjs.locale('zh-cn')
dayjs.extend(calendar)
dayjs().calendar(null, {sameDay: '[Today]', // The same day ( Today at 2:30 AM )nextDay: '[Tomorrow]', // The next day ( Tomorrow at 2:30 AM )nextWeek: 'dddd', // The next week ( Sunday at 2:30 AM )lastDay: '[Yesterday]', // The day before ( Yesterday at 2:30 AM )lastWeek: '[Last]', // Last week ( Last Monday at 2:30 AM )sameElse: 'DD/MM/YYYY' // Everything else ( 7/10/2011 )
})function judegSame(dj1: dayjs.Dayjs, dj2: dayjs.Dayjs) {return dj1.isSame(dj2)
}function getRelativeTime(dj: dayjs.Dayjs) {let now = dayjs(dayjs().format('YYYY-MM-DD'))if (judegSame(now, dj)) {return '今天'}now = now.add(1, 'day')if (judegSame(now, dj)) {return '明天'}now = now.add(1, 'day')if (judegSame(now, dj)) {return '后天'}let d = dj.day()const backArr = ['日', '一', '二', '三', '四', '五', '六']return '周' + backArr[d]
}export { dayjs, getRelativeTime }

组件代码SlideDatePicker.vue

<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { dayjs, getRelativeTime } from './other';// 日期加载总量
const { count } = withDefaults(defineProps<{count: number
}>(), {count: 30
})
const activeIndex = ref(0)
const dateItemRefs = ref<HTMLElement[]>([])
const dateItmeWrapRef = ref<HTMLElement>()
const curDate = ref('') // 日期选择器 选择的日期const showDateList = ref<Record<string, any>[]>([])const emit = defineEmits(['dateChange'])function calc(format?: string) {if (!format) {format = dayjs().format('YYYY-MM-DD')}showDateList.value = []let beforeCount = Math.floor((count + 1) / 2) // 上取整let afterCount = Math.floor(count / 2)let cur = dayjs(dayjs(format).format('YYYY-MM-DD'))for (let i = 0; i < beforeCount; i++) {showDateList.value.push({date: cur.format('YYYYMMDD'),dateMd: cur.format('MMDD'),week: getRelativeTime(cur)})cur = cur.subtract(1, 'day')}showDateList.value = showDateList.value.reverse() // 反转 让最早的日期排在第一位cur = dayjs(dayjs(format).format('YYYY-MM-DD'))for (let i = 0; i < afterCount; i++) {cur = cur.add(1, 'day')showDateList.value.push({date: cur.format('YYYYMMDD'),dateMd: cur.format('MMDD'),week: getRelativeTime(cur)})}
}const getMiddle = computed(() => {return Math.floor((showDateList.value.length + 1) / 2) - 1
})function move(step: number) {// 越界无效if (activeIndex.value + step >= showDateList.value.length || activeIndex.value + step < 0) {return}activeIndex.value += stepdateItmeWrapRef.value?.scrollTo({behavior: 'smooth',left: (dateItemRefs.value[activeIndex.value].offsetLeft - dateItmeWrapRef.value.offsetWidth / 2)})curDate.value = dayjs(showDateList.value[activeIndex.value].date, 'YYYYMMDD').format('YYYY-MM-DD')emit('dateChange', curDate.value)
}function moveToIndex(index: number) {if (index >= showDateList.value.length || index < 0) {return}activeIndex.value = indexdateItmeWrapRef.value?.scrollTo({behavior: 'smooth',left: (dateItemRefs.value[activeIndex.value].offsetLeft - dateItmeWrapRef.value.offsetWidth / 2)})curDate.value = dayjs(showDateList.value[activeIndex.value].date, 'YYYYMMDD').format('YYYY-MM-DD')emit('dateChange', curDate.value)
}function datePickerChange(value: string) {// 重新计算curDate.value = dayjs(value).format('YYYY-MM-DD')calc(curDate.value)activeIndex.value = getMiddle.valuenextTick(() => {dateItmeWrapRef.value?.scrollTo({behavior: 'instant',left: (dateItemRefs.value[activeIndex.value].offsetLeft - dateItmeWrapRef.value.offsetWidth / 2)})})emit('dateChange', curDate.value)
}onMounted(() => {calc()activeIndex.value = getMiddle.valuecurDate.value = dayjs().format('YYYY-MM-DD')nextTick(() => {dateItmeWrapRef.value?.scrollTo({behavior: 'instant',left: (dateItemRefs.value[activeIndex.value].offsetLeft - dateItmeWrapRef.value.offsetWidth / 2)})})
})</script><template><div class="date_picker_wrap"><div class="left_icon"><el-button :icon="ArrowLeft" link @click="move(-1)"></el-button></div><div class="date_item_wrap" ref="dateItmeWrapRef"><div class="date_item" :class="index === activeIndex ? 'active' : ''" v-for="(item, index) in showDateList"ref="dateItemRefs" @click="moveToIndex(index)"><span>{{ item.dateMd }}</span><span>{{ item.week }}</span></div></div><div class="right_icon"><el-button :icon="ArrowRight" link @click="move(1)"></el-button></div><div class="calendar_icon"><el-date-picker style="width: 126px;" v-model="curDate" type="date" placeholder="选择日期" format="YYYY-MM-DD":clearable="false" @change="datePickerChange" /></div></div>
</template><style scoped>
.date_picker_wrap {background: #fff;width: 100%;height: 52px;border-radius: 6px;padding: 4px 8px;display: flex;align-items: center;font-size: 14px;color: #4b5563;.date_item_wrap {width: 100%;display: flex;flex: 1;overflow: hidden;.active {color: #3c6cfe;}.date_item {padding: 0 6px;width: 96px;height: 100%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;border-left: solid 1px #e5e7eb;border-right: solid 1px #e5e7eb;cursor: pointer;&:hover {color: #3c6cfe;}span {padding: 0 2px;}}}.left_icon,.right_icon,.calendar_icon {padding: 0 8px;}
}
</style>

使用方式

传入count 30，组件初始化横向滚动日期数为30个，初始化数量不要太少，最好占满宽度，让其可以滚动。

<SlideDatePicker :count="30" @dateChange="dateChange" />

function dateChange(value: string) {console.log('选中的日期', value); // 2024-12-19
}

效果图