pub(uni-datetime-picker): - 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的 bug

- 优化 弹出层在超出视窗边缘被遮盖的问题

Author: Fasttian

pages/nvue/datetime-picker/datetime-picker.nvue

@@ -2,7 +2,7 @@
 	<view class="page">
 		<text class="example-info">可以同时选择日期和时间的选择器</text>
 		<uni-section :title="'日期用法：' + single" type="line"></uni-section>
-		<view class="example-body">
+		<view class="example-body" style="margin-left: 500px;">
 			<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" @maskClick="maskClick" />
 		</view>
 		<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
@@ -35,7 +35,7 @@
 				rangeSeparator="至" />
 		</view>
 		<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
-		<view class="example-body">
+		<view class="example-body" style="margin-left: 500px;">
 			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
 		</view>
 	</view>

pages/vue/datetime-picker/datetime-picker.vue

@@ -2,7 +2,7 @@
 	<view class="page">
 		<text class="example-info">可以同时选择日期和时间的选择器</text>
 		<uni-section :title="'日期用法：' + single" type="line"></uni-section>
-		<view class="example-body">
+		<view class="example-body" style="margin-left: 500px;">
 			<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" @maskClick="maskClick" />
 		</view>
 		<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
@@ -35,7 +35,7 @@
 				rangeSeparator="至" />
 		</view>
 		<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
-		<view class="example-body">
+		<view class="example-body" style="margin-left: 500px;">
 			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
 		</view>
 	</view>

uni_modules/uni-datetime-picker/changelog.md

@@ -1,3 +1,6 @@
+## 2.0.10（2021-07-08）
+- 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的 bug
+- 优化 弹出层在超出视窗边缘被遮盖的问题
 ## 2.0.9（2021-07-07）
 - 新增 maskClick 事件
 - 修复 特殊情况日历 rpx 布局错误的 bug，rpx -> px

uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue

@@ -155,15 +155,15 @@
 
 	.uni-calendar-item--multiple .uni-calendar-item--before-checked {
 		background-color: #409eff;
-		color: #fff;
+		color: #fff !important;
 		// border-radius: 50%;
 		box-sizing: border-box;
 		border: 6px solid #f2f6fc;
 	}
 
 	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
 		background-color: #409eff;;
-		color: #fff;
+		color: #fff !important;
 		// border-radius: 50%;
 		box-sizing: border-box;
 		border: 6px solid #f2f6fc;

uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="uni-date">
-		<view @click="show">
+		<view class="uni-date-editor" @click="show">
 			<slot>
 				<view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled,
 		'uni-date-x--border': border}">
@@ -327,6 +327,10 @@
 					start: this.caleRange.startTime,
 					end: this.caleRange.endTime
 				}
+			},
+			datePopupWidth() {
+				// todo
+				return this.isRange ? 653 : 301
 			}
 		},
 		mounted() {
@@ -370,20 +374,12 @@
 				this.popover = {
 					top: '10px'
 				}
-				// const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor--x")
-				// dateEditor.boundingClientRect(rect => {
-				// 	console.log(22222222, rect);
-				// 	if (leftWindowInfo.errMsg) {
-				// 		left = rect.left + 'px'
-				// 	} else {
-				// 		left = '15px'
-				// 	}
-				// 	this.popover = {
-				// 		// top: rect.top + rect.height + 15 + 'px',
-				// 		top: '40px',
-				// 		left: 0,
-				// 	}
-				// }).exec()
+				const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
+				dateEditor.boundingClientRect(rect => {
+					if (systemInfo.windowWidth - rect.left < this.datePopupWidth) {
+						this.popover.left = `${systemInfo.windowWidth - rect.left - this.datePopupWidth - 20}px`
+					}
+				}).exec()
 				setTimeout(() => {
 					this.popup = !this.popup
 					// this.visible = true
@@ -393,8 +389,8 @@
 			close() {
 				setTimeout(() => {
 					this.popup = false
-					// this.visible = true
-					this.$emit('maskClick', this.value)
+					// this.visible = true
+					this.$emit('maskClick', this.value)
 				}, 20)
 			},
 			setEmit(value) {
@@ -453,7 +449,6 @@
 					fulldate: e.fulldate
 				}
 				this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj)
-				// console.log('startMultipleStatus 返回:', this.startMultipleStatus)
 			},
 
 			rightChange(e) {
@@ -469,7 +464,6 @@
 					fulldate: e.fulldate
 				}
 				this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
-				// console.log('endMultipleStatus 返回:', this.endMultipleStatus)
 			},
 
 			mobileChange(e) {
@@ -712,8 +706,8 @@
 		padding: 0 8px;
 		background-color: #fff;
 		position: absolute;
-		top: 0;
-		left: 0;
+		top: 110;
+		left: 110;
 		z-index: 999;
 		/* width: 733px; */
 		border: 1px solid #e4e7ed;

uni_modules/uni-datetime-picker/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-datetime-picker",
   "displayName": "uni-datetime-picker 日期选择器",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
   "keywords": [
     "uni-datetime-picker",