当前位置:   article > 正文

element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间_el-date-picker的 type="year"如何只显示当前年以下的年份

el-date-picker的 type="year"如何只显示当前年以下的年份

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

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

 HTML部分
  1. //年份选择
  2. <el-date-picker :clearable="false" v-model="searchForm.year" type="year" format="yyyy" @change="handleChange" value-format="yyyy" placeholder="选择年">
  3. </el-date-picker>
  4. //日期范围选择
  5. <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">
  6. </el-date-picker>
JS部分
  1. data() {
  2. let disabledDate = (time) => {
  3. const year = this.searchForm.year // 获取当前年份
  4. const oneYear = Number(year) + 1 // 获取下一年
  5. const lastYear = Number(year) - 1 // 获取上一年
  6. const timeYear = new Date(oneYear + '/1/1').getTime() // 将明年的日期转换成时间戳
  7. const timeYearlast = new Date(lastYear + '/12/31').getTime() // 将去年的日期转换成时间戳
  8. return time.getTime() >= timeYear || time.getTime() <= timeYearlast
  9. };
  10. return {
  11. searchForm: {
  12. year: "",
  13. startDate: "",
  14. endDate: "",
  15. currentPage: 1,
  16. pageSize: 20,
  17. },
  18. longTime: [],
  19. pickerOptions: {
  20. disabledDate,
  21. },
  22. dateDefaultShow: '',//日期选择器的日期默到选择的年份
  23. };
  24. },
  25. methods:{
  26. handleChange() {
  27. this.longTime = []
  28. const mon = new Date().getMonth() + 1 // 获取当前月份份
  29. const day = new Date().getDate() // 获取当前日期
  30. this.dateDefaultShow = this.searchForm.year + '-' + mon + '-' + day //日期选择器定位当一年前的今日
  31. },
  32. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/97560
推荐阅读
相关标签
  

闽ICP备14008679号