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

一、获取日期（基础）

	
		
			{{date}}
		
	



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



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

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

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

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

	
			
			
				
					预定日期
				
				
					
						{{DateValue}}
					
				
			

			
				
					预定时间
				
				
					
						{{TimeValue}}
					
				
			
	



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

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




	/* ## 日期 ## */

	.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;
	}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/c5ceb05faa.html