uniapp自定义时间选择器_uniapp自定义选择时间

uniapp的组件进行的重新编写，可直接使用。

功能主要效果为，不可以选择当前日期之前的日期

html部分代码

<view class="content">
		<button @click="getuser"> 获取</button>
		  <view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
		<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
		</picker-view>
	</view> 

js部分代码，其中可以在这基础上去更改限制的范围，只需要更改对应年份或月份的for循环中 i 的范围即可。

export default {
			 data() {
				  const date = new Date()
					 const years = []
					 const year = date.getFullYear()
					 const months = []
					 const month = date.getMonth() + 1
					 const days = []
					 const day = date.getDate()
					 var lastDate = new Date(year, month, 0).getDate();//每个月最后一天
					 for (let i = year; i <= year+4; i++) {
						 years.push(i)
					 }
					 for (let i = month; i <= 12; i++) {
						 months.push(i)
					 }
					 for (let i = day; i <= lastDate; i++) {
						 days.push(i)
					 }
			 	return {
			 		title: 'picker-view',
					visible: false,
					indicatorStyle: `height: 50px;`,
			 		years,
			 		year,
			 		months,
			 		month,
			 		days,
			 		day,
					value: [0,0,0],
			 	}
			 },
			        methods: {
						getuser(){
							this.visible=true
						},
			            bindChange: function (e) {
			                const val = e.detail.value
							const year=new Date().getFullYear()
							const month=new Date().getMonth()+1
							const day = new Date().getDate()
							// 非当前年
							if(this.years[val[0]]>year){
								this.months=[]
								for (let i = 1; i <= 12; i++) {
								    this.months.push(i)
								}
								var lastDate = new Date(this.years[val[0]], this.months[val[1]], 0).getDate();
								this.days=[]
								for (let i =1; i <= lastDate; i++) {
									this.days.push(i)
								}
								this.year = this.years[val[0]]
								this.month = this.months[val[1]]
								this.day = this.days[val[2]]
							}else if(this.years[val[0]]==year)
							//当前年
							 {
								 // 月份限制
								this.months=[]
								for (let i =month; i <= 12; i++) {
								    this.months.push(i)
								}
								//获取月份的最后一天
								var lastDate = new Date(year, this.months[val[1]], 0).getDate();
								//当前月的剩余日期
								if(this.months[val[1]]== month){
									this.days=[]
									for (let i =day; i <= lastDate; i++) {
									    this.days.push(i)
									}
								}else if(this.months[val[1]]>month)
								//非当前月的剩余日期
								{
									this.days=[]
									for (let i =1; i <= lastDate; i++) {
										this.days.push(i)
									}
								}
								this.year = year
								this.month = this.months[val[1]]
								this.day = this.days[val[2]]
							}
			            }
			        }
	}

css部分

.picker-view {
            width: 750rpx;
            height: 600rpx;
            margin-top: 20rpx;
        }
        .item {
            line-height: 100rpx;
            text-align: center;
        }