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;
}