uniapp实现日期/时间选择效果

摘自

picker的官方说明：https://uniapp.dcloud.io/component/picker?id=picker

一、日期

在picker中加fields="month"就只能选择年月了，加fields="year"则只能选择年

<template>
	<view>
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view>{{ date }}</view>
		</picker>
	</view>
</template>
<script>
function getDate(type) {
	const date = new Date();
 
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
 
	if (type === 'start') {
		year = year - 10;
	} else if (type === 'end') {
		year = year + 10;
	}
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;
 
	return `${year}-${month}-${day}`;
}
export default {
	data() {
		return {
			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end'),
		};
	},
	methods: {
		bindDateChange: function(e) {
			this.date = e.detail.value;
		}
	}
};
</script>

<style>

</style>

二、时间

<template>
	<view>
		<picker mode="time" @change="bindTimeChange">
			<view>{{ time }}</view>
		</picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			time: '12:01',
		};
	},
	methods: {
		bindTimeChange: function(e) {
			this.time = e.detail.value;
		}
	}
};
</script>

<style>

</style>