uniapp选择年月日demo效果(整理)

在这里插入图片描述
日期
在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>

如果想要也显示每天的话把标签里的 fields=“month” 删除即可,然后再在 getDate 里改变最后返回值即可 return ${year}-${month}-${day}

猜你喜欢

转载自blog.csdn.net/qq_38881495/article/details/128591716
今日推荐