<template>
<view class="date-picker">
<picker-view class="date-picker-box" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
<picker-view-column>
<view class="date-picker-item" v-for="(a, i) in years" :key="i">
<text :class="{ ac: a === year }">{{ a }}年</text>
</view>
</picker-view-column>
<picker-view-column>
<view class="date-picker-item" v-for="(a, i) in months" :key="i">
<text :class="{ ac: a === month }">{{ a }}月</text>
</view>
</picker-view-column>
<picker-view-column>
<view class="date-picker-item" v-for="(a, i) in days" :key="i">
<text :class="{ ac: a === day }">{{ a }}日</text>
</view>
</picker-view-column>
</picker-view>
<view class="d-r d-sb px-8">
<a-button class="m-3" sm text="重置" @click="clean" plain />
<a-button class="m-3" sm text="取消" @click="$emit('close')" plain />
<a-button class="m-3" sm text="确认" @click="submit" />
</view>
</view>
</template>
<script>
export default {
name: 'datePicker',
model: { event: 'change', prop: 'date' },
props: { date: String },
data() {
const s = new Date().getFullYear() - 10;
const now = this.date ? new Date(this.date) : new Date();
const years = [];
const months = [];
const days = [];
for (let i = s; i <= s + 20; i++) years.push(i);
for (let i = 1; i <= 12; i++) months.push(i);
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const value = [year - s, month - 1, day - 1];
const indicatorStyle = `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`;
return { years, months, days, year, month, day, value, indicatorStyle };
},
watch: {
month: {
handler(val) {
if (val < 8) {
if (val % 2 !== 0) {
this.days = [];
for (let i = 1; i <= 31; i++) this.days.push(i);
} else {
this.days = [];
for (let i = 1; i <= 30; i++) this.days.push(i);
}
}
if (val > 7) {
if (val % 2 === 0) {
this.days = [];
for (let i = 1; i <= 31; i++) this.days.push(i);
} else {
this.days = [];
for (let i = 1; i <= 30; i++) this.days.push(i);
}
}
if (val === 2) {
if (this.year % 4 === 0) {
this.days = [];
for (let i = 1; i <= 29; i++) this.days.push(i);
} else {
this.days = [];
for (let i = 1; i <= 28; i++) this.days.push(i);
}
}
},
deep: true,
immediate: true
},
year: {
handler(val) {
if (val % 4 === 0) {
if (this.month === 2) {
this.days = [];
for (let i = 1; i <= 29; i++) this.days.push(i);
}
} else {
if (this.month === 2) {
this.days = [];
for (let i = 1; i <= 28; i++) this.days.push(i);
}
}
}
},
deep: true,
immediate: true
},
methods: {
clean() {
this.$emit('change', '');
this.$emit('success', '');
},
submit() {
const date = this.year + '-' + (this.month > 9 ? this.month : '0' + this.month) + '-' + (this.day > 9 ? this.day : '0' + this.day);
this.$emit('change', date);
this.$emit('success', date);
},
bindChange({ detail }) {
const val = detail.value;
this.year = this.years[val[0]];
this.month = this.months[val[1]];
this.day = this.days[val[2]];
}
}
};
</script>
<style lang="scss">
.date-picker {
width: 600rpx;
height: 650rpx;
background-color: $bg-color;
padding-top: $spacing-lg;
&-box {
width: 600rpx;
height: 520rpx;
padding: 0 20rpx;
background-color: #fff;
}
&-item {
height: 100rpx;
justify-content: center;
align-items: center;
.ac {
color: red;
}
}
}
</style>
- 发布:2022-02-08 09:14
- 更新:2022-02-08 11:49
- 阅读:600
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.15
HBuilderX类型: 正式
HBuilderX版本号: 3.3.10
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: x10
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
运行上面的代码
运行上面的代码
预期结果:
正常显示
正常显示
实际结果:
错位
错位
bug描述:
3.3.9开始 picker-view 页面显示错位
3.3.5正常显示
z***@qq.com (作者)
ios 还是有问题
2022-03-08 13:36
DCloud_UNI_GSQ
回复 z***@qq.com: 哪个版本?截图看下
2022-03-08 14:49