uu

components/tpx-date-input/demo-datetime-picker.vue

@@ -0,0 +1,121 @@
+<template>
+	<view class="page container">
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">可以同时选择日期和时间的选择器</text>
+		</uni-card>
+		<uni-section :title="'日期用法：' + dateString" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker type="date" :clear-icon="false" v-model="dateString" @maskClick="maskClick" />
+		</view>
+		<uni-section :title="'日期时间用法：' + datetimeString" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker type="datetime" :start="start" :end="end" v-model="datetimeString" @change="change" />
+		</view>
+    <uni-section :title="'日期时间 default-value：' + datetimeDefaultValueString" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker type="datetime" :start="start" :end="end" :default-value="datetimeDefaultValue" v-model="datetimeDefaultValueString" @change="change" />
+		</view>
+		<uni-section :title="'日期范围用法：' + '[' + dateRange + ']'" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="dateRange" type="daterange" @maskClick="maskClick" />
+		</view>
+		<uni-section :title="'日期时间范围用法：' + '[' + datetimeRange + ']' " type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="datetimeRange" type="datetimerange" rangeSeparator="至" />
+		</view>
+		<uni-section :title="'时间戳用法：' + dateTimestamp" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker returnType="timestamp" v-model="dateTimestamp" @change="change" />
+		</view>
+		<uni-section :title="'date 对象用法：' + dateInstance" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker type="datetime" returnType="date" v-model="dateInstance" @change="change" />
+		</view>
+		<uni-section :title="'插槽用法：' + dateString" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="dateString">我是一个插槽，点击我</uni-datetime-picker>
+		</view>
+		<uni-section :title="'无边框用法：' + dateString" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="dateString" :border="false" />
+		</view>
+		<uni-section :title="'隐藏清除按钮用法：' + dateString" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="dateString" :clearIcon="false" />
+		</view>
+		<uni-section :title="'disabled用法：' + dateString" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="dateString" disabled />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dateString: this.getDateTime(new Date()),
+				datetimeString: this.getDateTime(new Date(), false),
+        datetimeDefaultValueString: '',
+        datetimeDefaultValue: this.getDateTime(Date.now() + 1 * 24 * 3600000),
+				dateTimestamp: Date.now(),
+				dateInstance: new Date(),
+				dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
+				datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 * 3600000)],
+				start: Date.now() - 10 * 24 * 3600000,
+				end: Date.now() + 10 * 24 * 3600000
+			}
+		},
+		watch: {
+			datetimeString() {
+				console.log('日期时间单选:', this.datetimeString);
+			},
+			dateRange() {
+				console.log('日期范围选:', this.dateRange);
+			},
+			datetimeRange() {
+				console.log('日期时间范围选:', this.datetimeRange);
+			}
+		},
+		methods: {
+			change(e) {
+				console.log('----change事件:', e);
+			},
+			maskClick() {
+				console.log('----maskClick事件');
+			},
+      getDateTime(date, addZero = true){
+        return `${this.getDate(date, addZero)} ${this.getTime(date, addZero)}`
+      },
+      getDate(date, addZero = true){
+        date = new Date(date)
+        const year = date.getFullYear()
+        const month = date.getMonth()+1
+        const day = date.getDate()
+        return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
+      },
+      getTime(date, addZero = true){
+        date = new Date(date)
+        const hour = date.getHours()
+        const minute = date.getMinutes()
+        const second = date.getSeconds()
+        return this.hideSecond ?
+        `${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}` :
+        `${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second}`
+      },
+			addZero(num) {
+				if (num < 10) {
+					num = `0${num}`
+				}
+				return num
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.example-body {
+		background-color: #fff;
+		padding: 10px;
+	}
+</style>

components/tpx-date-input/tpx-date-input.vue

@@ -18,19 +18,30 @@
 	</view>
 	<!-- 日历 -->
 	<view v-if="showCladar">
-		<u-calendar title="请选择日期范围" :minDate="minDate" :monthNum="monthNum" color="#B12D29" :mode="mode" rowHeight="90" closeOnClickOverlay :show="showCladar" :defaultDate="value" @confirm="handleClaOk" @close="handleSwitchCladar"
+		<uni-datetime-picker ref="unDateTimePckRef" @maskClick="handleClaClose" 
-		></u-calendar>
+			:start="minDate" :end="maxDate" v-model="proxyValue"
+			:type="mode" @change="handleClaValChange"
+			:placeholder="placeholder"
+		>
+			<!-- 使用自定义显示 -->
+			<view></view>
+		</uni-datetime-picker>
 	</view>
 	
 </template>
 
 <script>
-	import {  } from "@/common/untool"
+	// uni-datetime-picker 插件地址：  https://ext.dcloud.net.cn/plugin?id=3962
 	import dayjs from "dayjs"
 	const formatStr = 'YYYY-MM-DD'
 	
 	export default {
 		computed: {
+			proxyValue: {
+				get() {
+					return this.value
+				}
+			},
 			inputValue() {
 				let val = this.value
 				if(Array.isArray(val)) {
@@ -66,14 +77,14 @@
 					return dayjs().subtract(12, 'months').format(`${formatStr}`)
 				}
 			},
-			monthNum: {
+			maxDate: {
 				default() {
-					return 24
+					return dayjs().add(12, 'months').format(`${formatStr}`)
 				}
 			},
 			mode: {
 				default() {
-					return 'range' // single | multiple | range
+					return 'datetimerange' // datetime | date | datetimerange
 				}
 			},
 			customStyle:{
@@ -124,26 +135,39 @@
 				this.handleSwitchCladar()
 			},
 			handleChange(val){
-				val[0] = dayjs(val[0]).format(`${formatStr} 00:00:00`)
+				// 补全 时间戳
-				val[1] = dayjs(val[1]).format(`${formatStr} 23:59:59`)
+				if(val[0].indexOf(":") == -1) {
+					val[0] = dayjs(val[0]).format(`${formatStr} 00:00:00`)
+				}
+				if(val[1].indexOf(":") == -1) {
+					val[1] = dayjs(val[1]).format(`${formatStr} 23:59:59`)
+				}
 				this.$emit('change', val)
 				this.$emit('update:value', val) 
 			},
-			handleClaOk(res){
+			handleClaValChange(res) {
 				const ary = Object.values(res)
 				const val = [ary[0], ary[ary.length-1]]
 				this.handleChange(val)
+			},
+			handleClaClose(res){
 				this.handleSwitchCladar()
 			},
 			handleSwitchCladar() {
 				this.showCladar = !this.showCladar
+				// 手动唤起日期事件
+				setTimeout(()=> {
+					if(this.showCladar) {
+						this.$refs.unDateTimePckRef.show()
+					}
+				}, 300)
 			},
 			handleToolsRangChange(val) {
 				if(val == -1) {
 					this.handleSwitchCladar()
 				} else {
 					let sltRang = this.toolsRangesList.filter(t=> t.val == val)[0].range
-					this.handleChange(sltRang)
+					this.handleChange(sltRang, )
 				}
 			}
 		}

main.js

@@ -69,4 +69,3 @@ export function createApp() {
 	}
 }
 // #endif
-

uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js

@@ -2,7 +2,7 @@ import en from './en.json'
 import zhHans from './zh-Hans.json'
 import zhHant from './zh-Hant.json'
 export default {
+	'zh-Hans': zhHans, // 硬重置 中文 语言包顺序， 默认中文
 	en,
-	'zh-Hans': zhHans,
 	'zh-Hant': zhHant
 }

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

@@ -105,7 +105,7 @@
       :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" @close="close"/>
 	</view>
 </template>
 <script>
@@ -625,12 +625,14 @@
 				this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
 			},
 			mobileChange(e) {
+				this.close()
+				
 				if (this.isRange) {
 					const {before, after} = e.range
 
-          if(!before || !after){
+					if(!before || !after){
-            return
+						return
-          }
+					}
 
 					this.handleStartAndEnd(before, after, true)
 					if (this.hasTime) {
@@ -650,7 +652,6 @@
 					}
 					this.setEmit(this.displayValue)
 				}
-				this.$refs.mobile.close()
 			},
 			rangeChange(before, after) {
 				if (!(before && after)) return