uview-plus 3.8.49 → 3.8.86

package/components/u-calendar/u-calendar.vue

@@ -2,6 +2,14 @@
 	<u-popup
 		:show="show"
 		mode="bottom"
+		:overlay="overlay"
+		:duration="duration"
+		:overlayStyle="overlayStyle"
+		:overlayOpacity="overlayOpacity"
+		:zIndex="zIndex"
+		:safeAreaInsetBottom="safeAreaInsetBottom"
+		:safeAreaInsetTop="safeAreaInsetTop"
+		:bgColor="bgColor"
 		:closeable="!pageInline"
 		@close="close"
 		:round="round"
@@ -29,6 +37,28 @@
 				@nextYear="nextYear"
 				@today="jumpToToday"
 			></uHeader>
+			<view v-if="showTimePanel" class="u-calendar__time-panel">
+				<view v-if="mode === 'single'" class="u-calendar__time-row">
+					<text class="u-calendar__time-date">{{ singleDateLabel }}</text>
+					<view class="u-calendar__time-trigger" @click="openTimePicker('single')">
+						<text class="u-calendar__time-text">{{ singleTime }}</text>
+					</view>
+				</view>
+				<view v-else-if="mode === 'range' && rangeResultMode === 'boundary'">
+					<view class="u-calendar__time-row">
+						<text class="u-calendar__time-date">{{ rangeStartDateLabel }}</text>
+						<view class="u-calendar__time-trigger" @click="openTimePicker('start')">
+							<text class="u-calendar__time-text">{{ rangeStartTime }}</text>
+						</view>
+					</view>
+					<view class="u-calendar__time-row">
+						<text class="u-calendar__time-date">{{ rangeEndDateLabel }}</text>
+						<view class="u-calendar__time-trigger" @click="openTimePicker('end')">
+							<text class="u-calendar__time-text">{{ rangeEndTime }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
 			<scroll-view
 				v-if="!monthSwitch"
 				:style="{
@@ -61,6 +91,7 @@
 					:forbidDaysToast="forbidDaysToast"
 					:monthFormat="monthFormat"
 					:todayDate="todayDate"
+					:todayColor="todayColor"
 					ref="month"
 					@monthSelected="monthSelected"
 					@updateMonthTop="onUpdateMonthTop"
@@ -94,6 +125,7 @@
 					:forbidDaysToast="forbidDaysToast"
 					:monthFormat="monthFormat"
 					:todayDate="todayDate"
+					:todayColor="todayColor"
 					ref="month"
 					@monthSelected="monthSelected"
 					@updateMonthTop="onUpdateMonthTop"
@@ -114,6 +146,32 @@
 			</slot>
 		</view>
 	</u-popup>
+	<u-popup
+		:show="timePickerShow"
+		mode="center"
+		:round="8"
+		:closeOnClickOverlay="true"
+		@close="closeTimePicker"
+	>
+		<view class="u-calendar__time-picker">
+			<view class="u-calendar__time-picker__header">
+				<text class="u-calendar__time-picker__cancel" @click="closeTimePicker">取消</text>
+				<text class="u-calendar__time-picker__title">选择时间</text>
+				<text class="u-calendar__time-picker__confirm" @click="confirmTimePicker">确定</text>
+			</view>
+			<picker-view class="u-calendar__time-picker__body" :value="timePickerValue" @change="onTimePickerChange">
+				<picker-view-column>
+					<view v-for="(item, index) in hourOptions" :key="`h-${index}`" class="u-calendar__time-picker__item">{{ item }}</view>
+				</picker-view-column>
+				<picker-view-column v-if="timePrecision !== 'hour'">
+					<view v-for="(item, index) in minuteOptions" :key="`m-${index}`" class="u-calendar__time-picker__item">{{ item }}</view>
+				</picker-view-column>
+				<picker-view-column v-if="timePrecision === 'second'">
+					<view v-for="(item, index) in secondOptions" :key="`s-${index}`" class="u-calendar__time-picker__item">{{ item }}</view>
+				</picker-view-column>
+			</picker-view>
+		</view>
+	</u-popup>
 </template>
 
 <script>
@@ -152,6 +210,14 @@ import { t } from '../../libs/i18n'
  * @property {String}				confirmText			确定按钮的文字 (默认 '确定' )
  * @property {String}				confirmDisabledText	确认按钮处于禁用状态时的文字 (默认 '确定' )
  * @property {Boolean}				show				是否显示日历弹窗 (默认 false )
+ * @property {Boolean}				overlay				是否显示遮罩 (默认 true )
+ * @property {String | Number}		duration			动画时长，单位ms (默认 300 )
+ * @property {Object | String}		overlayStyle		自定义遮罩的样式
+ * @property {Number | String}		overlayOpacity		遮罩透明度，0-1之间 (默认 0.5 )
+ * @property {String | Number}		zIndex				弹出层的z-index值 (默认 10075 )
+ * @property {Boolean}				safeAreaInsetBottom	是否留出底部安全距离 (默认 true )
+ * @property {Boolean}				safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） (默认 false )
+ * @property {String}				bgColor				弹窗背景色，设置为transparent可去除白色背景
  * @property {Boolean}				closeOnClickOverlay	是否允许点击遮罩关闭日历 (默认 false )
  * @property {Boolean}				readonly	        是否为只读状态，只读状态下禁止选择日期 (默认 false )
  * @property {String | Number}		maxRange	        日期区间最多可选天数，默认无限制，mode = range时有效
@@ -159,9 +225,13 @@ import { t } from '../../libs/i18n'
  * @property {Boolean}				showRangePrompt	    范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 (默认 true )
  * @property {Boolean}				allowSameDay	    是否允许日期范围的起止时间为同一天，mode = range时有效 (默认 false )
  * @property {String}				rangeResultMode	    区间模式下确认返回值格式，all-返回区间内所有日期，boundary-仅返回起止日期 (默认 'all' )
+ * @property {Boolean}				enableTime			是否开启时分秒选择 (默认 false )
+ * @property {String}				timePrecision		时间精度，hour-仅时，minute-时分，second-时分秒 (默认 'minute' )
+ * @property {String}				defaultTime			默认时间，支持HH/HH:mm/HH:mm:ss，不传则按00:00补齐
  * @property {Number|String}	    round				圆角值，默认无圆角  (默认 0 )
  * @property {Number|String}	    monthNum			最多展示的月份数量  (默认 3 )
  * @property {Boolean}	            monthSwitch			是否启用非滚动的单月切换模式  (默认 false )
+ * @property {String}	            todayColor			今天日期的独立高亮颜色，默认跟随主题色
  * @property {Array}	            weekText			星期文案  (默认 ['一', '二', '三', '四', '五', '六', '日'] )
  *
  * @event {Function()} confirm 		点击确定按钮时触发		选择日期相关的返回参数
@@ -189,6 +259,15 @@ export default {
 			scrollIntoView: '',
 			scrollIntoViewScroll: '',
 			scrollTop:0,
+			timePickerShow: false,
+			timePickerTarget: 'single',
+			timePickerValue: [0, 0, 0],
+			hourOptions: [],
+			minuteOptions: [],
+			secondOptions: [],
+			singleTime: '00:00',
+			rangeStartTime: '00:00',
+			rangeEndTime: '00:00',
 			// 过滤处理方法
 			innerFormatter: (value) => value
 		}
@@ -206,6 +285,13 @@ export default {
 				this.setMonth()
 			}
 		},
+		timePrecision() {
+			this.initTimeOptions()
+			this.initTimeValues()
+		},
+		defaultTime() {
+			this.initTimeValues()
+		},
 		// 打开弹窗时，设置月份数据
 		show: {
 			immediate: true,
@@ -288,6 +374,26 @@ export default {
 		switchNextYearDisabled() {
 			return this.monthIndex + 12 > this.months.length - 1
 		},
+		showTimePanel() {
+			if (!this.enableTime) return false
+			if (this.mode === 'single') return true
+			if (this.mode === 'range' && this.rangeResultMode === 'boundary') {
+				return true
+			}
+			return false
+		},
+		singleDateLabel() {
+			return this.selected[0] || '--'
+		},
+		rangeStartDateLabel() {
+			return this.selected[0] || '--'
+		},
+		rangeEndDateLabel() {
+			if (this.selected.length >= 2) {
+				return this.selected[this.selected.length - 1]
+			}
+			return '--'
+		},
 		buttonDisabled() {
 			// 如果为range类型，且选择的日期个数不足1个时，让底部的按钮出于disabled状态
 			if (this.mode === 'range') {
@@ -308,16 +414,129 @@ export default {
 	emits: ["confirm", "close"],
 	methods: {
 		addUnit,
+		padTime(num) {
+			return String(num).padStart(2, '0')
+		},
+		initTimeOptions() {
+			this.hourOptions = Array.from({ length: 24 }, (_, i) => this.padTime(i))
+			this.minuteOptions = Array.from({ length: 60 }, (_, i) => this.padTime(i))
+			this.secondOptions = Array.from({ length: 60 }, (_, i) => this.padTime(i))
+		},
+		parseTimeValue(value = '') {
+			const raw = String(value || '').trim()
+			const parts = raw.length ? raw.split(':') : []
+			const getNumber = (index, max) => {
+				const current = Number(parts[index] || 0)
+				if (Number.isNaN(current)) return 0
+				return Math.max(0, Math.min(max, current))
+			}
+			const hour = getNumber(0, 23)
+			const minute = getNumber(1, 59)
+			const second = getNumber(2, 59)
+			return [hour, minute, second]
+		},
+		getDefaultTimeValue() {
+			const [hour, minute, second] = this.parseTimeValue(this.defaultTime)
+			if (this.timePrecision === 'hour') {
+				return this.padTime(hour)
+			}
+			if (this.timePrecision === 'second') {
+				return `${this.padTime(hour)}:${this.padTime(minute)}:${this.padTime(second)}`
+			}
+			return `${this.padTime(hour)}:${this.padTime(minute)}`
+		},
+		initTimeValues() {
+			const value = this.getDefaultTimeValue()
+			this.singleTime = value
+			this.rangeStartTime = value
+			this.rangeEndTime = value
+		},
+		timeToPickerValue(value = '') {
+			const [hour, minute, second] = this.parseTimeValue(value)
+			return [hour, minute, second]
+		},
+		pickerValueToTime(value = []) {
+			const hour = Number(value[0] || 0)
+			const minute = Number(value[1] || 0)
+			const second = Number(value[2] || 0)
+			if (this.timePrecision === 'hour') {
+				return this.padTime(hour)
+			}
+			if (this.timePrecision === 'second') {
+				return `${this.padTime(hour)}:${this.padTime(minute)}:${this.padTime(second)}`
+			}
+			return `${this.padTime(hour)}:${this.padTime(minute)}`
+		},
+		openTimePicker(target) {
+			this.timePickerTarget = target
+			let currentValue = this.singleTime
+			if (target === 'start') currentValue = this.rangeStartTime
+			if (target === 'end') currentValue = this.rangeEndTime
+			this.timePickerValue = this.timeToPickerValue(currentValue)
+			this.timePickerShow = true
+		},
+		onTimePickerChange(e) {
+			this.timePickerValue = e.detail.value
+		},
+		closeTimePicker() {
+			this.timePickerShow = false
+		},
+		confirmTimePicker() {
+			const value = this.pickerValueToTime(this.timePickerValue)
+			if (this.timePickerTarget === 'single') this.singleTime = value
+			if (this.timePickerTarget === 'start') this.rangeStartTime = value
+			if (this.timePickerTarget === 'end') this.rangeEndTime = value
+			this.timePickerShow = false
+		},
+		timeToSecond(timeText = '') {
+			const [hour, minute, second] = this.parseTimeValue(timeText)
+			return hour * 3600 + minute * 60 + second
+		},
+		validateSameDayRangeTime() {
+			if (!this.enableTime || this.mode !== 'range' || this.rangeResultMode !== 'boundary') {
+				return true
+			}
+			if (this.selected.length < 2) return true
+			const startDate = this.selected[0]
+			const endDate = this.selected[this.selected.length - 1]
+			if (startDate !== endDate) return true
+			const startSeconds = this.timeToSecond(this.rangeStartTime)
+			const endSeconds = this.timeToSecond(this.rangeEndTime)
+			if (endSeconds < startSeconds) {
+				uni.showToast({
+					title: '结束时间不能早于开始时间',
+					icon: 'none'
+				})
+				return false
+			}
+			return true
+		},
+		appendTime(dateText, timeText) {
+			return `${dateText} ${timeText}`
+		},
 		getConfirmValue(selected = this.selected) {
+			let result = selected
 			if (
 				this.mode === 'range' &&
 				this.rangeResultMode === 'boundary' &&
 				selected.length >= 2
 			) {
 				const len = selected.length - 1
-				return [selected[0], selected[len]]
+				result = [selected[0], selected[len]]
+			}
+			if (!this.showTimePanel || !this.enableTime) {
+				return result
+			}
+			if (this.mode === 'single' && result.length >= 1) {
+				return [this.appendTime(result[0], this.singleTime)]
+			}
+			if (this.mode === 'range' && this.rangeResultMode === 'boundary' && result.length >= 2) {
+				return [
+					this.appendTime(result[0], this.rangeStartTime),
+					this.appendTime(result[1], this.rangeEndTime)
+				]
 			}
-			return selected
+			return result
 		},
 		// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
 		setFormatter(e) {
@@ -337,6 +556,7 @@ export default {
 					 return
 				   }
 				   if( scene === 'tap') {
+					 if (!this.validateSameDayRangeTime()) return
 					 this.$emit('confirm', this.getConfirmValue())
 				   }
 				}
@@ -359,6 +579,8 @@ export default {
 				bottomPadding = 30
 			}
 			this.listHeight = this.rowHeight * (this.monthSwitch ? 6 : 5) + bottomPadding
+			this.initTimeOptions()
+			this.initTimeValues()
 			this.setMonth()
 		},
 		close() {
@@ -367,6 +589,7 @@ export default {
 		// 点击确定按钮
 		confirm() {
 			if (!this.buttonDisabled) {
+				if (!this.validateSameDayRangeTime()) return
 				this.$emit('confirm', this.getConfirmValue())
 			}
 		},
@@ -495,16 +718,24 @@ export default {
 				return
 			}
 			const targetMonth = dayjs(this.todayDate).format('YYYY-MM')
+			const selectToday = () => {
+				if (this.mode === 'range') {
+					return
+				}
+				this.$refs.month && this.$refs.month.selectDate(this.todayDate)
+			}
 			if (this.monthSwitch) {
 				const todayMonthIndex = this.months.findIndex(({ year, month }) => {
 					return `${year}-${padZero(month)}` === targetMonth
 				})
 				if (todayMonthIndex !== -1) {
 					this.monthIndex = todayMonthIndex
+					this.$nextTick(selectToday)
 				}
 				return
 			}
 			this.scrollIntoDefaultMonth(targetMonth)
+			this.$nextTick(selectToday)
 		},
 		// 滚动到默认设置的月份
 		scrollIntoDefaultMonth(selected) {
@@ -579,6 +810,84 @@ export default {
 	color: var(--up-main-color, $u-main-color);
 	background-color: var(--up-card-bg-color, #ffffff);
 
+	&__time-panel {
+		padding: 8px 16px 0;
+	}
+
+	&__time-row {
+		height: 34px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 6px;
+	}
+
+	&__time-date {
+		font-size: 13px;
+		color: #303133;
+	}
+
+	&__time-trigger {
+		min-width: 92px;
+		height: 30px;
+		padding: 0 10px;
+		border-radius: 15px;
+		border: 1px solid #dcdfe6;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__time-text {
+		font-size: 14px;
+		color: #303133;
+	}
+
+	&__time-picker {
+		width: 320px;
+		background-color: #ffffff;
+		border-radius: 8px;
+		overflow: hidden;
+	}
+
+	&__time-picker__header {
+		height: 44px;
+		padding: 0 14px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-bottom: 1px solid #f0f0f0;
+	}
+
+	&__time-picker__cancel {
+		font-size: 14px;
+		color: #909399;
+	}
+
+	&__time-picker__title {
+		font-size: 15px;
+		color: #303133;
+		font-weight: 600;
+	}
+
+	&__time-picker__confirm {
+		font-size: 14px;
+		color: #3c9cff;
+	}
+
+	&__time-picker__body {
+		width: 320px;
+		height: 200px;
+	}
+
+	&__time-picker__item {
+		height: 40px;
+		line-height: 40px;
+		text-align: center;
+		font-size: 16px;
+		color: #303133;
+	}
+
 	&__confirm {
 		padding: 7px 18px;
 	}

package/components/u-calendar-strip/props.js

@@ -1,6 +1,8 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
+import CalendarStripDefaultProps from './calendarStrip'
+import { registerComponentProps } from '../../libs/config/props.js'
 
+const defProps = registerComponentProps(CalendarStripDefaultProps)
 export const props = defineMixin({
     props: {
         modelValue: {