feat:日期组件

components/DatePicker/DatePicker.vue

 <template>
 	<view class="timer">
 		<NormalTitle :elementInfo="elementInfo"></NormalTitle>
-		<uni-datetime-picker
-			:type="elementInfo.option.dateTime.showTime ?  'datetime' : 'date'"
-			v-model="elementInfo.option.dateTime.date"
-		/>
+		<view class="date-wrap">
+			<u-icon class="icon" name="calendar-fill"></u-icon>
+			<u-input 
+				placeholder="请输入日期" 
+				input-align="center" 
+				v-model="elementInfo.option.dateTime.date" 
+				type="select" 
+				:select-open="pickerTime"
+				:border="true"
+				@click="pickerTime = true"
+				:custom-style="{color: '#fff'}"
+			></u-input>
+		</view>
+		<u-picker 
+			mode="time" 
+			v-model="pickerTime" 
+			@confirm="timeConfirm"
+			:default-time="elementInfo.option.dateTime.date ? elementInfo.option.dateTime.date : null" 
+			:params="elementInfo.option.dateTime.showTime ? timeParams : dateParams"
+		></u-picker>
 	</view>
 </template>
 <script>
@@ -18,7 +34,23 @@
 		},
 		data() {
 			return {
-				
+				dateParams: {
+					year: true,
+					month: true,
+					day: true,
+					hour: false,
+					minute: false,
+					second: false
+				},
+				timeParams: {
+					year: true,
+					month: true,
+					day: true,
+					hour: true,
+					minute: true,
+					second: true
+				},
+				pickerTime: false
 			};
 		},
 		onReady() {
@@ -28,7 +60,19 @@
 			
 		},
 		methods: {
-			
+			timeConfirm(e){
+        const year = e.year
+        const month = e.month
+        const day = e.day
+        const hour =e.hour
+        const minute = e.minute
+				const second = e.second
+        const dateTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`
+				this.$emit('changeDateTime', {
+					id: this.elementInfo.id,
+					time: dateTime
+				})
+			},
 		}
 	}
 </script>
@@ -40,5 +84,27 @@
 		justify-content: center;
 		width: 100%;
 		color: #fff;
+		.date-wrap{
+			width: 200px;
+			position: relative;
+			.icon {
+				font-size: 20px;
+				position: absolute;
+				top: 5px;
+				left: 10px;
+			}
+			.u-input__right-icon .u-icon--right .u-icon__icon{
+				display: none;
+				background: red;
+			}
+		}
 	}
 </style>
+
+<style lang="scss">
+	/deep/ .u-input__right-icon .u-icon--right .u-icon__icon{
+		display: none;
+		background: red !important;
+	}
+</style>
+

pages/index/index.vue

@@ -14,7 +14,7 @@
 					zIndex: `${element.type == 'NormalTabs' ? 999999 : index + 1}`
 				}"
 			>
-				<DatePicker v-if="element.type == 'DateTimePicker'" :elementInfo="element"></DatePicker>
+				<DatePicker v-if="element.type == 'DateTimePicker'" @changeDateTime = "changeDateTime" :elementInfo="element"></DatePicker>
 				<!-- 普通柱状图 -->
 				<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
 				<!-- 普通折线图 -->
@@ -61,7 +61,7 @@
 	export default {
 		data() {
 			return {
-				reportInfo: {},
+				reportInfo: {	},
 				timename: null,
 				pageScrollTop: 0
 			}
@@ -141,6 +141,10 @@
 			clearInterval(this.timename)
 		},
 		methods: {
+			changeDateTime ({id, time}){
+				const obj = this.reportInfo.list.find(item => item.id === id)
+				obj.option.dateTime.date = time
+			},
 			// 日期时间格式化
 			dateTimeFormat(val){
 				let date = new Date(val)
@@ -210,7 +214,7 @@
 			async getReportCharts() {
 				clearInterval(this.timename)
 				const that = this 
-				let res = await that.$u.api.getReportCharts({id: '6274f095460633568801a709'})
+				let res = await that.$u.api.getReportCharts({id: '62787b674606332538b46322'})
 				uni.stopPullDownRefresh()
 				const { Status, Result: { info, list } } = res.data
 				if (Status === 'true') {
@@ -293,4 +297,10 @@
 	position: sticky;
 	top: 0 !important;
 }
+
+::v-deep {
+	.u-input__right-icon--select {
+		display: none;
+	}
+}
 </style>