ai_uniapp_v2/uni_modules/uview-plus/components/u-calendar-strip/u-calendar-strip.vue

<template>
	<view class="u-calendar-strip">
		<view v-if="!fullCalendar || !innerShowFull">
			<view class="u-calendar-strip__header u-border-bottom">
				<text
					class="u-calendar-strip__header__switch"
					:class="{ 'u-calendar-strip__header__switch--disabled': switchPrevDisabled }"
					@tap="prevMonth"
				>‹</text>
				<text class="u-calendar-strip__header__title">{{ monthLabel }}</text>
				<text
					class="u-calendar-strip__header__switch"
					:class="{ 'u-calendar-strip__header__switch--disabled': switchNextDisabled }"
					@tap="nextMonth"
				>›</text>
				<text
					v-if="fullCalendar"
					class="u-calendar-strip__header__toggle"
					@click="toggleFull('button')"
				>▾</text>
			</view>
			<view
				class="u-calendar-strip__scroll-wrap"
				@touchstart="onTouchStart"
				@touchend="onTouchEnd"
			>
				<scroll-view
					class="u-calendar-strip__scroll"
					scroll-x
					enable-flex
					:show-scrollbar="false"
					:scroll-into-view="scrollIntoView"
				>
					<view class="u-calendar-strip__scroll__inner">
						<view
							v-for="(item, index) in monthDays"
							:key="index"
							class="u-calendar-strip__day"
							:id="getDateId(item.date)"
							:class="[
								item.disabled && 'u-calendar-strip__day--disabled',
								item.selected && 'u-calendar-strip__day--selected',
								item.today && showToday && !item.selected && 'u-calendar-strip__day--today',
							]"
							:style="[dayStyle(item)]"
							@tap="onDayTap(item)"
						>
							<text class="u-calendar-strip__day__date">{{ item.day }}</text>
							<text class="u-calendar-strip__day__week">{{ getWeekLabel(item.week) }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view
			v-if="fullCalendar && innerShowFull"
			class="u-calendar-strip__panel-wrap"
			@touchstart="onTouchStart"
			@touchend="onTouchEnd"
		>
			<view class="u-calendar-strip__panel">
				<u-calendar
					:show="true"
					:pageInline="true"
					:showTitle="false"
					:showConfirm="false"
					:closeOnClickOverlay="false"
					:monthSwitch="true"
					mode="single"
					:defaultDate="innerSelectedDate"
					:minDate="panelMinDate"
					:maxDate="panelMaxDate"
					:monthNum="panelMonthNum"
					:readonly="readonly"
					:showToday="showToday"
					:color="color"
					v-bind="fullCalendarProps"
					@confirm="onPanelConfirm"
				></u-calendar>
			</view>
			<view class="u-calendar-strip__hint u-calendar-strip__hint--panel">
				<text class="u-calendar-strip__hint__text" @click="toggleFull('hint')">{{ collapseHint }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { props } from './props'
import { mpMixin } from '../../libs/mixin/mpMixin'
import { mixin } from '../../libs/mixin/mixin'
import dayjs from '../u-datetime-picker/dayjs.esm.min.js'
import test from '../../libs/function/test'

/**
 * CalendarStrip 单行日历
 * @description 单行横向日期日历，支持切月、下拉展开完整月历
 */
export default {
	name: 'u-calendar-strip',
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			innerSelectedDate: '',
			currentMonth: '',
			scrollIntoView: '',
			innerShowFull: false,
			touchStartX: 0,
			touchStartY: 0
		}
	},
	computed: {
		innerMaxDate() {
			return test.number(this.maxDate) ? Number(this.maxDate) : this.maxDate
		},
		innerMinDate() {
			return test.number(this.minDate) ? Number(this.minDate) : this.minDate
		},
		rangeChange() {
			return [this.innerMinDate, this.innerMaxDate]
		},
		hasMaxDate() {
			return !!this.innerMaxDate && dayjs(this.innerMaxDate).isValid()
		},
		hasMinDate() {
			return !!this.innerMinDate && dayjs(this.innerMinDate).isValid()
		},
		minDateDay() {
			if (!this.hasMinDate) return ''
			return dayjs(this.innerMinDate).format('YYYY-MM-DD')
		},
		maxDateDay() {
			if (!this.hasMaxDate) return ''
			return dayjs(this.innerMaxDate).format('YYYY-MM-DD')
		},
		todayDate() {
			return dayjs().format('YYYY-MM-DD')
		},
		monthLabel() {
			if (!this.currentMonth) return ''
			const date = dayjs(`${this.currentMonth}-01`)
			if (this.monthFormat) return date.format(this.monthFormat)
			if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {
				return date.format('YYYY年MM月')
			}
			return date.format('MM/YYYY')
		},
		monthDays() {
			if (!this.currentMonth) return []
			const start = dayjs(`${this.currentMonth}-01`)
			const days = start.daysInMonth()
			return new Array(days).fill(0).map((item, index) => {
				const date = start.date(index + 1).format('YYYY-MM-DD')
				return {
					day: index + 1,
					date,
					week: start.date(index + 1).day(),
					disabled: this.isDateDisabled(date),
					selected: this.dateSame(date, this.innerSelectedDate),
					today: this.dateSame(date, this.todayDate)
				}
			})
		},
		switchPrevDisabled() {
			if (!this.hasMinDate || !this.currentMonth) return false
			const current = dayjs(`${this.currentMonth}-01`)
			const minMonth = dayjs(this.minDateDay).startOf('month')
			return current.isSame(minMonth, 'month') || current.isBefore(minMonth, 'month')
		},
		switchNextDisabled() {
			if (!this.hasMaxDate || !this.currentMonth) return false
			const current = dayjs(`${this.currentMonth}-01`)
			const maxMonth = dayjs(this.maxDateDay).startOf('month')
			return current.isSame(maxMonth, 'month') || current.isAfter(maxMonth, 'month')
		},
		panelMinDate() {
			if (this.hasMinDate) return this.minDateDay
			const monthNum = Math.max(1, Number(this.fullMonthNum) || 24)
			const anchor = this.currentMonth || dayjs().format('YYYY-MM')
			return dayjs(`${anchor}-01`).subtract(monthNum - 1, 'month').startOf('month').format('YYYY-MM-DD')
		},
		panelMaxDate() {
			if (this.hasMaxDate) return this.maxDateDay
			const monthNum = Math.max(1, Number(this.fullMonthNum) || 24)
			const anchor = this.currentMonth || dayjs().format('YYYY-MM')
			return dayjs(`${anchor}-01`).add(monthNum - 1, 'month').endOf('month').format('YYYY-MM-DD')
		},
		panelMonthNum() {
			return this.getMonths(this.panelMinDate, this.panelMaxDate)
		},
		pullHintText() {
			return this.innerShowFull ? this.collapseHint : this.expandHint
		}
	},
	watch: {
		modelValue: {
			immediate: true,
			handler(n) {
				this.syncByValue(n, false, 'sync')
			}
		},
		rangeChange() {
			this.syncByValue(this.innerSelectedDate || this.modelValue, true, 'range')
		}
	},
	emits: ['change', 'confirm', 'monthChange', 'toggleFull', 'update:modelValue'],
	methods: {
		dateSame(date1, date2) {
			if (!date1 || !date2) return false
			return dayjs(date1).isSame(dayjs(date2), 'day')
		},
		normalizeDate(value) {
			if (!value) return ''
			const parsed = dayjs(value)
			if (!parsed.isValid()) return ''
			return parsed.format('YYYY-MM-DD')
		},
		clampDate(date) {
			let next = this.normalizeDate(date)
			if (!next) return ''
			if (this.hasMinDate && dayjs(next).isBefore(dayjs(this.minDateDay), 'day')) {
				next = this.minDateDay
			}
			if (this.hasMaxDate && dayjs(next).isAfter(dayjs(this.maxDateDay), 'day')) {
				next = this.maxDateDay
			}
			return next
		},
		isDateDisabled(date) {
			if (!date) return true
			if (this.hasMinDate && dayjs(date).isBefore(dayjs(this.minDateDay), 'day')) {
				return true
			}
			if (this.hasMaxDate && dayjs(date).isAfter(dayjs(this.maxDateDay), 'day')) {
				return true
			}
			return false
		},
		getDateId(date) {
			return `u-calendar-strip-day-${dayjs(date).format('YYYYMMDD')}`
		},
		getWeekLabel(week) {
			const index = week === 0 ? 6 : week - 1
			return this.weekText[index] || ''
		},
		dayStyle(item) {
			const style = {}
			if (item.selected) {
				style.backgroundColor = this.color
			}
			if (!item.selected && item.today && this.showToday) {
				style.borderColor = this.color
			}
			return style
		},
		scrollToDate(date) {
			if (!date) {
				this.scrollIntoView = ''
				return
			}
			const target = this.getDateId(date)
			this.scrollIntoView = ''
			this.$nextTick(() => {
				this.scrollIntoView = target
			})
		},
		syncByValue(value, emit = false, scene = 'sync') {
			let next = this.clampDate(value)
			if (!next) {
				next = this.clampDate(this.todayDate)
			}
			if (!next) return
			this.setSelectedDate(next, scene, emit)
		},
		setSelectedDate(date, scene = 'tap', emit = true) {
			const next = this.clampDate(date)
			if (!next || this.isDateDisabled(next)) return
			const prevDate = this.innerSelectedDate
			const prevMonth = this.currentMonth
			this.innerSelectedDate = next
			this.currentMonth = dayjs(next).format('YYYY-MM')
			this.scrollToDate(next)
			if (!emit) return
			const payload = {
				date: next,
				month: this.currentMonth,
				scene
			}
			if (!this.dateSame(prevDate, next)) {
				this.$emit('update:modelValue', next)
			}
			this.$emit('change', payload)
			this.$emit('confirm', payload)
			if (prevMonth !== this.currentMonth) {
				this.$emit('monthChange', {
					month: this.currentMonth,
					scene
				})
			}
		},
		getMonths(minDate, maxDate) {
			const minYear = dayjs(minDate).year()
			const minMonth = dayjs(minDate).month() + 1
			const maxYear = dayjs(maxDate).year()
			const maxMonth = dayjs(maxDate).month() + 1
			return Math.max(1, (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1)
		},
		findFirstEnabledDate(month) {
			const start = dayjs(`${month}-01`)
			const days = start.daysInMonth()
			for (let i = 1; i <= days; i++) {
				const date = start.date(i).format('YYYY-MM-DD')
				if (!this.isDateDisabled(date)) {
					return date
				}
			}
			return ''
		},
		switchMonth(step = 0) {
			if (step < 0 && this.switchPrevDisabled) return
			if (step > 0 && this.switchNextDisabled) return
			const baseMonth = this.currentMonth || dayjs(this.todayDate).format('YYYY-MM')
			const target = dayjs(`${baseMonth}-01`).add(step, 'month')
			const targetMonth = target.format('YYYY-MM')
			const selectedDay = dayjs(this.innerSelectedDate || this.todayDate).date()
			const dayInTargetMonth = Math.min(selectedDay, target.daysInMonth())
			let next = target.date(dayInTargetMonth).format('YYYY-MM-DD')
			next = this.clampDate(next)
			if (!next || !dayjs(next).isSame(target, 'month') || this.isDateDisabled(next)) {
				next = this.findFirstEnabledDate(targetMonth)
			}
			if (!next) return
			this.setSelectedDate(next, 'switch', true)
		},
		prevMonth() {
			this.switchMonth(-1)
		},
		nextMonth() {
			this.switchMonth(1)
		},
		onDayTap(item) {
			if (this.readonly || item.disabled) return
			this.setSelectedDate(item.date, 'tap', true)
		},
		setFullVisible(show, source = 'button') {
			if (!this.fullCalendar) return
			if (this.innerShowFull === show) return
			this.innerShowFull = show
			this.$emit('toggleFull', {
				show,
				source
			})
		},
		toggleFull(source = 'button') {
			this.setFullVisible(!this.innerShowFull, source)
		},
		onPanelConfirm(e) {
			if (!Array.isArray(e) || !e.length) return
			this.setSelectedDate(e[0], 'full', true)
			if (this.collapseAfterSelect) {
				this.setFullVisible(false, 'auto')
			}
		},
		onTouchStart(event) {
			if (!this.fullCalendar) return
			const point = event?.changedTouches?.[0] || event?.touches?.[0]
			if (!point) return
			this.touchStartX = point.clientX
			this.touchStartY = point.clientY
		},
		onTouchEnd(event) {
			if (!this.fullCalendar) return
			const point = event?.changedTouches?.[0] || event?.touches?.[0]
			if (!point) return
			const deltaX = point.clientX - this.touchStartX
			const deltaY = point.clientY - this.touchStartY
			const threshold = Number(this.pullDownThreshold) || 40
			if (Math.abs(deltaY) < threshold || Math.abs(deltaY) <= Math.abs(deltaX)) {
				return
			}
			if (deltaY > 0 && !this.innerShowFull) {
				this.setFullVisible(true, 'pull-down')
			}
			if (deltaY < 0 && this.innerShowFull) {
				this.setFullVisible(false, 'pull-up')
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.u-calendar-strip {
	background-color: var(--up-card-bg-color, #ffffff);
	border-radius: 10px;
	margin: 0 8px;

	&__header {
		@include flex;
		align-items: center;
		padding: 0 4px;
		height: 40px;

		&__switch {
			width: 40px;
			text-align: center;
			font-size: 20px;
			line-height: 40px;
			color: var(--up-main-color, $u-main-color);

			&--disabled {
				opacity: 0.35;
			}
		}

		&__title {
			flex: 1;
			text-align: center;
			font-size: 14px;
			font-weight: bold;
			color: var(--up-main-color, $u-main-color);
		}

		&__toggle {
			width: 40px;
			text-align: center;
			font-size: 18px;
			line-height: 40px;
			color: var(--up-content-color, $u-content-color);
		}
	}

	&__scroll-wrap {
		padding: 10px 0 6px;
	}

	&__scroll {
		&__inner {
			@include flex;
			padding: 0 8px;
		}
	}

	&__day {
		width: 54px;
		height: 62px;
		margin-right: 8px;
		border-radius: 8px;
		border: 1px solid transparent;
		@include flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		&__date {
			font-size: 18px;
			line-height: 22px;
			color: var(--up-main-color, $u-main-color);
		}

		&__week {
			margin-top: 4px;
			font-size: 12px;
			line-height: 16px;
			color: var(--up-content-color, $u-content-color);
		}

		&--selected {
			.u-calendar-strip__day__date,
			.u-calendar-strip__day__week {
				color: #ffffff;
			}
		}

		&--today {
			border-style: solid;
		}

		&--disabled {
			opacity: 0.4;
		}
	}

	&__hint {
		padding: 4px 0 10px;
		text-align: center;

		&__text {
			font-size: 12px;
			color: var(--up-tips-color, $u-tips-color);
		}
	}

	&__panel {
		padding: 0 8px 8px;
	}

	&__panel-wrap {
		padding-top: 4px;
	}

	&__hint--panel {
		padding: 0 0 8px;
	}
}
</style>