element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

选中某个年份,让日期选择器只能选择该年份内的时间，并且默认显示该年份的时间（由于日期选择器默认显示为当前时间，所以需要跳转到选择的年份）

elementui年度选择器,elementui,vue

例：年份选择了2022年，那么日期选择也相应显示到2022年，对月日没有要求，月日默认显示为当前日期的月日，只是年份变动。

elementui年度选择器,elementui,vue 文章来源地址https://www.toymoban.com/news/detail-637209.html

HTML部分

//年份选择
<el-date-picker :clearable="false" v-model="searchForm.year" type="year" format="yyyy" @change="handleChange" value-format="yyyy" placeholder="选择年">
</el-date-picker>

//日期范围选择
<el-date-picker v-model="longTime" type="daterange" range-separator="至" start-placeholder="开始日期" :picker-options="pickerOptions" :default-value="dateDefaultShow" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
</el-date-picker>

JS部分

data() {
    let disabledDate = (time) => {
      const year = this.searchForm.year // 获取当前年份
      const oneYear = Number(year) + 1 // 获取下一年
      const lastYear = Number(year) - 1 // 获取上一年
      const timeYear = new Date(oneYear + '/1/1').getTime() // 将明年的日期转换成时间戳
      const timeYearlast = new Date(lastYear + '/12/31').getTime() // 将去年的日期转换成时间戳
      return time.getTime() >= timeYear || time.getTime() <= timeYearlast
    };
    return {
      searchForm: {
        year: "",
        startDate: "",
        endDate: "", 
        currentPage: 1,
        pageSize: 20,
      },
      longTime: [],
      pickerOptions: {
        disabledDate,
      },
      dateDefaultShow: '',//日期选择器的日期默到选择的年份
    };
  },
methods:{
    handleChange() {
      this.longTime = []
      const mon = new Date().getMonth() + 1 // 获取当前月份份
      const day = new Date().getDate() // 获取当前日期
      this.dateDefaultShow = this.searchForm.year + '-' + mon + '-' + day //日期选择器定位当一年前的今日
    },
}

到了这里，关于element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！