uniapp选择年月日demo效果（整理）

微信小程序中Picker组件选择年月日的配置方法

知秋~

已于 2023-02-16 17:23:45 修改

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： uniapp uniapp选择年月日年月日 picker

于 2023-01-07 15:53:30 首次发布

原文链接：https://blog.csdn.net/m0_61672533/article/details/127693169

文章提供了一个微信小程序中使用Picker组件来选择年、月、日的代码示例。通过设置`fields`属性，可以控制用户选择的精度，如`month`只选年月，`year`只选年。默认情况下，Picker显示年月日。在`bindDateChange`事件中处理选定值。要显示每一天，需移除`fields`的`month`设置，并相应调整`getDate`函数的返回值。

在这里插入图片描述
日期
在picker中加fields="month"就只能选择年月了，加fields="year"则只能选择年，默认是年月日格式

直接上代码，可以直接粘贴复制复用

<picker 
    mode="date" 
    :value="date" 
    fields="month" 
    :start="startDate" 
    :end="endDate"     
    @change="bindDateChange">
		<view>{{ date }}</view>
</picker>

<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;
	return `${year}-${month}`;
}
export default {
	data() {
		return {
			//date：'请选择',
			//默认当前日
			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end'),
		};
	},
	methods: {
		bindDateChange(e) {
			//e.detail.value 获取的年月日 2023-01-07
			this.date = e.detail.value.substr(0, 7);
			this.time = this.date;
		},
	}
};
</script>