【uni-app】通过uni-app基础组件picker实现选择日期、时间的功能示例（完整代码+图文）

敦厚的曹操

已于 2023-03-03 12:04:58 修改

阅读量5.5k

点赞数 1

分类专栏： 27.【uni-app】文章标签： uni-app javascript 前端

于 2023-03-03 11:16:20 首次发布

本文链接：https://blog.youkuaiyun.com/dxnn520/article/details/129316417

版权

27.【uni-app】专栏收录该内容

22 篇文章

订阅专栏

该文章展示了如何在Vue.js应用中使用picker组件来创建日期和时间选择功能。用户可以选择日期，然后更新显示的值，同样的过程也适用于时间选择。代码示例包括了基础的日期选择和改进的日期及时间选择。

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

一、获取日期（基础）

<template>
	<view class="container">
		<picker mode="date" @change="onDateChange" :value="date">
			<view class="date-picker">{{date}}</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '请选择日期'
			}
		},
		methods: {
			onDateChange: function(e) {
				this.date = e.detail.value;
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.date-picker {
		line-height: 80rpx;
		border: 1px solid #ccc;
		padding: 10rpx;
		text-align: center;
		background-color: #fff;
	}
</style>

二、获取日期和时间（改进）

<template>
	<view>
			<!--日期选择-->
			<view class="SelectDate">
				<view class="DateLabel">
					预定日期
				</view>
				<view class="DateText">
					<picker mode="date" @change="onDateChange" :value="DateValue">
						<view class="date-picker">{{DateValue}}</view>
					</picker>
				</view>
			</view>

			<view class="SelectTime">
				<view class="TimeLabel">
					预定时间
				</view>
				<view class="TimeText">
					<picker mode="time" @change="onTimeChange" :value="TimeValue">
						<view class="Time-picker">{{TimeValue}}</view>
					</picker>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DateValue: "点击选择日期",
				TimeValue: "点击选择时间",
			}
		},
		methods: {
			
			onDateChange: function(e) {
				this.DateValue = e.detail.value;
			},

			onTimeChange: function(e) {
				this.TimeValue = e.detail.value;
			},
			}
	}
</script>

<style scoped>

	/* ## 日期 ## */

	.SelectDate {
		height: 40px;
		wdith: 100%;
		display: flex;
		flex-direction: grow;
		/* background-color: red; */
	}

	.DateLabel {
		width: 0;
		flex-grow: 3;
		background-color: #eaeaea;
		line-height: 40px;
		text-align: left;
		padding-left: 40px;
		border: 1px solid #f3f3f3;
	}

	.DateText {
		width: 0;
		flex-grow: 7;
	}

	.date-picker {
		background-color: aquamarine;
		height: 40px;
		line-height: 25px;
		width: 100%;

		border: 1px solid #f3f3f3;
		padding: 10rpx;
		text-align: center;
		background-color: #fff;
		color: #8f8f8f;
	}

	/* ## 时间 ## */

	.SelectTime {
		height: 40px;
		wdith: 100%;
		margin-top: 10px;
		display: flex;
		flex-direction: grow;
		/* background-color: red; */
	}

	.TimeLabel {
		width: 0;
		flex-grow: 3;
		background-color: #eaeaea;
		line-height: 40px;
		text-align: left;
		padding-left: 40px;
		border: 1px solid #f3f3f3;
	}

	.TimeText {
		width: 0;
		flex-grow: 7;
	}

	.Time-picker {
		background-color: aquamarine;
		height: 40px;
		line-height: 25px;
		width: 100%;
		border: 1px solid #f3f3f3;
		padding: 10rpx;
		text-align: center;
		background-color: #fff;
		color: #8f8f8f;
	}
</style>