<template>
<view>
<view class="uni-padding-wrap">
<view class="uni-title" @tap="dateClick">
日期:{{dateObj.nian}}年{{dateObj.yue}}月{{dateObj.ri}}日
</view>
</view>
<uni-popup class="popup-layout" ref="popup_ref"
type="bottom" :maskClick=false>
<view class="popup-opera-layout">
<view class="popup-opera-left" @tap="datePickerCancel">
取消
</view>
<view class="popup-opera-center">
选择日期
</view>
<view class="popup-opera-right" @tap="datePickerConfirm">
确定
</view>
</view>
<picker-view class="popup-view-layout" :value="defaultValue"
:indicator-style="indicatorStyle"
@change="datePickerChange">
<picker-view-column>
<view class="popup-view-item" v-for="(item,index) in datePickerObj.yearArr"
:key="index">{{item}}年
</view>
</picker-view-column>
<picker-view-column>
<view class="popup-view-item" v-for="(item,index) in datePickerObj.monthArr"
:key="index">{{item}}月
</view>
</picker-view-column>
<picker-view-column>
<view class="popup-view-item" v-for="(item,index) in datePickerObj.dayArr"
:key="index">{{item}}日
</view>
</picker-view-column>
</picker-view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
var curDate = new Date()
var datePickerObj = {
yearArr: [],
monthArr: [],
dayArr: [],
curYear:curDate.getFullYear(),
curMonth: curDate.getMonth() + 1,
curDay: curDate.getDate()
}
for (let i = 2020; i <= curDate.getFullYear(); i++) {
datePickerObj.yearArr.push(i)
}
for (let i = 1; i <= 12; i++) {
datePickerObj.monthArr.push(i)
}
for (let i = 1; i <= 31; i++) {
datePickerObj.dayArr.push(i)
}
return {
datePickerObj,
defaultValue: [ datePickerObj.yearArr[ datePickerObj.yearArr.length-1],
datePickerObj.curMonth - 1, datePickerObj.curDay - 1],
indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync()
.screenWidth / (750 / 100))}px;`,
dateObj:{
nian: '',
yue: '',
ri: ''
}
}
},
methods: {
datePickerChange(e) {
var that=this;
let cMonth;
let cYear;
console.log(e);
let val = e.detail.value;
cYear = that.datePickerObj.yearArr[val[0]];
cMonth = that.datePickerObj.monthArr[val[1]];
that.datePickerObj.curDay = that.datePickerObj.dayArr[val[2]];
that.datePickerObj.curMonth = cMonth;
that.datePickerObj.curYear = cYear;
that.datePickerObj.dayArr = [];
if (cMonth || y) {
if (cMonth == 1 || cMonth == 3 || cMonth == 5 || cMonth == 7
|| cMonth == 8 || cMonth == 10 || cMonth == 12) {
for (let i = 1; i <= 31; i++) {
that.datePickerObj.dayArr.push(i)
}
} else if (cMonth == 4 || cMonth == 6 || cMonth == 11 || cMonth == 9) {
for (let i = 1; i <= 30; i++) {
that.datePickerObj.dayArr.push(i)
}
} else if (cMonth == 2) {
if (that.datePickerObj.curYear % 4 == 0
&& (that.datePickerObj.curYear % 100 != 0
|| that.datePickerObj.curYear % 400 == 0)) {
for (let i = 1; i <= 29; i++) {
that.datePickerObj.dayArr.push(i)
}
} else {
for (let i = 1; i <= 28; i++) {
that.datePickerObj.dayArr.push(i)
}
}
}
}
},
dateClick() {
this.$refs.popup_ref.open();
},
datePickerCancel() {
this.$refs.popup_ref.close();
},
datePickerConfirm() {
this.dateObj.nian = this.datePickerObj.curYear;
this.dateObj.yue = this.datePickerObj.curMonth;
this.dateObj.ri = this.datePickerObj.curDay;
this.$refs.popup_ref.close();
}
}
}
</script>
<style scoped lang="scss">
.popup-layout {
position: absolute;
bottom: 0;
width: 100vw;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: #FFFFFF;
}
.popup-opera-layout {
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 20px 15px;
border-bottom: black solid 1px;
}
.popup-opera-left {
color: white;
font-size: 13px;
text-align: center;
border-radius: 8px;
padding: 5px 20px;
background-color: #BEBEBE;
}
.popup-opera-center {
color: #333333;
font-size: 17px;
text-align: center;
border-radius: 8px;
}
.popup-opera-right {
color: #FFFFFF;
font-size: 13px;
text-align: center;
border-radius: 8px;
padding: 5px 20px;
background-color: #1cb419;
}
.popup-view-layout {
background-color: #EEEEEE;
width: 100%;
height: 150px;
}
.popup-view-item {
line-height: 50px;
text-align: center;
font-size: 17px;
text-align: center;
}
</style>
uniapp日期选择器(年 月 日)
于 2023-04-30 11:13:46 首次发布