Vue3日历（Calendar）

news/2025/2/19 8:53:33/

效果如下图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在线预览

APIs

Calendar

参数说明类型默认值
display日历展示方式，面板/卡片‘panel’ | ‘card’‘panel’
mode初始模式‘month’ | ‘year’‘month’
header自定义日历头部内容string | slotundefined
startDayOfWeek一周的开始是星期几，0-6，0 是周一DayOfWeek0
dateStrip日历面板默认会显示六周的日期，当最后一周的日期不包含当月日期时，是否去掉booleantrue
dateFormat自定义日期展示格式(date: number, timestamp: number) => stringundefined
weekFormat自定义星期展示格式 (defaultWeek: DefaultWeek, week: number, timestamp: number) => stringundefined
monthFormat自定义月展示格式(month: number, timestamp: number) => stringundefined
disabledDate不可选择的日期(timestamp: number) => booleanundefined
valueFormat被选中日期的格式，默认为时间戳；参考 formatstringundefined
value v-model当前被选中的日期的时间戳string | numberundefined

DayOfWeek Type

名称值
DayOfWeek0 | 1 | 2 | 3 | 4 | 5 | 6

DefaultWeek Type

名称值
DefaultWeek‘一’ | ‘二’ | ‘三’ | ‘四’ | ‘五’ | ‘六’ | ‘日’

DateItem Type

名称说明类型默认值
type类型‘date’undefined
dateObject日期对象{ date: number, month: number, year: number }undefined
timestamp时间戳numberundefined
inCurrentMonth是否在当前月booleanundefined
isCurrentDate是否为今天booleanundefined

MonthItem Type

名称说明类型默认值
type类型‘month’undefined
monthObject月份对象{ month: number, year: number }undefined
timestamp时间戳numberundefined
isCurrent是否为当前月booleanundefined

Slots

名称说明类型
header自定义日历头部内容v-slot:header
week自定义周展示v-slot:week=“{ defaultWeek, week, timestamp }”
dateValue自定义日期展示v-slot:dateValue=“{ type, dateObject, timestamp, inCurrentMonth, isCurrentDate }”
dateContent自定义日期内容展示v-slot:dateContent=“{ type, dateObject, timestamp, inCurrentMonth, isCurrentDate }”
monthValue自定义月份展示v-slot:dateValue=“{ type, monthObject, timestamp, isCurrent }”
monthContent自定义月份内容展示v-slot:dateContent=“{ type, monthObject, timestamp, isCurrent }”

Events

名称说明类型
change日期变化时的回调(date: string | number, dateOrMonth: DateItem[‘dateObject’] | MonthItem[‘monthObject’]) => void
panelChange日期面板变化的回调(date: string | number, info: { year: number, month?: number }, mode: ‘month’ | ‘year’) => void
select选择日期回调，包含来源信息(date: string | number, source: ‘date’ | ‘month’) => void

创建日历组件ColorPicker.vue

其中引入使用了以下组件和工具函数：

  • Vue3选择器（Select）
  • Vue3单选框（Radio）
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import {addDays,addMonths,addYears,format,getDate,getDay,getMonth,getTime,getYear,isSameDay,isSameMonth,parse,startOfDay,startOfMonth,startOfYear
} from 'date-fns'
import Select from 'components/select'
import Radio from 'components/radio'
import { useSlotsExist } from 'components/utils'
import type { SelectOption, RadioOption } from 'vue-amazing-ui'
export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6
export type DefaultWeek = '一' | '二' | '三' | '四' | '五' | '六' | '日'
export interface Props {display?: 'panel' | 'card' // 日历展示方式，面板/卡片mode?: 'month' | 'year' // 初始模式header?: string // 自定义日历头部内容 string | slotstartDayOfWeek?: DayOfWeek // 一周的开始是星期几，0-6，0 是周一dateStrip?: boolean // 日历面板默认会显示六周的日期，当最后一周的日期不包含当月日期时，是否去掉dateFormat?: (date: number, timestamp: number) => string // 自定义日期展示格式weekFormat?: (defaultWeek: DefaultWeek, week: number, timestamp: number) => string // 自定义星期展示格式monthFormat?: (month: number, timestamp: number) => string // 自定义月展示格式disabledDate?: (timestamp: number) => boolean // 不可选择的日期valueFormat?: string // 被选中日期的格式，默认为时间戳；参考 format https://date-fns.org/v4.1.0/docs/formatvalue?: string | number // (v-model) 当前被选中的日期的时间戳
}
const props = withDefaults(defineProps<Props>(), {display: 'panel',mode: 'month',header: undefined,startDayOfWeek: 0,dateStrip: true,dateFormat: undefined,weekFormat: undefined,monthFormat: undefined,disabledDate: undefined,valueFormat: undefined,value: undefined
})
export interface DateItem {type: 'date'dateObject: {date: numbermonth: numberyear: number}timestamp: numberinCurrentMonth: booleanisCurrentDate: boolean
}
export interface MonthItem {type: 'month'monthObject: {month: numberyear: number}timestamp: numberisCurrent: boolean
}
const now = ref(Date.now())
const yearOptions = ref<SelectOption[]>([])
const monthOptions = ref<SelectOption[]>(getMonthOptions())
const modeOptions = ref<RadioOption[]>([{label: '月',value: 'month'},{label: '年',value: 'year'}
])
const calendarYear = ref<number>(getYear(now.value))
const calendarMonth = ref<number>(getMonth(now.value) + 1)
const calendarMode = ref<Props['mode']>(props.mode)
const calendarDates = ref<Array<DateItem[]>>([])
const selectedValue = ref<string | number>()
const calendarMonths = ref<Array<MonthItem[]>>([])
const slotsExist = useSlotsExist(['header'])
const emits = defineEmits(['update:value', 'change', 'panelChange', 'select'])
const defaultWeeks = computed(() => {const origin: DefaultWeek[] = ['一', '二', '三', '四', '五', '六', '日']const result: DefaultWeek[] = []result.push(origin[props.startDayOfWeek])let startDay = (props.startDayOfWeek + 1) % 7while (startDay !== props.startDayOfWeek) {result.push(origin[startDay])startDay = (startDay + 1) % 7}return result
})
const selectedValueTimestamp = computed(() => {if (!selectedValue.value) returnif (typeof selectedValue.value === 'string') {return parse(selectedValue.value, props.valueFormat as string, new Date()).getTime()}return selectedValue.value
})
const startOfMonthTimestamp = computed(() => {const firstDayOfMonth = new Date(calendarYear.value, calendarMonth.value - 1, 1)return firstDayOfMonth.getTime()
})
const showHeader = computed(() => {return slotsExist.header || props.header
})
watch(selectedValueTimestamp,(to) => {if (to) {calendarYear.value = getYear(to)calendarMonth.value = getMonth(to) + 1}},{immediate: true}
)
watch(() => props.mode,(to) => {calendarMode.value = to}
)
watch(() => [props.startDayOfWeek, props.dateStrip, calendarMonth.value, calendarYear.value],() => {calendarDates.value = getCalendarDates()},{immediate: true,deep: true}
)
watch(calendarYear,() => {yearOptions.value = getYearOptions()calendarMonths.value = getCalendarMonths()},{immediate: true}
)
watch(() => [props.valueFormat, props.value],() => {if (props.value) {if (props.valueFormat === undefined || props.valueFormat === 'T') {selectedValue.value = Number(format(startOfDay(props.value).getTime(), props.valueFormat || 'T'))} else {selectedValue.value = format(startOfDay(props.value).getTime(), props.valueFormat)}}},{deep: true,immediate: true}
)
function getYearOptions(): SelectOption[] {const options = []const startYear = calendarYear.value - 10const endYear = calendarYear.value + 10for (let y = startYear; y < endYear; y++) {options.push({label: `${y}年`,value: y})}return options
}
function getMonthOptions(): SelectOption[] {const options = []for (let m = 1; m <= 12; m++) {options.push({label: `${m}月`,value: m})}return options
}
function getDateItem(time: number, monthTs: number, currentTs: number): DateItem {return {type: 'date',dateObject: {date: getDate(time),month: getMonth(time),year: getYear(time)},timestamp: getTime(time),inCurrentMonth: isSameMonth(time, monthTs),isCurrentDate: isSameDay(currentTs, time)}
}
function getDates(monthTs: number, currentTs: number, startDay: DayOfWeek, strip: boolean = false): DateItem[] {const displayMonth = getMonth(monthTs)// First day of current monthlet displayMonthIterator = getTime(startOfMonth(monthTs))// Last day of last monthlet lastMonthIterator = getTime(addDays(displayMonthIterator, -1))const calendarDays: DateItem[] = []let protectLastMonthDateIsShownFlag = !stripwhile (getDay(lastMonthIterator) !== startDay || protectLastMonthDateIsShownFlag) {calendarDays.unshift(getDateItem(lastMonthIterator, monthTs, currentTs))lastMonthIterator = getTime(addDays(lastMonthIterator, -1))protectLastMonthDateIsShownFlag = false}while (getMonth(displayMonthIterator) === displayMonth) {calendarDays.push(getDateItem(displayMonthIterator, monthTs, currentTs))displayMonthIterator = getTime(addDays(displayMonthIterator, 1))}const endIndex = strip ? (calendarDays.length <= 28 ? 28 : calendarDays.length <= 35 ? 35 : 42) : 42while (calendarDays.length < endIndex) {calendarDays.push(getDateItem(displayMonthIterator, monthTs, currentTs))displayMonthIterator = getTime(addDays(displayMonthIterator, 1))}return calendarDays
}
function getCalendarDates(): DateItem[][] {const dates = getDates(startOfMonthTimestamp.value, Date.now(), props.startDayOfWeek, props.dateStrip)const chunkSize = 7const chunkCount = dates.length / chunkSizeconst result: DateItem[][] = []for (let i = 0; i < chunkCount; i++) {result.push(dates.slice(i * chunkSize, (i + 1) * chunkSize))}return result
}
function getMonthItem(monthTs: number, currentTs: number): MonthItem {return {type: 'month',monthObject: {month: getMonth(monthTs),year: getYear(monthTs)},timestamp: getTime(monthTs),isCurrent: isSameMonth(currentTs, monthTs)}
}
function getMonths(yearAnchorTs: number, currentTs: number): MonthItem[] {const calendarMonths: MonthItem[] = []const yearStart = startOfYear(yearAnchorTs)for (let i = 0; i < 12; i++) {calendarMonths.push(getMonthItem(getTime(addMonths(yearStart, i)), currentTs))}return calendarMonths
}
function getCalendarMonths(): MonthItem[][] {const months = getMonths(startOfMonthTimestamp.value, Date.now())const chunkSize = 3const chunkCount = months.length / chunkSizeconst result: MonthItem[][] = []for (let i = 0; i < chunkCount; i++) {result.push(months.slice(i * chunkSize, (i + 1) * chunkSize))}return result
}
function getDateStr(date: DateItem): string {return format(date.timestamp, 'yyyy-MM-dd')
}
function getMonthStr(month: MonthItem): string {return format(month.timestamp, 'yyyy-MM')
}
function getDateFormat(date: number, timestamp: number): string {if (props.dateFormat === undefined) {return `${date}`} else {return props.dateFormat(date, timestamp)}
}
function getWeekFormat(defaultWeek: DefaultWeek, week: number, timestamp: number): string {if (props.weekFormat === undefined) {return defaultWeek} else {return props.weekFormat(defaultWeek, week, timestamp)}
}
function getMonthFormat(month: number, timestamp: number): string {if (props.monthFormat === undefined) {return `${month}月`} else {return props.monthFormat(month, timestamp)}
}
function onDateSelected(date: DateItem): void {if (selectedValueTimestamp.value !== date.timestamp) {if (date.dateObject.month + 1 !== calendarMonth.value) {calendarMonth.value = date.dateObject.month + 1}if (props.valueFormat === undefined || props.valueFormat === 'T') {selectedValue.value = date.timestamp} else {selectedValue.value = format(date.timestamp, props.valueFormat)}emits('update:value', selectedValue.value)emits('select', selectedValue.value, 'date')emits('change', selectedValue.value, date.dateObject)}
}
function getSelectedValueStartOfMonthTimeStamp(): number | undefined {if (!selectedValue.value) returnif (typeof selectedValue.value === 'string') {const selectedValueTimestamp = parse(selectedValue.value, props.valueFormat as string, new Date()).getTime()return startOfMonth(selectedValueTimestamp).getTime()}return startOfMonth(selectedValue.value).getTime()
}
function onMonthSelected(month: MonthItem): void {if (getSelectedValueStartOfMonthTimeStamp() !== month.timestamp) {calendarMonth.value = month.monthObject.month + 1if (selectedValue.value) {const offsetYears = month.monthObject.year - getYear(selectedValueTimestamp.value as number)const offsetMonths = month.monthObject.month - getMonth(selectedValueTimestamp.value as number)const newDate = addMonths(addYears(selectedValueTimestamp.value as number, offsetYears), offsetMonths)if (props.valueFormat === undefined || props.valueFormat === 'T') {selectedValue.value = Number(format(newDate, props.valueFormat || 'T'))} else {selectedValue.value = format(newDate, props.valueFormat)}}emits('update:value', selectedValue.value)emits('select', selectedValue.value, 'month')emits('change', selectedValue.value, month.monthObject)}
}
function onPanelChange(): void {if (calendarMode.value === 'month') {emits('panelChange',selectedValue.value,{ year: calendarYear.value, month: calendarMonth.value },calendarMode.value)} else {emits('panelChange', selectedValue.value, { year: calendarYear.value }, calendarMode.value)}
}
</script>
<template><div class="m-calendar" :class="`calendar-${display}`"><div class="calendar-header-wrap"><div v-if="showHeader" class="calendar-header-content"><slot name="header">{{ header }}</slot></div><div class="calendar-header-actions"><Selectclass="calendar-year-select":size="display === 'card' ? 'small' : 'middle'":options="yearOptions":max-display="8"v-model="calendarYear"@change="onPanelChange"/><Selectv-if="calendarMode === 'month'"class="calendar-month-select":size="display === 'card' ? 'small' : 'middle'":options="monthOptions":max-display="8"v-model="calendarMonth"@change="onPanelChange"/><Radioclass="calendar-mode-radio":button-size="display === 'card' ? 'small' : 'middle'":options="modeOptions"v-model:value="calendarMode"button@change="onPanelChange"/></div></div><div tabindex="0" class="calendar-display-wrap"><div v-if="calendarMode === 'month'" class="calendar-date-panel"><div class="calendar-body"><table class="calendar-table"><thead><tr><th v-for="(defaultWeek, index) in defaultWeeks" :key="index"><slotname="week":defaultWeek="defaultWeek":week="index":timestamp="calendarDates[0][index].timestamp">{{ getWeekFormat(defaultWeek, index, calendarDates[0][index].timestamp) }}</slot></th></tr></thead><tbody><tr v-for="(weekDates, weekIndex) in calendarDates" :key="weekIndex"><tdclass="calendar-date-cell":class="{'date-cell-disabled': disabledDate && disabledDate(dateItem.timestamp),'date-cell-in-view': dateItem.inCurrentMonth,'date-cell-today': dateItem.isCurrentDate,'date-cell-selected': selectedValueTimestamp && selectedValueTimestamp === dateItem.timestamp}"v-for="(dateItem, index) in weekDates":key="index":title="getDateStr(dateItem)"><div class="date-cell-inner" @click="onDateSelected(dateItem)"><div class="date-value"><slot name="dateValue" v-bind="dateItem">{{getDateFormat(dateItem.dateObject.date, dateItem.timestamp)}}</slot></div><div class="date-content"><slot name="dateContent" v-bind="dateItem"></slot></div></div></td></tr></tbody></table></div></div><div v-if="calendarMode === 'year'" class="calendar-month-panel"><div class="calendar-body"><table class="calendar-table"><tbody><tr v-for="(rowMonths, rowIndex) in calendarMonths" :key="rowIndex"><tdclass="calendar-date-cell date-cell-in-view":class="{'date-cell-today': monthItem.isCurrent,'date-cell-selected':selectedValueTimestamp && startOfMonth(selectedValueTimestamp).getTime() === monthItem.timestamp}"v-for="(monthItem, index) in rowMonths":key="index":title="getMonthStr(monthItem)"><div class="date-cell-inner" @click="onMonthSelected(monthItem)"><div class="date-value"><slot name="monthValue" v-bind="monthItem">{{getMonthFormat(monthItem.monthObject.month + 1, monthItem.timestamp)}}</slot></div><div class="date-content"><slot name="monthContent" v-bind="monthItem"></slot></div></div></td></tr></tbody></table></div></div></div></div>
</template>
<style lang="less" scoped>
.m-calendar {color: rgba(0, 0, 0, 0.88);font-size: 14px;line-height: 1.5714285714285714;list-style: none;background: #ffffff;border-radius: 4px;.calendar-header-wrap {padding: 12px 0;.calendar-header-content {margin-bottom: 10px;:deep(svg) {fill: currentColor;}}.calendar-header-actions {display: flex;justify-content: flex-end;.calendar-month-select {margin-left: 8px;}.calendar-mode-radio {margin-left: 8px;}}}.calendar-display-wrap {background: #ffffff;outline: none;.calendar-date-panel,.calendar-month-panel {display: flex;flex-direction: column;width: auto;.calendar-body {padding: 8px 0;.calendar-table {display: table;margin: 0;width: 100%;table-layout: fixed;border-collapse: collapse;tr {border: none;background-color: transparent;}th,td {position: relative;min-width: 24px;font-size: inherit;font-weight: normal;padding: 0;border: none;}th {text-align: inherit;height: auto;line-height: 18px;width: 36px;color: rgba(0, 0, 0, 0.88);vertical-align: middle;background: transparent;}.calendar-date-cell {color: rgba(0, 0, 0, 0.25);cursor: pointer;.date-cell-inner {position: relative;z-index: 2;min-width: 24px;line-height: 24px;}&:hover:not(.date-cell-selected) {.date-cell-inner {background: rgba(0, 0, 0, 0.04);}}}.date-cell-disabled {color: rgba(0, 0, 0, 0.25);pointer-events: none;}.date-cell-in-view:not(.date-cell-disabled):not(.date-cell-selected) {color: rgba(0, 0, 0, 0.88);}}}}}
}
.calendar-panel {.calendar-header-wrap {.calendar-header-actions {.calendar-year-select {min-width: 90px;}.calendar-month-select {min-width: 72px;}}}.calendar-display-wrap {width: 100%;text-align: end;.calendar-date-panel,.calendar-month-panel {.calendar-body {.calendar-table {th {padding-right: 12px;padding-bottom: 4px;}.calendar-date-cell {.date-cell-inner {display: block;width: auto;height: auto;margin: 0 4px;padding: 4px 8px 0;border: 0;border-top: 2px solid rgba(5, 5, 5, 0.06);border-radius: 0;transition: background 0.3s;.date-value {line-height: 24px;transition: color 0.3s;}.date-content {position: static;width: auto;height: 86px;overflow-y: auto;color: rgba(0, 0, 0, 0.88);line-height: 1.5714285714285714;text-align: start;}}}.date-cell-today {.date-cell-inner {border-color: #1677ff;.date-value {color: rgba(0, 0, 0, 0.88);}}}.date-cell-selected {.date-cell-inner {color: #1677ff;background: #e6f4ff;}}}}}}
}
.calendar-card {width: 300px;border: 1px solid rgb(217, 217, 217);border-radius: 4px;.calendar-header-wrap {padding-left: 8px;padding-right: 8px;.calendar-header-actions {.calendar-year-select {min-width: 86px;}.calendar-month-select {min-width: 70px;}}}.calendar-display-wrap {display: inline-flex;flex-direction: column;text-align: center;border-top: 1px solid rgba(5, 5, 5, 0.06);border-radius: 0 0 8px 8px;.calendar-date-panel,.calendar-month-panel {.calendar-body {.calendar-table {.calendar-date-cell {padding: 4px 0;&::before {position: absolute;top: 50%;left: 0;right: 0;z-index: 1;height: 24px;transform: translateY(-50%);transition: all 0.3s;content: '';pointer-events: none;}.date-cell-inner {display: inline-block;height: 24px;border-radius: 4px;transition:background 0.2s,color 0.2s;}}.date-cell-disabled {&::before {background: rgba(0, 0, 0, 0.04);}}.date-cell-today {.date-cell-inner {&::before {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;border: 1px solid #1677ff;border-radius: 4px;content: '';}}}.date-cell-disabled.date-cell-today {.date-cell-inner {&::before {border-color: rgba(0, 0, 0, 0.25);}}}.date-cell-selected {.date-cell-inner {color: #fff;background: #1677ff;}}}}}.calendar-date-panel {.calendar-body {.calendar-table {.calendar-date-cell {height: 40px;}}}}.calendar-month-panel {.calendar-body {.calendar-table {.calendar-date-cell {height: 64px;.date-cell-inner {width: 60px;padding: 0 8px;}}}}}}
}
</style>

在要使用的页面引入

其中引入使用了以下组件：

  • Vue3弹性布局（ Flex）
  • Vue3间距（Space）
  • Vue3警告提示（Alert）
  • Vue3全局提示（Message）
<script setup lang="ts">
import Calendar from './Calendar.vue'
import { ref, watchEffect } from 'vue'
import { CalendarOutlined } from '@ant-design/icons-vue'
import { format, subDays, addDays } from 'date-fns'
import type { CalendarDayOfWeek, CalendarDefaultWeek, CalendarDateItem, CalendarMonthItem } from 'components/index'
const date = ref(Date.now())
const cardDate = ref(Date.now())
const modeDate = ref(Date.now())
const customCardStyleDate = ref(Date.now())
const headerDate = ref(Date.now())
const startDayOfWeekDate = ref(Date.now())
const formatDate = ref(Date.now())
const noticeDate = ref(Date.now())
const slotDate = ref(Date.now())
const selectDate = ref(new Date('2030-10-06').getTime())
const disableDate = ref(Date.now())
const dateStr = ref(format(Date.now(), 'yyyy-MM-dd'))
const message = ref()
const displayOptions = [{label: 'panel',value: 'panel'},{label: 'card',value: 'card'}
]
const modeDisplay = ref('card')
const display = ref('panel')
const weekOptions = [{label: '周一',value: 0},{label: '周二',value: 1},{label: '周三',value: 2},{label: '周四',value: 3},{label: '周五',value: 4},{label: '周六',value: 5},{label: '周日',value: 6}
]
const startDayOfWeek = ref<CalendarDayOfWeek>(6)
watchEffect(() => {console.log('date', date.value)
})
watchEffect(() => {console.log('cardDate', cardDate.value)
})
watchEffect(() => {console.log('modeDate', modeDate.value)
})
watchEffect(() => {console.log('customCardStyleDate', customCardStyleDate.value)
})
watchEffect(() => {console.log('headerDate', headerDate.value)
})
watchEffect(() => {console.log('startDayOfWeekDate', startDayOfWeekDate.value)
})
watchEffect(() => {console.log('formatDate', formatDate.value)
})
watchEffect(() => {console.log('noticeDate', noticeDate.value)
})
watchEffect(() => {console.log('slotDate', slotDate.value)
})
watchEffect(() => {console.log('selectDate', selectDate.value)
})
watchEffect(() => {console.log('disableDate', disableDate.value)
})
watchEffect(() => {console.log('dateStr', dateStr.value)
})
function cardDateFormat(date: number, timestamp: number) {return String(date).padStart(2, '0')
}
function cardWeekFormat(defaultWeek: CalendarDefaultWeek, week: CalendarDayOfWeek) {return `周${defaultWeek}`
}
function cardMonthFormat(month: number, timestamp: number) {const chineseNumber = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']return `${chineseNumber[month - 1]}月`
}
function panelDateFormat(date: number, timestamp: number) {return format(timestamp, 'do')
}
function panelWeekFormat(defaultWeek: CalendarDefaultWeek, week: CalendarDayOfWeek, timestamp: number) {return format(timestamp, 'EEEE')
}
function panelMonthFormat(month: number, timestamp: number) {return format(timestamp, 'MMM')
}
function disabledDate(timestamp: number): boolean {if (subDays(Date.now(), 4).getTime() < timestamp && timestamp < addDays(Date.now(), 3).getTime()) {return true}return false
}
function disabledWeekend(timestamp: number): boolean {return ['6', '7'].includes(format(timestamp, 'i'))
}
function onSelect(date: string | number, source: 'date' | 'month') {console.log('select', date, source)message.value.success(format(date, 'yyyy-MM-dd'))
}
function onChange(date: string | number,dateOrMonth: CalendarDateItem['dateObject'] | CalendarMonthItem['monthObject']
) {console.log('change', date, dateOrMonth)
}
function onPanelChange(date: string | number, info: { year: number; month?: number }, mode: 'month' | 'year') {console.log('panelChange', date, info, mode)
}
</script>
<template><div><h1>{{ $route.name }} {{ $route.meta.title }}</h1><h2 class="mt30 mb10">基本使用</h2><Calendar v-model:value="date" @change="onChange" @panelChange="onPanelChange" /><h2 class="mt30 mb10">卡片模式</h2><Calendar v-model:value="cardDate" display="card" @change="onChange" @panelChange="onPanelChange" /><h2 class="mt30 mb10">初始模式</h2><Flex vertical><Space align="center">display:<Radio :options="displayOptions" v-model:value="modeDisplay" button button-style="solid" /></Space><Calendar v-model:value="modeDate" mode="year" :display="modeDisplay" /></Flex><h2 class="mt30 mb10">自定义头部内容</h2><Space><Calendar v-model:value="headerDate" header="Custom header" display="card" @panelChange="onPanelChange" /><Calendar v-model:value="headerDate" display="card" @panelChange="onPanelChange"><template #header> <CalendarOutlined /> 日历 </template></Calendar></Space><h2 class="mt30 mb10">自定义一周的开始</h2><Flex vertical><Space align="center">startDayOfWeek:<Radio :options="weekOptions" v-model:value="startDayOfWeek" button button-style="solid" /></Space><Calendar v-model:value="startDayOfWeekDate" :start-day-of-week="startDayOfWeek" /></Flex><h2 class="mt30 mb10">自定义展示格式</h2><h3 class="mb10">使用 weekFormat / dateFormat / monthFormat 自定义日期/星期/月的展示格式</h3><Flex vertical><Space><Calendarheader="Date format"display="card"v-model:value="formatDate":date-format="cardDateFormat"@panelChange="onPanelChange"/><Calendarheader="Week format"display="card"v-model:value="formatDate":week-format="cardWeekFormat"@panelChange="onPanelChange"/><Calendarheader="Month format"mode="year"display="card"v-model:value="formatDate":month-format="cardMonthFormat"@panelChange="onPanelChange"/></Space><Calendarv-model:value="formatDate":date-format="panelDateFormat":week-format="panelWeekFormat":month-format="panelMonthFormat"@panelChange="onPanelChange"/></Flex><h2 class="mt30 mb10">通知事项日历</h2><Calendar v-model:value="noticeDate" @panelChange="onPanelChange"><template #dateValue="{ dateObject, timestamp }"><span v-if="[8, 12, 16].includes(dateObject.date)">{{ dateObject.date }}日</span></template><template #dateContent="{ dateObject, timestamp }"><template v-if="[8, 12, 16].includes(dateObject.date)"><Badge status="warning" text="This is warning event." /><Badge status="success" text="This is usual event." /><Badge color="volcano" text="This is volcano event" /></template></template><template #monthValue="{ monthObject, timestamp }"><template v-if="[1, 7].includes(monthObject.month)"><template v-if="monthObject.month === 1">二月</template><template v-if="monthObject.month === 7">八月</template></template></template><template #monthContent="{ monthObject, timestamp }"><template v-if="[1, 7].includes(monthObject.month)"><Badge status="warning" text="This is warning event." /><Badge status="success" text="This is usual event." /><Badge color="volcano" text="This is volcano event" /></template></template></Calendar><h2 class="mt30 mb10">自定义插槽</h2><Calendar v-model:value="slotDate" @panelChange="onPanelChange"><template #week="{ defaultWeek, week, timestamp }">{{ format(timestamp, 'EEE') }}</template><template #dateValue="{ dateObject, timestamp }"> {{ dateObject.date }}日 </template><template #monthValue="{ monthObject, timestamp }">{{ format(timestamp, 'MMMM') }}</template></Calendar><h2 class="mt30 mb10">选择功能</h2><Flex vertical><Alert type="info" :message="`You selected date: ${format(selectDate, 'yyyy-MM-dd')}`" /><Calendar v-model:value="selectDate" @select="onSelect" @panelChange="onPanelChange" /></Flex><h2 class="mt30 mb10">禁用日期</h2><Flex vertical><Space align="center">display:<Radio :options="displayOptions" v-model:value="display" button button-style="solid" /></Space><Space><Flex vertical><Alert type="info" message="禁用指定日期 (以今天为准的前三天和后三天)" /><Calendarv-model:value="disableDate":disabled-date="disabledDate":display="display"@select="onSelect"@panelChange="onPanelChange"/></Flex><Flex vertical><Alert type="info" message="禁用所有周末 (星期六 & 星期日)" /><Calendarv-model:value="disableDate":disabled-date="disabledWeekend":display="display"@select="onSelect"@panelChange="onPanelChange"/></Flex></Space></Flex><h2 class="mt30 mb10">自定义日期格式</h2><Flex vertical><Alert type="info" :message="`You selected date: ${dateStr}`" /><Calendar v-model:value="dateStr" value-format="yyyy-MM-dd" @panelChange="onPanelChange" /></Flex><Message ref="message" /></div>
</template>
<style lang="less" scoped>
.m-badge {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
</style>

http://www.ppmy.cn/news/1571897.html

相关文章

vue3：动态渲染后端返回的图片

vue3：动态渲染后端返回的图片

问&#xff1a; div classleft-png 这里我用css设置了他的背景图片&#xff0c;但是现在我希望改为后端返回的图片&#xff0c;怎么写&#xff1f; 后端返回数据&#xff1a; const centerdata {img:;xxxx,title,xxxx,num:xxxx}&#xff1f; 回答&#xff1a; 好的&#xff…
阅读更多...
网络工程师 （32）TRUNK

网络工程师 （32）TRUNK

一、定义 TRUNK&#xff0c;也称为端口汇聚、链路汇聚或多链路汇聚&#xff0c;是一种网络技术&#xff0c;其本质是将多个以太网端口绑定在一起作为一个逻辑链路来使用。通过TRUNK技术&#xff0c;用户在使用这个逻辑链路时&#xff0c;就好像是在使用一条独立的物理链路一样&…
阅读更多...
使用 LangChain 对接硅基流动（SiliconFlow）API：构建一个智能对话系统

使用 LangChain 对接硅基流动（SiliconFlow）API：构建一个智能对话系统

文章目录 什么是硅基流动&#xff08;SiliconFlow&#xff09;&#xff1f;LangChain 简介在 LangChain 中对接硅基流动步骤 1&#xff1a;安装必要的库步骤 2&#xff1a;设置 API 密钥步骤 3&#xff1a;编写代码代码解析步骤 4&#xff1a;运行代码如何扩展和改进总结 在现代…
阅读更多...
vm vitualbox和主机ssh连接，使用net 和仅主机网卡连接

vm vitualbox和主机ssh连接，使用net 和仅主机网卡连接

你是否发生了虚拟机ping通主机&#xff0c;主机ping不同虚拟机的现象 仅主机连接方式 你是否发生了打开防火墙和端口却无论如何都用不了SSH 端口转发 -------------------------------------------------------------- 虚拟机有三种连接方式 桥接 net 仅主机 …
阅读更多...
Python教程：@staticmethod静态方法的简单示例

Python教程：@staticmethod静态方法的简单示例

在Python编程语言中&#xff0c;staticmethod 是一个装饰器&#xff08;decorator&#xff09;&#xff0c;用于声明一个方法为静态方法。静态方法不需要访问类的属性或方法&#xff0c;也不需要实例化类就可以直接通过类名调用。它不接受 self 或 cls 参数&#xff0c;这意味着…
阅读更多...
PHP 调用 SiliconFlow 语音生成 API 的脚本，用于将文本转换为 MP3 格式的语音文件

PHP 调用 SiliconFlow 语音生成 API 的脚本，用于将文本转换为 MP3 格式的语音文件

脚本概述 PHP 调用 SiliconFlow 语音生成 API 的脚本&#xff0c;用于将文本转换为 MP3 格式的语音文件。 代码结构 依赖引入 require_once vendor/autoload.php; use OpenAI\Client;使用 Composer 的自动加载机制引入 OpenAI PHP 客户端库 文件路径处理 $speechFilePath…
阅读更多...
安科瑞能源物联网平台在老旧小区用电安全改造中的应用与优势

安科瑞能源物联网平台在老旧小区用电安全改造中的应用与优势

1、现状 在我国城市化进程快速推进的当下&#xff0c;老旧住宅小区作为城市发展的历史见证者&#xff0c;其用电问题愈发凸显&#xff0c;亟待解决。这些老旧小区大多建于上世纪八九十年代&#xff0c;甚至更早&#xff0c;当时的电力设计标准已远不能满足如今居民日益增长的用…
阅读更多...
Python----PyQt开发（PyQt基础，环境搭建，Pycharm中PyQttools工具配置，第一个PyQt程序）

Python----PyQt开发（PyQt基础，环境搭建，Pycharm中PyQttools工具配置，第一个PyQt程序）

一、QT与PyQT的概念和特点 1.1、QT QT是一个1991年由The Qt Company开发的跨平台C图形用户界面应用程序开发 框架&#xff0c;可构建高性能的桌面、移动及Web应用程序。也可用于开发非GUI程序&#xff0c;比如 控制台工具和服务器。Qt是面向对象的框架&#xff0c;使用特殊的代…
阅读更多...
最新文章

Copyright @ 2022~2023