2023-12-11

2023-12-11 18:08:15 +08:00
parent b84753c252
commit 123b725ac3
20 changed files with 407 additions and 547 deletions
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
@@ -6,16 +6,19 @@
 		'uni-calendar-item--after-checked-x':weeks.afterMultiple,
 		}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
 		<view class="uni-calendar-item__weeks-box-item" :class="{
-				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover)
+				&& !disabledDate.includes(weeks.fullDate),
 				'uni-calendar-item--checked-range-text': checkHover,
 				'uni-calendar-item--before-checked':weeks.beforeMultiple,
 				'uni-calendar-item--multiple': weeks.multiple,
 				'uni-calendar-item--after-checked':weeks.afterMultiple,
 				'uni-calendar-item--disable':weeks.disable,
+				'uni-calendar-item--disable':disabledDate.includes(weeks.fullDate),
 				}">
 			<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
-			<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text"
-			v-if="weeks.year!=null">{{weeks.date}}</text>
+			<text
+				class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text"
+				v-if="weeks.year!=null">{{weeks.date}}</text>
 		</view>
 		<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
 	</view>
@@ -24,6 +27,11 @@
 <script>
 	export default {
 		props: {
+			// 禁用日期
+			disabledDate: {
+				type: Array,
+				default: []
+			},
 			weeks: {
 				type: Object,
 				default () {
@@ -58,7 +66,7 @@
 	}
 </script>

-<style lang="scss" >
+<style lang="scss">
 	$uni-primary: #007aff !default;

 	.uni-calendar-item__weeks-box {
@@ -120,7 +128,7 @@
 		top: 10px;
 		right: 17%;
 		background-color: #dd524d;
-		width:6px;
+		width: 6px;
 		height: 6px;
 		border-radius: 50%;
 	}
@@ -146,7 +154,7 @@
 	}

 	.uni-calendar-item--multiple {
-		background-color:  #F6F7FC;
+		background-color: #F6F7FC;
 		// color: #fff;
 	}

@@ -175,4 +183,4 @@
 		border-bottom-right-radius: 50px;
 		background-color: #F6F7FC;
 	}
-</style>
+</style>
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
@@ -59,8 +59,7 @@
 				<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
 					<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
 						<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
-							:selected="selected" :checkHover="range" @change="choiceDate"
-							@handleMouse="handleMouse">
+							:selected="selected" :checkHover="range" @change="choiceDate" @handleMouse="handleMouse" :disabledDate="disabledDate">
 						</calendar-item>
 					</view>
 				</view>
@@ -101,13 +100,21 @@
 </template>

 <script>
-	import { Calendar, getDate, getTime } from './util.js';
+	import {
+		Calendar,
+		getDate,
+		getTime
+	} from './util.js';
 	import calendarItem from './calendar-item.vue'
 	import timePicker from './time-picker.vue'

-	import { initVueI18n } from '@dcloudio/uni-i18n'
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
 	import i18nMessages from './i18n/index.js'
-	const { t } = initVueI18n(i18nMessages)
+	const {
+		t
+	} = initVueI18n(i18nMessages)

 	/**
 	 * Calendar 日历
@@ -135,6 +142,11 @@
 			timePicker
 		},
 		props: {
+			// 禁用日期
+			disabledDate: {
+				type: Array,
+				default: []
+			},
 			date: {
 				type: String,
 				default: ''
@@ -163,8 +175,8 @@
 				type: String,
 				default: ''
 			},
-      startPlaceholder: {
-        type: String,
+			startPlaceholder: {
+				type: String,
 				default: ''
 			},
 			endPlaceholder: {
@@ -210,10 +222,10 @@
 					}
 				}
 			},
-      defaultValue: {
-        type: [String, Object, Array],
-        default: ''
-      }
+			defaultValue: {
+				type: [String, Object, Array],
+				default: ''
+			}
 		},
 		data() {
 			return {
@@ -260,32 +272,32 @@
 			},
 			startDate(val) {
 				// 字节小程序 watch 早于 created
-				if(!this.cale){
+				if (!this.cale) {
 					return
 				}
 				this.cale.setStartDate(val)
 				this.cale.setDate(this.nowDate.fullDate)
 				this.weeks = this.cale.weeks
-				console.log("this.weeks11 ",this.weeks )
+				console.log("this.weeks11 ", this.weeks)
 			},
 			endDate(val) {
 				// 字节小程序 watch 早于 created
-				if(!this.cale){
+				if (!this.cale) {
 					return
 				}
 				this.cale.setEndDate(val)
 				this.cale.setDate(this.nowDate.fullDate)
 				this.weeks = this.cale.weeks
-				console.log("this.weeks22 ",this.weeks )
+				console.log("this.weeks22 ", this.weeks)
 			},
 			selected(newVal) {
 				// 字节小程序 watch 早于 created
-				if(!this.cale){
+				if (!this.cale) {
 					return
 				}
 				this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
 				this.weeks = this.cale.weeks
-				console.log("this.weeks33 ",this.weeks )
+				console.log("this.weeks33 ", this.weeks)
 			},
 			pleStatus: {
 				immediate: true,
@@ -312,20 +324,20 @@
 								this.cale.lastHover = false
 							}
 						} else {
-              // 字节小程序 watch 早于 created
-              if(!this.cale){
-                return
-              }
+							// 字节小程序 watch 早于 created
+							if (!this.cale) {
+								return
+							}

 							this.cale.setDefaultMultiple(before, after)
 							if (which === 'left' && before) {
 								this.setDate(before)
 								this.weeks = this.cale.weeks
-								console.log("this.weeks44 ",this.weeks )
-							} else if(after) {
+								console.log("this.weeks44 ", this.weeks)
+							} else if (after) {
 								this.setDate(after)
 								this.weeks = this.cale.weeks
-								console.log("this.weeks55 ",this.weeks )
+								console.log("this.weeks55 ", this.weeks)
 							}
 							this.cale.lastHover = true
 						}
@@ -415,7 +427,7 @@
 				// 设置范围选
 				this.cale.setHoverMultiple(this.calendar.fullDate)
 				this.weeks = this.cale.weeks
-				console.log("this.weeks66 ",this.weeks )
+				console.log("this.weeks66 ", this.weeks)
 				// hover时，进入一个日历，更新另一个
 				if (this.firstEnter) {
 					this.$emit('firstEnterCale', this.cale.multipleStatus)
@@ -429,7 +441,7 @@
 			},
 			// 蒙版点击事件
 			maskClick() {
-        this.close()
+				this.close()
 				this.$emit('maskClose')
 			},

@@ -460,36 +472,38 @@
 			 * @param {Object} date
 			 */
 			init(date) {
-        // 字节小程序 watch 早于 created
-				if(!this.cale){
+				// 字节小程序 watch 早于 created
+				if (!this.cale) {
 					return
 				}
 				this.cale.setDate(date || new Date())
 				this.weeks = this.cale.weeks
 				this.nowDate = this.cale.getInfo(date)
-        this.calendar = {...this.nowDate}
-        if(!date){
-          // 优化date为空默认不选中今天
-          this.calendar.fullDate = ''
-          if(this.defaultValue && !this.range){
-            // 暂时只支持移动端非范围选择
-            const defaultDate = new Date(this.defaultValue)
-            const fullDate = getDate(defaultDate)
-            const year = defaultDate.getFullYear()
-            const month = defaultDate.getMonth()+1
-            const date = defaultDate.getDate()
-            const day = defaultDate.getDay()
-            this.calendar = {
-              fullDate,
-              year,
-              month,
-              date,
-              day
-            },
-            this.tempSingleDate = fullDate
-            this.time = getTime(defaultDate, this.hideSecond)
-          }
-        }
+				this.calendar = {
+					...this.nowDate
+				}
+				if (!date) {
+					// 优化date为空默认不选中今天
+					this.calendar.fullDate = ''
+					if (this.defaultValue && !this.range) {
+						// 暂时只支持移动端非范围选择
+						const defaultDate = new Date(this.defaultValue)
+						const fullDate = getDate(defaultDate)
+						const year = defaultDate.getFullYear()
+						const month = defaultDate.getMonth() + 1
+						const date = defaultDate.getDate()
+						const day = defaultDate.getDay()
+						this.calendar = {
+								fullDate,
+								year,
+								month,
+								date,
+								day
+							},
+							this.tempSingleDate = fullDate
+						this.time = getTime(defaultDate, this.hideSecond)
+					}
+				}
 			},
 			/**
 			 * 打开日历弹窗
@@ -551,13 +565,13 @@
 			 * @param {Object} name
 			 */
 			setEmit(name) {
-        if(!this.range){
-					if(!this.calendar.fullDate){
-					  this.calendar = this.cale.getInfo(new Date())
-					  this.tempSingleDate = this.calendar.fullDate
+				if (!this.range) {
+					if (!this.calendar.fullDate) {
+						this.calendar = this.cale.getInfo(new Date())
+						this.tempSingleDate = this.calendar.fullDate
 					}
-					if(this.hasTime && !this.time) {
-					  this.time = getTime(new Date(), this.hideSecond)
+					if (this.hasTime && !this.time) {
+						this.time = getTime(new Date(), this.hideSecond)
 					}
 				}
 				let {
@@ -583,13 +597,18 @@
 			 * @param {Object} weeks
 			 */
 			choiceDate(weeks) {
-				if (weeks.disable) return
+				if (weeks.disable) 
+						return
+				if(this.disabledDate.includes(weeks.fullDate)){
+					return
+				}
+				
 				this.calendar = weeks
 				this.calendar.userChecked = true
 				// 设置多选
 				this.cale.setMultiple(this.calendar.fullDate, true)
 				this.weeks = this.cale.weeks
-				console.log("this.weeks77 ",this.weeks )
+				console.log("this.weeks77 ", this.weeks)
 				this.tempSingleDate = this.calendar.fullDate
 				const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
 				const afterDate = new Date(this.cale.multipleStatus.after).getTime()
@@ -602,34 +621,34 @@
 				}
 				this.change()
 			},
-      changeMonth(type) {
-        let newDate
-        if(type === 'pre') {
-          newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
-        } else if(type === 'next') {
-          newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
-        }
+			changeMonth(type) {
+				let newDate
+				if (type === 'pre') {
+					newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
+				} else if (type === 'next') {
+					newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
+				}

-        this.setDate(newDate)
+				this.setDate(newDate)
 				this.monthSwitch()
-      },
+			},
 			/**
 			 * 设置日期
 			 * @param {Object} date
 			 */
 			setDate(date) {
-					console.log("this.weeks88 ",date )
+				console.log("this.weeks88 ", date)
 				this.cale.setDate(date)
-				console.log("this.weeks88 ",this.cale )
+				console.log("this.weeks88 ", this.cale)
 				this.weeks = this.cale.weeks
-				console.log("this.weeks88 ",this.weeks )
+				console.log("this.weeks88 ", this.weeks)
 				this.nowDate = this.cale.getInfo(date)
 			}
 		}
 	}
 </script>

-<style lang="scss" >
+<style lang="scss">
 	$uni-primary: #007aff !default;

 	.uni-calendar {
@@ -865,17 +884,17 @@

 	.uni-date-changed--time-end {
 		/* #ifndef APP-NVUE */
-    display: flex;
+		display: flex;
 		/* #endif */
 		align-items: center;
 	}

 	.uni-date-changed--time-date {
-    color: #999;
+		color: #999;
 		line-height: 50px;
-    /* #ifdef MP-TOUTIAO */
-    font-size: 16px;
-    /* #endif */
+		/* #ifdef MP-TOUTIAO */
+		font-size: 16px;
+		/* #endif */
 		margin-right: 5px;
 		// opacity: 0.6;
 	}
@@ -934,5 +953,6 @@
 	.uni-datetime-picker--btn:active {
 		opacity: 0.7;
 	}
+
 	/* #endif */
-</style>
+</style>
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
@@ -108,7 +108,7 @@
 			:start-date="calendarRange.startDate" :end-date="calendarRange.endDate" :selectableTimes="mobSelectableTime"
 			:startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder" :default-value="defaultValue"
 			:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :hasTime="hasTime" :insert="false"
-			:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" />
+			:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close"  :disabledDate="disabledDate" />
 	</view>
 </template>
 <script>
@@ -205,6 +205,11 @@
 			}
 		},
 		props: {
+			// 禁用日期
+			disabledDate: {
+				type: Array,
+				default: []
+			},
 			type: {
 				type: String,
 				default: 'datetime'