vue3横向滚动日期选择器组件(Element Plus)

原创

已于 2025-07-23 14:32:37 修改 · 1.7k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-12-19 11:39:01 首次发布

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('YYY