改造vant日期选择
支持全年全月选择
<template>
<div class="time">
<div @click="selectDate" class="dateText">
<i class="iconfont"></i>
<span> {{ thisDate }}</span>
</div>
<van-popup
v-model="modelVisible"
position="bottom"
:style="{ height: '50%' }"
@click-overlay="selectDate"
>
<van-picker
@picker-toolbar-height="20"
:show-toolbar="true"
ref="van_picker"
:columns="columns"
@confirm="onConfirm"
@cancel="selectDate"
@change="changeDate"
>
<template #columns-top>
<div class="time-line">
<div class="y"></div>
<div class="m" @click="allYear">
<span class="sl">全年</span>
</div>
<div class="d" @click="allMonth">
<span class="sl">全月</span>
</div>
</div>
</template>
</van-picker>
</van-popup>
</div>
</template>
<script>
import moment from "moment";
export default {
props: {
wholeYear: {
default: true,
type: Boolean
}
},
data() {
return {
thisDate: moment(new Date()).format("YYYY-MM-DD"),
modelVisible: false,
columns: null,
year: null,
month: null,
day: null,
currentTime: null
};
},
computed: {
yearPickerData() {
let minYear = moment(new Date()).format("YYYY") - 5;
let yearArr = [];
for (let i = 0; i < 10; i++) {
yearArr.push((minYear + i).toString());
}
return yearArr;
},
monthPickerData() {
let month = Array.from({ length: 12 }, (v, k) => (+k + 1).toString());
for (let i = 0; i < month.length; i++) {
if (+month[i] < 10) {
month[i] = "0" + month[i];
}
}
if (this.wholeYear) {
month.unshift("全年");
return month;
} else {
return month;
}
},
dayPickerData() {
let day = Array.from(
{ length: this.getDuration(this.year, this.month) },
(v, k) => (+k + 1).toString()
);
for (let i = 0; i < day.length; i++) {
if (+day[i] < 10) {
day[i] = "0" + day[i];
}
}
if (this.wholeYear) {
day.unshift("全月");
return day;
} else {
return day;
}
}
},
watch: {
month(nv, ov) {
// console.log(nv)
this.init();
}
},
methods: {
init() {
let that = this;
let year = that.yearPickerData;
let month = that.monthPickerData;
let day = that.dayPickerData;
let yearIndex, monthIndex, dayIndex;
let index = sessionStorage.getItem("selectArray") || "";
index = index.split(",");
if (index.length !== 0) {
yearIndex = index[0];
monthIndex = index[1];
dayIndex = index[2];
that.columns = [
{
values: year,
className: "column1",
defaultIndex: +yearIndex
},
{
values: month,
className: "column2",
defaultIndex: +monthIndex
},
{
values: day,
className: "column3",
defaultIndex: +dayIndex
}
];
that.$nextTick(() => {
that.$refs.van_picker.setColumnIndex([2], +dayIndex);
});
} else {
yearIndex = that.yearPickerData.indexOf(
moment(new Date()).format("YYYY")
);
monthIndex = that.monthPickerData.indexOf(
moment(new Date()).format("MM")
);
dayIndex = that.dayPickerData.indexOf(moment(new Date()).format("DD"));
that.columns = [
{
values: year,
className: "column1",
defaultIndex: yearIndex
},
{
values: month,
className: "column2",
defaultIndex: monthIndex
},
{
values: day,
className: "column3",
defaultIndex: dayIndex
}
];
that.$nextTick(() => {
// 获取当前的索引
// console.log(that.$refs.van_picker.getColumnIndex([2]))
that.$refs.van_picker.setColumnIndex([2], dayIndex);
// this.$refs.van_picker.$children.children.defaultIndex = 20
});
}
},
// 弹出日期选择
selectDate() {
this.modelVisible = !this.modelVisible;
},
// 选项改变时候的值
changeDate(picker, value, index) {
// console.log(`当前值：${value}, 当前索引：${index}`)
let result = value.toString().split(",");
// console.log('当前被改变的日期数组', result)
this.year = result[0];
this.month = result[1];
this.day = result[2];
// 取序号
let yearIndex = this.columns[0].values.findIndex(item => {
return item === result[0];
});
let monthIndex = this.columns[1].values.findIndex(item => {
return item === result[1];
});
let dayIndex = this.columns[2].values.findIndex(item => {
return item === result[2];
});
sessionStorage.setItem("selectArray", [yearIndex, monthIndex, dayIndex]);
this.currentTime = value.join("");
},
// 选取的日期
onConfirm(values, index) {
// console.log('当前选择的日期数组', values)
sessionStorage.setItem("selectArray", index);
this.selectDate();
this.thisDate = values.join("-");
if (this.thisDate.indexOf("-全年-全月")) {
this.thisDate = this.thisDate.split("-全年-全月")[0];
}
if (this.thisDate.indexOf("-全月")) {
this.thisDate = this.thisDate.split("-全月")[0];
}
this.columns[0].defaultIndex = index[0];
this.columns[1].defaultIndex = index[1];
this.columns[2].defaultIndex = index[2];
// 给父组件传递选中的值
if (values[1] !== "全年") {
this.$emit("datePickerData", values.join(""));
} else {
this.$emit("datePickerData", values[0]);
}
},
allYear() {
this.$nextTick(() => {
this.$refs.van_picker.setColumnIndex([1], 0);
this.$refs.van_picker.setColumnIndex([2], 0);
});
},
allMonth() {
this.$refs.van_picker.setColumnIndex([2], 0);
},
getDuration(year, month) {
let d = new Date(year, month, 0);
return d.getDate();
}
},
mounted() {
if (!moment) {
console.log("找不到moment对象，请检查是否引用或者安装依赖包");
return;
}
let year = this.yearPickerData;
let yearIndex = this.yearPickerData.indexOf(this.thisDate.slice(0, 4));
this.year = this.thisDate.slice(0, 4);
let month = this.monthPickerData;
let monthIndex = this.monthPickerData.indexOf(this.thisDate.slice(5, 7));
let day = this.dayPickerData;
let dayIndex = this.dayPickerData.indexOf(this.thisDate.slice(8, 10));
this.columns = [
{
values: year,
className: "column1",
defaultIndex: yearIndex
},
{
values: month,
className: "column2",
defaultIndex: monthIndex
},
{
values: day,
className: "column3",
defaultIndex: dayIndex
}
];
}
};
</script>
<style lang="stylus" scoped>
.time >>> .van-picker-column__item
height 34px
.dateText
color #0BB78E
font-size 14px
.iconfont
margin-left .2rem
margin-right .1rem
.iconfont, span
vertical-align middle
.time-line
display flex
text-align center
font-size 16px
padding-top .15rem
padding-bottom .15rem
.y
flex 1
.m
flex 1
.sl
padding .15rem .35rem
background #f5f5f5
border-radius 5px
.d
flex 1
.sl
padding .15rem .35rem
background #f5f5f5
border-radius 5px
</style>
页面调用
<date-picker @datePickerData="datePickerData"></date-picker>
datePickerData(date) { if (date.indexOf('全月')) { date = date.split('全月')[0] } console.log(date) }
