【uni-app】picker日期选择器和时间选择器的用法

最新推荐文章于 2025-02-21 11:36:44 发布

cdgogo

最新推荐文章于 2025-02-21 11:36:44 发布

阅读量1.4w

点赞数 3

分类专栏： uni-app

本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/119615911

版权

uni-app 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了uni-app中picker组件的使用方法，包括日期选择器和时间选择器的配置与事件处理，帮助开发者实现用户界面中的日期与时间选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
点击后：

<view class="item">
	<view class="tit">选择时间</view>
	<picker class="picker date" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
		<view>{{ date }}</view>
	</picker>
	<picker class="picker" mode="time" :value="timeStart" start="09:01" end="21:01" @change="bindTimeStart">
		<view class="uni-input">{{ timeStart }}</view>
	</picker>
	-
	<picker class="picker" mode="time" :value="timeEnd" start="09:01" end="21:01" @change="bindTimeEnd">
		<view class="uni-input">{{ timeEnd }}</view>
	</picker>
</view>

data() {
	const currentDate = this.getDate({
		format: true
	});
	return {
		date: currentDate,
		timeStart: '14:00',
		timeEnd: '16:00'
	};
},
computed: {
	startDate() {
		return this.getDate('start');
	},
	endDate() {
		return this.getDate('end');
	}
},
methods: {
	// 选择时间 日期
	bindDateChange: function(e) {
		this.date = e.target.value;
	},
	getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	},
	// 开始时间
	bindTimeStart:function(e){
		this.timeStart = e.target.value;
	},
	// 结束时间
	bindTimeEnd:function(e){
		this.timeEnd = e.target.value;
	},
}

picker选择器的用法