van-datetime-picker只显示年份（改造后）

项目搭建用的vant组件库，但是vant官网上DatetimePicker时间组件van-datetime-picker没有单独显示年份的组件，下面给大家介绍一下改造后的代码！

template代码

<van-cell-group>
  <van-field style="text-align:center" readonly clickable placeholder="请选择年份" :value="dateValue" @click="showPicker = true" />
  <van-popup v-model="showPicker" round position="bottom">
  <van-picker title="请选择年份" show-toolbar :columns="columns" :default-index="select" @confirm="yearConfirm" @cancel="cancel" />
  </van-popup>
</van-cell-group>

script代码

data() {
  return {
  dateValue: '',
  showPicker: false,
  select: null,
  columns: []
  }
},
created() {
  this.getCurrentYear()
  this.getYearData()
},
methods: {
  formatDates(date) {
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
  },
  //获取默认最新时间
  getCurrentYear() {
    var nowTime = new Date()
    let year = nowTime.getFullYear()
    let month = nowTime.getMonth()
    let day = nowTime.getDate()
    var dateValue = ''
    dateValue = this.formatDates(new Date(year, month, day))
    this.dateValue = dateValue.slice(0, 4)
    this.signs(this.dateValue)
  },
  //年选择器
  yearConfirm(value) {
    this.dateValue = value.toString()
    this.signs(this.dateValue)
    this.showPicker = false
  },
  //年数据
  getYearData() {
    var nowTime = new Date(this.dateValue)
    let year = nowTime.getFullYear()
    let month = nowTime.getMonth()
    let day = nowTime.getDate()
    for (let i = 1901; i < 2099; i++) {
    this.columns.push(i)
    }

    var years = this.formatDates(new Date(year, month, day))
    var Year = years.slice(0, 4)

    this.select = this.columns.indexOf(Number(Year))
  },
  //点击取消按钮时触发的事件
  cancel() {
    this.showPicker = false
  }
}

el-table合并行的通用方法（附js代码）

vue前端分页功能实现代码（附js代码）

el-table利用:row-style="rowClass"设置指定行变色

一款免费开源效果酷炫​的 Vue / React 大屏数据展示组件库——DataV 

vue项目动态设置background背景色，解决颜色被替换问题

标签： DatetimePicker, van-datetime-picker, vant时间组件

上面是“van-datetime-picker只显示年份（改造后）”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3977.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！