我要评论
如图，时间选择，倒序排列。时间格式 202312，可以根据自己的格式改一下数据处理方式
组件：
<template>
<div class="number">
<van-cell-group>
<van-field class="date-select" readonly clickable v-model="date" placeholder="选择时间"
@click="showpicker = true" />
<van-popup v-model="showpicker" round position="bottom">
<van-picker class="picker" show-toolbar :columns="columns" @change="onchange"
@cancel="showpicker = false" @confirm="onconfirm">
</van-picker>
</van-popup>
</van-cell-group>
</div>
</template>
<script>
export default {
name: 'dateselect',
props: {
default: {
type: string,
default: ''
},
minyear: {
type: string,
default: '2014'
}
},
data() {
return {
date: this.default,
inittime: this.minyear,
columns: [],
checktime: {},
showpicker: false
}
},
created() {
this.inittimefn()
},
methods: {
inittimefn() {
const inittime = this.inittime
const defaultyear = this.default.substring(0, 4)
const defaultmonth = this.default.substring(4)
// for (let i = 0; i <= number(new date().getfullyear()) - inittime; i++) {
for (let i = number(new date().getfullyear()); i >= inittime; i--) {
this.checktime[`${i}年`] = [
'01月',
'02月',
'03月',
'04月',
'05月',
'06月',
'07月',
'08月',
'09月',
'10月',
'11月',
'12月'
]
}
const yearindex = object.keys(this.checktime).findindex((item) =>
item.includes(defaultyear)
)
this.columns = [
{
values: object.keys(this.checktime),
defaultindex: yearindex //number(new date().getfullyear()) - inittime
},
{
values: this.checktime[`${new date().getfullyear()}年`],
defaultindex: number(defaultmonth) //new date().getmonth()
}
]
},
oncancel() {
this.showpicker = false
},
onconfirm(value) {
this.showpicker = false
let year = value && value[0].split('年')[0]
let month = value && value[1].split('月')[0]
this.date = this.userlistform = `${year}${month}`
this.$emit('getdate', this.userlistform)
},
onchange(picker, values) {
picker.setcolumnvalues(1, this.checktime[values[0]])
}
}
}
</script>
<style lang="less">
.number {
width: 2.4rem;
.picker {
font-size: 0.32rem;
}
.van-cell {
padding: 0;
}
.date-select {
border: 1px solid rgb(74, 119, 246);
padding-left: 0.1rem;
border-radius: 0.1rem;
font-size: 0.32rem;
line-height: 1.5;
}
}
</style>使用：
<dateselect @getdate="getdate" default="202312" />
getdate(date) {
this.date = date //自己组件使用的时间变量
this.getlist()
},到此这篇关于vant倒序年月日期组件封装的文章就介绍到这了,更多相关vant倒序年月日期组件封装内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论