当前位置：网站首页>uniapp时间组件封装年-月-日-时-分-秒

uniapp时间组件封装年-月-日-时-分-秒

2022-08-05 07:25:00 【小布丁儿Y】

在做项目时用到可以选择时分秒的组件百度了很多跟自己的需求不太符合于是请求公司前端大佬封装了一个可选择的年-月-日-时-分-秒组件

这是我要实现的效果：

单独建一个文件夹在需要用到的页面引入

<template>
   
   <view class="datePicker" ref="datePicker">
       <uni-popup ref="popup" type="bottom">
           <view class="popupBox">
               <view class="dtitle">
                   <view class="name">{ {title}}</view>
                   <view class="close" @click="cancelFunction();"></view>
               </view>
               <picker-view
                   @change="onChange($event)"
                   class="picker-view"
                   @pickstart="pickStart($event)"
                   @pickend="pickEnd()"
                   :value="dateValue"
               >
                   <picker-view-column v-for="(item,index) in data" :key="index">
                       <view class="item" v-for="(item1,index1) in item.data" :key="index1">{ {item1}}{ {item.$name}}</view>
                   </picker-view-column>
               </picker-view>
               <view class="operate">
                   <view class="btn confirm" :class="{'cur':isDataFinish}" @click="confirmFunction();">{ {confirmButtonText}}</view>
               </view>
           </view>
       </uni-popup>
   </view>
</template>

页面展示

<view class="lis">
				<view class="th">有效期</view>
				<view class="lineBox">
					<view class="lines">
						<view class="row">
							<view class="th" @click="openDatePicker(1)">起始时间</view>
							<view class="uni-input" @click="openDatePicker(1)">{
   {timeFilterStartTime?timeFilterStartTime:startInitDate}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="lis">
				<view class="th"></view>
				<view class="lineBox">
					<view class="lines">
						<view class="row">
							<view class="th" @click="openDatePicker(2)">结束时间</view>
							<view class="uni-input" @click="openDatePicker(2)">{
   {timeFilterEndTime?timeFilterEndTime:endInitDate}}</view>
						</view>
					</view>
				</view>
			</view>

因为我是有一个开始时间和一个介绍时间所以写了两遍组件

以下是弹窗打开的组件（记得import引入组件哦!!）

<!-- 日期时间拨盘选择组件 -->
		<datePicker
			title="起始时间"
			type="yy-mm-dd hh:mm:ss"
			minDate="2020-05-20 10:20:20"
			maxDate="2025-05-20 10:20:50"
			:initDate="startInitDate"
			ref="startDatePicker"
			@confirm="confirmFunction($event)"
			mpWeixinConfirm="confirmFunction"
		>
		</datePicker>
		<!-- 日期时间拨盘选择组件 -->
		<datePicker
			title="结束时间"
			type="yy-mm-dd hh:mm:ss"
			minDate="2020-05-20 10:20:20"
			maxDate="2025-05-20 10:20:50"
			:initDate="endInitDate"
			ref="endDatePicker"
			@confirm="confirmFunction($event)"
			mpWeixinConfirm="confirmFunction"
		>
		</datePicker>

data数据：

data() {
			return {
				timeFilterStartTime: '', 	//初始化筛选时间开始时间
				startInitDate:'',			//初始化默认开始时间
				endInitDate:'',				//初始化默认结束时间
				timeFilterEndTime: '', 		//初始化筛选时间结束时间
				open:'',                    //判断时间选择器类型
			}
		},

这俩个字段是我要在页面展示的值

methods：

// 打开时间选择器
			openDatePicker(type) {
				this.open = type
				if(this.open == 1){
					this.$refs.startDatePicker.open();
				}else{
					this.$refs.endDatePicker.open();
				}
			},
			// 时间选择器确认
			confirmFunction($event){
				if(this.open == 1){
					this.timeFilterStartTime = $event[0].value+"-"+$event[1].value+"-"+$event[2].value+" "+$event[3].value+":"+$event[4].value+":"+$event[5].value;
				}else{
					this.timeFilterEndTime = $event[0].value+"-"+$event[1].value+"-"+$event[2].value+" "+$event[3].value+":"+$event[4].value+":"+$event[5].value;
				}
			},
			// 获取初始开始时间
			getStartInitDate(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				var houer = date.getHours()
				var minute = date.getMinutes()
				var second = date.getSeconds();
				this.startInitDate = year+"-"+(month>9?month:("0"+month))+"-"+(day>9?day:("0"+day))+" "+(houer?houer:("0"+houer))+":"+(minute?minute:("0"+minute))+":"+(second?second:("0"+second));
				this.timeFilterStartTime = year+"-"+(month>9?month:("0"+month))+"-"+(day>9?day:("0"+day))+" "+(houer?houer:("0"+houer))+":"+(minute?minute:("0"+minute))+":"+(second?second:("0"+second));
			},
			// 获取初始结束时间
			getEndInitDate(){
				var date = new Date().getTime()+604800000;
					date = new Date(date);
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				var houer = date.getHours()
				var minute = date.getMinutes()
				var second = date.getSeconds();
				this.endInitDate = year+"-"+(month>9?month:("0"+month))+"-"+(day>9?day:("0"+day))+" "+(houer?houer:("0"+houer))+":"+(minute?minute:("0"+minute))+":"+(second?second:("0"+second));
				this.timeFilterEndTime = year+"-"+(month>9?month:("0"+month))+"-"+(day>9?day:("0"+day))+" "+(houer?houer:("0"+houer))+":"+(minute?minute:("0"+minute))+":"+(second?second:("0"+second));
			},

记得在页面加载时调用一下获取时间

onLoad() {
			// 获取默认时间
			this.getStartInitDate();
			this.getEndInitDate();
		},

看着好乱不过直接用应该没什么问题！

原网站

版权声明
本文为[小布丁儿Y]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_48931415/article/details/126139922

当前位置：网站首页>uniapp时间组件封装年-月-日-时-分-秒

uniapp时间组件封装年-月-日-时-分-秒

边栏推荐

猜你喜欢

随机推荐