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

这篇具有很好参考价值的文章主要介绍了【uni-app】通过uni-app基础组件picker实现选择日期、时间的功能示例（完整代码+图文）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、获取日期（基础）

uniapp日历可选日期,27.【uni-app】,uni-app,javascript,前端

<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>

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

uniapp日历可选日期,27.【uni-app】,uni-app,javascript,前端

文章来源地址https://www.toymoban.com/news/detail-516463.html

<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>

到了这里，关于【uni-app】通过uni-app基础组件picker实现选择日期、时间的功能示例（完整代码+图文）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！