记录uni-app的时间选择器

已于 2022-07-13 23:14:17 修改
阅读量1.5w 收藏 23
点赞数 11
分类专栏： 前端 文章标签： 前端 javascript vue.js
于 2020-02-25 11:40:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/monk96/article/details/104494268
版权

由于开发过程中需要用到时间选择器，所以写了一个小插件。
先来看官方的文档：
官方文档
在这里插入图片描述
官方功能不完善，所以稍微改动一下；

<template>
	<view>
		<picker :title="index" @change="bindTimeChange" @columnchange="columnchange" mode="multiSelector" :disabled="disabled" :class="{disabled:disabled}"
		 :value="index" :range="array">
			<view class="uni-input" v-if="showTime">{{showTime}}
			</view>
			<view v-else class="placeholder">{{placeholder}}</view>
		</picker>
	</view>
	<!-- 只读 -->
</template>

<script>
	export default {
		name: 'dy-Date-Picker',
		props: {
			timeType: {
				type: String,
				default: () => 'day'
			},
			disabled: {
				type: Boolean,
				default: () => false
			},
			// 是否显示图标
			iconshow: {
				type: Boolean,
				default: () => true
			},
			placeholder: {
				type: String,
				default () {
					return '请选择'
				}
			},
			childValue: {
				default () {
					return ''
				}
			},
			minSelect: {
				type: String,
				default: () => '1900/01/01'
			},
			maxSelect: {
				type: String,
				default: () => '2050/12/31'
			}
		},
		data() {
			return {
				index: [0],
				array: [],
				yearArr: [], // 年份数组
				monthArr: [], // 月份数组
				yearIndex: 0, // 年份选中下标
				dayArr:[0,1,2,3,4,5,6,7],//天数
				hourArr:[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],[5,10,15,20,25,30,35,40,45,50,55]],
				showTime: this.moment(this.childValue)
			}
		},

		methods: {
			moment(strTime) {
				let type = this.timeType
				if (!strTime) {
					return
				}
				let value = 0;
				if(type == 'tian'){
					value = 0;
					return value;
				}else if (type == 'hour'){
					value = 0;
					return value;
				}
				
				let time = new Date(strTime)
				let y = time.getFullYear();
				let m = time.getMonth() + 1
				m = m < 10 ? `0${m}` : m
				let d = time.getDate()
				d = d < 10 ? `0${d}` : d
				let hh = time.getHours()
				hh = hh < 10 ? `0${hh}` : hh
				let mm = time.getMinutes()
				mm = mm < 10 ? `0${mm}` : mm
				let ss = time.getSeconds()
				ss = ss < 10 ? `0${ss}` : ss
				value = `${y}/${m}/${d} ${hh}:${mm}:${ss}`
				if (type === 'year') {
					value = `${y}`
				}
				if (type === 'month') {
					value = `${y}-${m}`
				}
				if (type === 'day') {
					value = `${y}-${m}-${d}`
				}
				return value
			},
			/**
			 * [setDefaultValue 设置默认值]
			 */
			setDefaultValue() {
				let date = this.moment(new Date().getTime()) //获取当前时间；并展示
				this.valueEchoed(date)
			},
			bindDateChange(e) {
				this.childValue = e.target.value;
			},
			dateInit() {
				let type = this.timeType;
				if(type == 'tian'){
					this.array[0] = this.dayArr;
					return ;
				}else if(type == 'hour'){
					this.array = this.hourArr;
					return ;
				}
				this.array = []
				this.yearArr = []
				this.monthArr = []
				
				let minDate = this.moment(this.minSelect) || []
				let maxDate = this.moment(this.maxSelect) || []
				minDate = minDate ? minDate.split(' ') : ''
				maxDate = maxDate ? maxDate.split(' ') : ''
				minDate = minDate[0] ? minDate[0].split('-') : 1900
				maxDate = maxDate[0] ? maxDate[0].split('-') : 2050
				
				
				let {
					monthStar,
					monthEnd
				} = ''
				let yearStar = minDate[0] ? parseInt(minDate[0]) : 1900
				let yearEnd = maxDate[0] ? parseInt(maxDate[0]) : 2050
				if (type === 'day') {
					let dateStar = minDate[2] ? parseInt(minDate[2]) : 1
					let dateEnd = maxDate[2] ? parseInt(maxDate[2]) : 31
				}
				if (type === 'month' || type === 'day') {
					monthStar = minDate[1] ? parseInt(minDate[1]) : 1
					monthEnd = maxDate[1] ? parseInt(maxDate[1]) : 12
				}

				for (let y = yearStar; y <= yearEnd; y++) {
					let ytext = y < 10 ? `0${y}` : y; //小于10 加 01
					this.yearArr.push(`${ytext}年`) //加入选择的数组
					if (type === 'month' || type === 'day') {
						let mGroup = this.getMonthArr(
							y,
							yearStar,
							yearEnd,
							monthStar,
							monthEnd,
							type
						)
						mGroup.length && this.monthArr.push(mGroup)
					}
				}

				this.array[0] = this.yearArr
				
				if (type === 'month' || type === 'day') {
					this.array[1] = this.monthArr.length && this.monthArr[0]
				}
				if (type === 'day') {
					this.array[2] = this.getDateArr(
						parseInt(this.yearArr[0]),
						parseInt(this.monthArr[0])
					)
				}
			},

			getMonthArr(y, yearStar, yearEnd, monthStar, monthEnd, type) {
				let mGroup = []
				let dateGroup = []
				if (y === yearStar && y !== yearEnd) {
					for (let m = monthStar; m <= 12; m++) {
						let mtext = m < 10 ? `0${m}` : m
						mGroup.push(`${mtext}月`)
					}
				}

				if (y === yearEnd && y !== yearStar) {

					for (let m = 1; m <= monthEnd; m++) {
						let mtext = m < 10 ? `0${m}` : m
						mGroup.push(`${mtext}月`)
					}

				}

				if (y !== yearStar && y !== yearEnd) {
					for (let m = 1; m <= 12; m++) {
						let mtext = m < 10 ? `0${m}` : m
						mGroup.push(`${mtext}月`)
					}
				}

				if (y === yearStar && y === yearEnd) {
					for (let m = monthStar; m <= monthEnd; m++) {
						let mtext = m < 10 ? `0${m}` : m
						mGroup.push(`${mtext}月`)
					}
				}
				return mGroup
			},
			getDateArr(y, m) {
				let minDate = this.moment(this.minSelect) || []
				let maxDate = this.moment(this.maxSelect) || []
				minDate = minDate.length && minDate.split('-')
				maxDate = maxDate.length && maxDate.split('-')
				let yearStar = minDate[0] ? parseInt(minDate[0]) : 1900
				let yearEnd = maxDate[0] ? parseInt(maxDate[0]) : 2050
				let monthStar = minDate[1] ? parseInt(minDate[1]) : 1
				let monthEnd = maxDate[1] ? parseInt(maxDate[1]) : 12
				let datearr = []
				let maxnum = 30
				let date31 = [1, 3, 5, 7, 8, 10, 12]
				if (date31.includes(m)) {
					maxnum = 31
				}
				// 判断是平年还是闰年的2月份
				if (m === 2) {
					if (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0)) {
						maxnum = 29
					} else {
						maxnum = 28
					}
				}
				let dateStar = minDate[2] ? parseInt(minDate[2]) : 1
				let dateEnd = maxDate[2] ? parseInt(maxDate[2]) : maxnum
				if (
					(y !== yearEnd && y !== yearStar) ||
					(y === yearStar && m !== monthStar && m !== monthEnd) ||
					(y === yearEnd && m !== monthEnd && m !== monthStar) ||
					(yearStar === yearEnd && m !== monthStar && m !== monthEnd) ||
					(yearStar !== yearEnd && y === yearEnd && m !== monthEnd) ||
					(y === yearStar && m !== monthStar && y < yearEnd)
				) {

					for (let d = 1; d <= maxnum; d++) {
						let dtext = d < 10 ? `0${d}` : d
						datearr.push(`${dtext}日`)
					}
				}

				if ((yearStar === yearEnd && y === yearStar && m === monthStar && m !== monthEnd) || (yearStar !== yearEnd && y ===
						yearStar && m === monthStar)) {

					for (let d = dateStar; d <= maxnum; d++) {
						let dtext = d < 10 ? `0${d}` : d
						datearr.push(`${dtext}日`)
					}
				}

				if ((y === yearEnd && m === monthEnd && m !== monthStar && yearStar === yearEnd) || (y === yearEnd && yearStar !==
						yearEnd && m === monthEnd)) {

					for (let d = 1; d <= dateEnd; d++) {
						let dtext = d < 10 ? `0${d}` : d
						datearr.push(`${dtext}日`)
					}
				}

				if (
					y === yearStar &&
					yearStar === yearEnd &&
					m === monthStar &&
					monthStar === monthEnd
				) {

					for (let d = dateStar; d <= dateEnd; d++) {
						let dtext = d < 10 ? `0${d}` : d
						datearr.push(`${dtext}日`)
					}
				}
				return datearr
			},

			bindTimeChange(e) {
				let timeValue = ''
				let indexArr = e.detail.value;
				
				let type = this.timeType
				if(type == 'hour'){
					timeValue = `${this.array[0][indexArr[0]]}:${this.array[1][indexArr[1]]}`;
					this.showTime = timeValue;
					this.$emit('getData', timeValue)
					return ;
				}else if(type == 'tian'){
					timeValue = this.array[0][indexArr[0]]+'天';
					this.showTime = timeValue;
					this.$emit('getData', timeValue)
					return ;
				}
				let year = parseInt(this.array[0][parseInt(indexArr[0]) || 0])
				let month = ''
				timeValue = year + ''
				if (type === 'month' || type === 'day') {
					let index = parseInt(indexArr[1]) || 0
					index = index < 0 ? 0 : index
					month = parseInt(this.array[1][index])
					month = month < 10 ? `0${month}` : month
					timeValue = `${timeValue}-${month}`
				}
				if (type === 'day') {
					let dateindex = parseInt(indexArr[2]) || 0
					dateindex = dateindex < 0 ? 0 : dateindex
					let date = parseInt(this.array[2][dateindex])
					date = date < 10 ? `0${date}` : date
					timeValue = `${timeValue}-${date}`
				}
				
				this.showTime = timeValue;
				this.$emit('getData', timeValue)
			},
			// 当时发生改变时 加载对应的分钟数组
			columnchange(e) {
				const minIndex = e.detail.value
				const column = e.detail.column
				let type = this.timeType
				this.$set(this.index, column, minIndex)

				if (column === 0) {
					this.yearIndex = minIndex
					if (type === 'month' || type === 'day') {
						this.$set(this.array, 1, this.monthArr[minIndex])
					}
					if (type === 'day') {
						let monthindex = this.index[1] || 0

						let newDateArr = this.getDateArr(
							parseInt(this.yearArr[minIndex]),
							parseInt(this.monthArr[this.yearIndex][monthindex])
						)
						this.$set(this.array, 2, newDateArr)
					}
				}
				if (column === 1 && type === 'day') {
					let newDateArr = this.getDateArr(
						parseInt(this.yearArr[this.yearIndex]),
						parseInt(this.monthArr[this.yearIndex][minIndex])
					)
					this.$set(this.array, 2, newDateArr)
				}
			},
			valueEchoed(defaultTime) {
				this.index = [0]
				if (this.childValue || defaultTime) {
					let type = this.timeType;
					if(type == 'tian'){
						this.array = this.dayArr;
						return ;
					}else if(type == 'hour'){
						this.array = this.hourArr;
						return ;
					}
					
					let value = this.childValue || defaultTime
					value = this.moment(value)
					value = value.split('-')
					let index =
						this.array[0].findIndex(
							item => parseInt(item) === parseInt(value[0])
						) || 0
						index = index === -1 ? 0 : index
					this.index[0] = index
					this.yearIndex = index
					
					
					if (type === 'month' || type === 'day') {
						this.array[1] = this.monthArr.length && this.monthArr[index]
						const monthindex =
							(this.array[1] && this.array[1].length &&
								this.array[1].findIndex(
									item => parseInt(item) === parseInt(value[1])
								)) ||
							0
						this.index[1] = monthindex
					}
					if (type === 'day') {
						let index0 = this.index[0] || 0
						let index1 = this.index[1] || 0
						index0 = index0 === -1 ? 0 : index0
						index1 = index1 === -1 ? 0 : index1
						let newDay = this.getDateArr(
							parseInt(this.yearArr[index0]),
							parseInt(this.monthArr[index0][index1])
						)
						this.getDateIndex(newDay)
					}
				}
			},
			getDateIndex(newDay) {
				let defaultTime = this.moment(new Date().getTime())
				let value = this.childValue || defaultTime
				value = this.moment(value)
				value = value.split('-')
				this.array[2] = newDay
				let dateindex =
					this.array[2].findIndex(
						item => parseInt(item) === parseInt(value[2])
					) || 0
				this.index[2] = dateindex
			}
		},

		watch: {
			// 监测组件最小选择范围发生改变 初始化日期数据
			minSelect() {
				this.dateInit()
				this.setDefaultValue()
			},
			// 监测组件最大可选范围发生改变 初始化日期数据
			maxSelect() {
				this.dateInit()
				this.setDefaultValue()
			},
			childValue() {
				this.showTime = ''
				this.showTime = this.moment(this.childValue)
				this.dateInit()
				this.setDefaultValue()
			}
		},
		created() {
			this.dateInit()
			this.valueEchoed()
			if (!this.childValue) {
				this.setDefaultValue()
			}
		}
	}
</script>

<style lang="less">
	.tx_r {
		line-height: 48px;
		font-size: 15px;
		font-weight: normal;
		color: #848b9a;
	}

	.placeholder {
		color: #b5b8c2;
		font-size: 30rpx;
	}

	.fa-angle-right {
		font-size: 36rpx;
		padding-left: 12rpx;
	}
</style>

可直接复制 使用
谢谢关注；

东哥爱编程
关注
专栏目录
Uniapp日期时间选择插件支持更多选择方式日期范围日期时间范围
08-10
Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围）
uni-app - 日期 · 时间选择器
weixin_54721820的博客
11-22 9049
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。当选择时间和日期的时候会默认直接展示当前的时间和当天的日期。
uniapp - 详细实现日期时间、范围选择器组件，点击底部弹出日期、时间、某个范围的选择器弹框
m0_69665878的博客
09-06 2965
该组件可以在主页面中使用，可以通过绑定数据来控制默认选中的日期和时间，还可以通过设置属性来自定义选择器的样式和功能。总的来说，uni-datetime-picker组件是一个功能强大、界面美观、使用方便的日期时间选择器组件，适用于uni-app开发中需要选择日期和时间的场景。5、支持自定义选择器的功能，可以设置选择器的模式（日期模式、时间模式、日期时间模式等）和显示格式（年月日、时分、年月日时分等）。1、支持选择日期和时间，可以选择年、月、日、时、分等。如下图所示，本篇文章展示了非常多的用法和示例代码。
uniapp、小程序自定义选择日、周、月、季、年的时间选择器组件
zh626678的博客
01-23 6736
自定义选择日、周、月、季、年的日期选择器组件
uniapp时间选择器
m0_71966801的博客
01-05 1048
Uniapp 是一套基于Vue.js 开发的跨平台开发框架，它能够以一套代码编译成多个平台的应用，包括 iOS、Android、H5 等。要实现时间选择器可以使用uni-app提供的组件picker，它可以用于选择器、时间选择器、日期选择器等场景。在组件中监听 picker 的 change 事件，将选择的时间赋值给 data 中的 time 变量。在组件中使用 {{time}} 显示选择的时间。在页面上添加 picker 组件。
Uni-App中的u-datetime-picker时间选择器Demo
码农研究僧的博客
06-15 3023
对于网页端的推荐阅读：【ElementUI】详细分析DatePicker 日期选择器 事情起因是两个时间选择器同步了，本身是从后端慢慢步入全栈，对此将这个知识点从实战进行提炼 通过Demo进行总结
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uniapp框架-仿追书神器的小说阅读器小程序-uni-app项目源码-vue语法格式.zip
05-21
从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续优化性能，拓展功能，满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发...
uni-app登录实例的实现
10-29
首先，我们需要在HBuilderX中新建一个uni-app项目，选择合适的模板或者从零开始创建。 在创建项目后，我们可以在`pages`目录下新建一个`login`页面，用于展示登录界面。这里可以使用uni-app的UI组件，如`<input>`...
uni-app 插件 Calendar 日历多选 （不是范围选择）
08-25
【uni-app插件Calendar日历多选】是一个用于在uni-app框架中实现多日期选择功能的组件。uni-app是一款基于Vue.js开发的多端统一框架，它允许开发者编写一次代码，就能运行在H5、微信小程序、支付宝小程序、百度小...
uni-app时间选择器并选择时间段
热门推荐
yyxhzdm的博客
08-03 1万+
效果图： 1.在script中引用自定义组件：mx-datepicker.vue import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"; 2.注册组件： components: { MxDatePicker }, 3.新建时间选择页面代码： <template> <view> <view class="t...
uniapp 实现时间段选择器
weixin_61945023的博客
04-18 2955
u-popup结合picker-view搭配使用实现时间段选择器。
uniapp | 日历时间选择器，可配置选天、半天(上下午)、小时
ydongabc
07-19 2725
参考钉钉的交互，可配置按天、半天或者小时选择的日历时间选择器 通过 format 配置选天或选小时 通过绑定值 defaultVal 的 isHalf 配置是否为选半天(上、下午) t-picker组件模板 <template> <u-popup v-model="show" mode="bottom" @click="colse()"> <view class="t-pop" @tap.stop> <view class="pop-main">
uniapp实现时间选择器
qq_21861771的博客
11-14 2153
在<uni-datetine-picker>标签时 confm 事件监听用户洗择的时间。在事件外理都中，可以获到用户洗择的时间对象，并进行相应操作。具体的配置选项可以查阅Uniapp官方文档中uni-datetime-picker组件的相关说明。组件提供了丰富的配置选项，可以根据需求进行自定义。fields: 设置时间选择器展示的时间字段，如年、月、日、时、分等。运行项目，即可在页面中看到时间选择器，并能够选择时间。start: 设置时间选择器的起始时间。end: 设置时间选择器的结束时间。
UniAPP时间选择器uni-datetime-picker调整选择间隔大小
CSDN_DAY_DAY_UP的博客
04-27 1407
uni-datetime-picker修改可选时间的步进值
Uniapp实现时间选择器
zzx262625的博客
11-11 3877
组件提供了丰富的配置选项，可以根据需求进行自定义。start: 设置时间选择器的起始时间。end: 设置时间选择器的结束时间。fields: 设置时间选择器展示的时间字段，如年、月、日、时、分等。value: 设置时间选择器的初始值。和: 设置取消和确认按钮的文本。具体的配置选项可以查阅Uniapp官方文档中组件的相关说明。
uniapp时间选择器（月份选择、区间时间选择）
最新发布
2302_78685420的博客
10-21 215
仿照支付宝时间选择，月份及区间时间组件；
uni-app日期选择器
笔记
08-11 2451
首先是这个picker选择器，mode选择日期，end是写一个范围前日期，:end就是这个日期是动态变化的，还有change函数。然后是脚本，就默认显示当前日期，设计最后范围日期为今日日期，再有一个事件函数。写个简单的日期选择器，还没搞样式，所以有点丑。
uni-app时间选择器
09-23
uni-app的时间选择器可以使用uni-data-picker来实现。uni-data-picker是一个选择类的组件，支持多列级联选择。你可以使用它来实现省市区选择器的json数据。对于时间选择器，你可以定义一个包含年、月、日、时、分、秒等时间列的数据，然后将这些数据传递给uni-data-picker组件，即可实现时间选择器的功能。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东哥爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值