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

最新推荐文章于 2024-03-14 23:36:21 发布

小布丁儿Y

最新推荐文章于 2024-03-14 23:36:21 发布

阅读量3.4k

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/weixin_48931415/article/details/126139922

版权

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

这是我要实现的效果：

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

<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

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
4
评论
uniapp时间组件封装年-月-日-时-分-秒

uniapp获取当前年月日-时分秒
复制链接

扫一扫

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

“相关推荐”对你有帮助么？