uniapp中picker只选择月和日demo效果(整理)

在这里插入图片描述

<template>
	<view style="margin-top: 200rpx;">
		<!-- mode="multiSelector" 多列选择器 -->
		<view>
			<picker :range="years" :value="echoVal" @change="yearChange" mode="multiSelector">
				{
   
   { years[0][yearsIndex1] }}-{
   
   { years[1][yearsIndex2] }}
			</picker>
		</view>
	</view>
	</view>

</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
      
				years: [],
				yearsIndex1: 0,
				yearsIndex2: 0,
				echoVal: [], //当前日期回显
			}
		},
		// 页面加载
		onLoad(e) {
      
      
			var date = new Date();
			var year = date.getFullYear(); //获取完整的年份(4位)
			var month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			var nowDay = date.getDate(); //获取当前日(1-31)

			var d = new Date(year, month, 0);
			var day = d.getDate(); //获取一个月多少天

			console.log(month, date.getDate());
			this.yearsIndex1 = month - 1;
			this.yearsIndex2 = nowDay - 1;

			var list = [];
			for (var i = 0; i < day; i++) {
      
      
				var aa = i + 1;
				if (aa < 9) {
      
      
					aa = '0' + aa
				} else {
      
      
					aa = "" + aa
				}
				list.push(aa)
			}

			var arr = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

			this.years.push(arr);
			this.years.push(list);

			this.echoVal.push(month - 1);
			this.echoVal.push(nowDay - 1);
		},
		methods: {
      
      
			yearChange: function(e) {
      
      
				console.log(e)
				//获得对象的 detail的 value
				//通过数组的下标改变显示在页面的值
				this.yearsIndex1 = e.detail.value[0];
				this.yearsIndex2 = e.detail.value[1];
			}
		}
	}
</script>

<style>

</style>

猜你喜欢

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