小程序时间组件uniapp

最新推荐文章于 2024-08-07 02:52:26 发布
最新推荐文章于 2024-08-07 02:52:26 发布
阅读量1.2k 收藏 4
点赞数
文章标签： 小程序 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lily1324193/article/details/121681952
版权
这篇博客介绍了如何在uniapp中实现一个自定义的时间选择组件，支持按月和按日两种选择模式，且在按日选择时支持日期区间选择。组件包含了两个按钮（取消和完成）、日期类型切换按钮以及相应的picker-view组件。在按日选择时，用户可以分别选择起始和结束日期，并进行了日期合法性的检查，确保结束日期不早于开始日期。此外，还展示了组件的样式布局和部分事件处理方法。
摘要由CSDN通过智能技术生成

uniapp 时间组件

在此组件中可切换“按月选择”、“按日选择”，按日选择为区间选择

<!-- 日期选择组件 -->
<template>
	<view class="datePicker-box">
		<view class="btn-box">
			<view class="cancel-btn" hover-class="btn-hover" @click="popCancel">取消</view>
			<view class="submit-btn" hover-class="btn-hover" @click="popSubmit">完成</view>
		</view>
		<view class="date-type-box" @click="changeDateType">
			<view class="date-text" v-if="isDayType">按日选择</view>
			<view class="date-text" v-else>按月选择</view>
			<image class="date-img" src="../../static/business/change.png"></image>
		</view>
		<view v-if="isDayType" class="day-box">
			<!-- <view class="field-box">
				<u-field v-model="bgnTime" label-width="0" @click="bgnFocus" :disabled="true" @blur="bgnBlur" class="field"></u-field>
				<view class="range-text">至</view>
				<u-field v-model="endTime" label-width="0" @click="endFocus" :disabled="true" class="field"></u-field>
			</view> -->

			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="startvalue" @change="startdayChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
				</picker-view-column>
			</picker-view>
			<view class="range-text">至</view>
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="endvalue" @change="enddayChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view v-else class="month-box">
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="monChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>
<script>
	export default {
		data: function() {
			const date = new Date();
			const years = [];
			const year = date.getFullYear();
			const months = [];
			const month = date.getMonth() + 1;
			const days = [];
			const day = date.getDate();
			const bigMonth = [1, 3, 5, 7, 8, 10, 12]
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i);
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i);
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i);
			}
			return {
				isDayType: false,
				bgnTime: '',
				endTime: '',
				title: "picker-view",
				years,
				year,
				months,
				month,
				days,
				day,
				bigMonth,
				startvalue: [9999, month - 1, day - 1],
				endvalue: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				bgnStamp: '',
				endStamp: ''
			};
		},
		onShow() {},

		watch: {
			isDayType(newName, oldName) {
				if (newName) {
					this.bgnTime = this.getNowFormatDate().currentdate
					this.endTime = this.getNowFormatDate().currentdate
					this.bgnStamp = this.getNowFormatDate().stamp
					this.endStamp = this.getNowFormatDate().stamp
				}
			},
		},
		methods: {
			//按月选择和按日选择tab切换
			changeDateType() {
				this.isDayType = !this.isDayType;
			},
			startdayChange: function(e) {
				const val = e.detail.value;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.day = this.days[val[2]];
				//闰年
				    if (this.month === 2) {
				      if (this.year % 4 === 0 && this.year % 100 !== 0) {
				        console.log('闰年')
				        this.setDays(29);
				      } else {
				        console.log('非闰年')
				        this.setDays(28);
				      }
				    } else {
				      //大月
				      if (this.contains(this.bigMonth, this.month)) {
				        this.setDays(31)
				      } else {
				        this.setDays(30)
				      }
				    }
				let ml = this.month.toString().length;
				let dl = this.day.toString().length
				if (ml === 1) {
					this.month = '0' + this.month
				}
				if (dl === 1) {
					this.day = '0' + this.day
				}
				this.bgnTime = this.year + "年" + this.month + "月" + this.day + "日";
				this.bgnStamp = this.year + "-" + this.month + "-" + this.day;
			},
			enddayChange: function(e) {
				const val = e.detail.value;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.day = this.days[val[2]];
				//闰年
				    if (this.month === 2) {
				      if (this.year % 4 === 0 && this.year % 100 !== 0) {
				        console.log('闰年')
				        this.setDays(29);
				      } else {
				        console.log('非闰年')
				        this.setDays(28);
				      }
				    } else {
				      //大月
				      if (this.contains(this.bigMonth, this.month)) {
				        this.setDays(31)
				      } else {
				        this.setDays(30)
				      }
				    }
				let ml = this.month.toString().length;
				let dl = this.day.toString().length
				if (ml === 1) {
					this.month = '0' + this.month
				}
				if (dl === 1) {
					this.day = '0' + this.day
				}
				this.endTime = this.year + "年" + this.month + "月" + this.day + "日";
				this.endStamp = this.year + "-" + this.month + "-" + this.day;
			},
			//判断元素是否在一个数组
			  contains: function (arr, obj) {
			    var i = arr.length;
			    while (i--) {
			      if (arr[i] === obj) {
			        return true;
			      }
			    }
			    return false;
			  },
			  setDays: function (day) {
			    const temp = [];
			    for (let i = 1; i <= day; i++) {
			      temp.push(i)
			    }
				this.days =  temp
			  },
			monChange: function(e) {
				const val = e.detail.value;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				let ml = this.month.toString().length;
				if (ml === 1) {
					this.month = '0' + this.month
				}
			},
			//弹出框确定
			popSubmit() {
				if (this.isDayType) {
					if (!this.bgnTime) {
						return wx.showToast({
							duration: 2000,
							title: '请选择开始时间',
							icon: 'none',
						})
					}
					if (!this.endTime) {
						return wx.showToast({
							duration: 2000,
							title: '请选择结束时间',
							icon: 'none',
						})
					}
					//结束时间不得早于开始时间
					let bgnStamp = new Date(this.bgnStamp).getTime();
					let endStamp = new Date(this.endStamp).getTime();
					if (endStamp <= bgnStamp) {
						return wx.showToast({
							duration: 2000,
							title: '结束时间不得早于等于开始时间',
							icon: 'none',
						})
					}
					//console.log(this.isDayType,this.bgnTime,this.endTime)
					this.$emit("popSubmit", this.isDayType, this.bgnTime, this.endTime);
					this.popCancel();
				} else {
					this.$emit("popSubmit", this.isDayType, this.month, this.year);
					this.popCancel();
				}
			},
			//弹出框取消
			popCancel() {
				this.$emit("popCancel");
				this.bgnTime = "";
				this.endTime = "";
				this.isDayType = false;
			},
			//时间格式化
			getNowFormatDate() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
			 }
				let currentdate = year + '年' + month + '月' + strDate + '日';
				let stamp = year + "-" + month + "-" + strDate;
				return {currentdate,stamp};
			}
		},
	};
</script>
<style lang="scss" scoped>
	.picker-view {
		width: 100%;
		height: 266rpx;
		margin-top: 10rpx;
	}

	.item {
		height: 50px;
		line-height: 50rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.btn-box {
		width: 100%;
		border: 1rpx solid rgba(0, 0, 0, 0.06);
		height: 87rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		line-height: 87rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #111736;

		.btn-hover {
			color: #507df1;
		}

		.submit-btn {
			color: #507df1;
		}
	}

	.day-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.range-text {
		font-weight: 700;
		width: 100%;
		background-color: #f8f8f8;
		margin: 5rpx auto;
		text-align: center;
	}

	.field-box {
		display: flex;
		height: 70rpx;
		line-height: 70rpx;
		width: 83%;
		margin: 0 auto;

		.range-text {
			padding: 12rpx 0;
		}
	}

	.field {
		border-bottom: 1px solid #ccc;
		margin-bottom: -10px;
	}

	.date-type-box {
		width: 170rpx;
		height: 49rpx;
		line-height: 49rpx;
		background: #f5f5f5;
		border: 1rpx solid #b8b8b8;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 16rpx;
		margin: 30rpx 0 0 30rpx;

		.date-text {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #000000;
		}

		.date-img {
			width: 26rpx;
			height: 26rpx;
			margin-top: 12rpx;
		}
	}

	.mon-box {
		height: 430rpx;
		width: 100%;
	}
</style>

效果图
在这里插入图片描述
在这里插入图片描述

lily1346891
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp日期时间选择插件支持更多选择方式日期范围日期时间范围
08-10
Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围）
Uniapp-小程序简单的时间选择组件-年月日时分
Bruce__taotao的博客
02-24 4147
uniapp小程序开发系列。本文实现一个简单时间选择控件。uniapp用个心仪时间控件真的麻烦。官方给得要么年月日，要么时分。产品只要年月日时分。这该怎么玩。旧项目没有引入ui框架，我也不想去引入，不然高低整一个vant 小程序版的。uniapp生态中，有个插件市场，找了一通，是有时间控件。但是引入也是麻烦。没必要。下文基于网友给的案例再稍微改了改。对了 这是vue2 的。以上就是今天要讲的内容，本文讨论了用uniapp 实现小程序时间选择组件 仅仅支持 年月日时分 的简单版本。
Vue/uniapp 实现自定义时间段选择器组件
最新发布
weixin_40621647的博客
08-07 242
在开发过程中，经常会遇到需要用户选择时间段的需求。本文将介绍如何使用 Vue.js 构建一个简单的时间选择器组件，该组件允许用户选择服务的开始时间和结束时间，并确保选择的时间段满足一定的业务逻辑要求。组件功能概述选择服务时间：用户可以从上午和下午两个时间段中选择服务的开始时间和结束时间。验证时间间隔：确保用户选择的服务时间...
微信小程序uniapp日历组件
08-10
微信小程序uniapp日历组件
uniapp、小程序自定义选择日、周、月、季、年的时间选择器组件
zh626678的博客
01-23 6052
自定义选择日、周、月、季、年的日期选择器组件
基于uni-app的 年-月-日 时 时间日期范围控件
wangweiruning的博客
06-03 1644
一个使用 uni-app 开发的日期时间选择器组件，它包含了一个遮罩层（pickerMask）和一个日期时间选择器弹窗（picker-box这个组件允许用户选择一个时间范围，包括年、月、日和小时。
uniapp 微信小程序 时间段选择组件
07-24
总之，`uniapp`微信小程序的时间段选择组件涉及到了`uni-app`的基础知识，如组件化开发、数据绑定、事件处理等，同时也涵盖了微信小程序的特定API和自定义样式设计。通过学习和实践，开发者可以构建出符合业务需求、...
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
在这个场景下，我们讨论的是uni-app在微信小程序中的一个关键功能——日历组件。 日历组件在很多应用中都是不可或缺的部分，例如在线预订、行程规划等。在uni-app中，开发一个具备自定义文案和上下滑动选择日期功能...
微信小程序开发纸质翻页效果源码-小程序翻页效果 uniapp实现
10-23
本源码是基于微信小程序和uniapp框架实现的翻书特效，它允许用户在浏览内容时感受到如同翻阅真实书籍一样的动态效果。 微信小程序是一种轻量级的应用开发平台，由腾讯推出，它提供了丰富的API接口和组件，让开发者...
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp 自定义时间选择组件
xiyunmengyuan的博客
02-25 7044
1.自定义时间组件的效果 2.组件的实现代码 组件文件名timeChose.vue 具体代码 <template> <view> <uni-popup ref="popcash" type="bottom" @change="popChange"> <view class="pop_phone" style="height:550upx ...
uniapp 封装时间选择器组件
lwx931449660的博客
01-06 4235
本来项目基于uView UI 2.0版本开发的，时间组件本来是基于 uView dateTimePicker 组件做的二次封装，但是dateTimePicker 组件没有选择秒的功能。 所以基于 uniapp 的 picker-view 组件封装，如下： HTML <u-popup :show="show" mode="bottom" :round="round"> <view class="time-content"> <view class="hea.
uni-app——picker组件的用法、时间、日期、地区选择器等
On the way
04-26 4385
1、uniapp–picker组件 <template> <view class="signUp"> <view class="signUp_dv1"> <u-form :model="form" ref="uForm" label-width="95px"> <u-form-item label="日期" :required="true"> <u-input v-model="form.applicantDat
uniapp 小程序 picker 日期时间段选择（精确到年月日时分+周几）
maoge_666的博客
07-19 5734
uniapp 小程序 picker 日期时间段选择（精确到年月日时分+周几）
uniapp picker组件实现时分秒功能 并初始化当前时间
qq_51705474的博客
08-03 1567
Change事件，让功能完善（有一点很奇怪，传入的timeRangeArray里的值都是字符串，可是查看e.target.value却是数字类型，这里做了转换）给picker组件的value传入 expectConsTime.split(':') 对应的数组，即可初始化时间。组件mode改为multiSelector多列，range为自己创建范围数据 timeRangeArray。此时功能已经完成，若想要初始时为当前的时间，可根据当前的时间戳转换为。
uniapp - 详细实现日期时间、范围选择器组件，点击底部弹出日期、时间、某个范围的选择器弹框（日期选择组件 单日/日期范围，uniapp自定义选择日、周、月、季、年的时间选择器详细示例源代码）
热门推荐
王佳斌
05-10 1万+
uniapp，微信小程序，h5网页网站，安卓苹果app，日期时间选择器，日历两个范围选择，日期选择器，时间选择器，年月日选择，小时分钟选择，uniapp日期时间及范围选择器，uniapp时间选择器_uniapp时间范围选择器，uniapp、小程序自定义选择日、周、月、季、年的时间选择器，uniapp的picker日期选择器使用及获取当天日期(时间)，uniapp开发微信小程序之时间选择器，uniapp中picker-view 封装时,分,秒选择组件，日期选择器picker(uni-app)，uniapp的
Uniapp小程序时间选择组件
zahuilg10的博客
08-08 2432
连接地址：https://ext.dcloud.net.cn/plugin?id=2453 使用说明（目前版本为全页面，需要自己搭配弹窗插件使用） 组件日期目前是当前日期后7天，后续可更新为自定义周期，也可以自己修改 名称 变量 类型 使用说明 取消按钮 @showClose String 取消按钮回调方法设置 确定按钮 @showTime String 确定按钮回调方法设置 日期选择 @checkDate String 日期选择后回调方法设置 时间定义 :date Objec
uniapp 【专题详解 -- 时间】云数据库时间类型设计，时间生成、时间格式化渲染（uni-dateformat 组件的使用）
朝阳39的博客
01-05 859
推荐使用时间戳 timestamp。
uniapp 小程序H5实现选择时间段组件
神夜空间
04-08 1489
<style lang="scss" scoped> .flex{ display: flex; align-items: center;} .center{ display: flex; align-items: center; justify-content: center;} .between{ display: flex; align-items:center; justify-content: space-between;} .syui-anim{ -webkit-ani...
uniapp小程序开发组件
08-22
在uniapp小程序开发中，组件是构成页面的基本元素，可以用来实现页面的各种功能和交互。组件可以分为页面组件和子组件两种类型。页面组件通常用于展示页面的主要内容，而子组件则可以在页面组件中被调用和复用。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值