使用elment+moment写年时间段选择

最新推荐文章于 2024-07-02 13:08:24 发布

PXYC_J

最新推荐文章于 2024-07-02 13:08:24 发布

阅读量358

点赞数

分类专栏： js vue3 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_39536826/article/details/129164347

版权

vue3 同时被 2 个专栏收录

12 篇文章

订阅专栏

11 篇文章

订阅专栏

该文章展示了如何在Vue.js应用中使用ElementUI的日期选择器组件限制用户只能选择不超过当前年的年份。通过`disabled-date`属性和自定义函数，确保开始和结束日期都在允许范围内，并在开始日期改变时动态调整结束日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：选择年的时间段（不能选择当前年之后的年份）
先看实现效果如
在这里插入图片描述

1、html结构代码

<el-form-item label="投产日期：">
 <el-date-picker
    v-model="form.tcrqStart"
    type="year"
    :disabled-date="pickerOptions" 
    @change="yearFilter"
    placeholder="开始年">
  </el-date-picker>
   <span class="year_interval">~</span>
  <el-date-picker
    v-model="form.tcrqEnd"
    type="year"
    :disabled-date="endPickerOptions"
    @focus="endPickerOptions"
    placeholder="结束年">
  </el-date-picker>

</el-form-item>

2、js代码

//引入moment（moment 的使用请看我的上一篇）
import moment from "moment";

const form = reactive({
  tcrqStart: "", // 投产日期-开始日期
  tcrqEnd: "", // 投产日期-结束日期
});

//获取当前年
const nowYear = moment().format("YYYY")

//投产开始日期：当前年之后的不能选择
const pickerOptions = (time) => {
  const timedate = moment(time).format("YYYY");
  return moment(nowYear).isBefore(timedate);
};

//投产结束日期：不符合要求的时间不能选择
const endPickerOptions = (time) => {
  const timedate = moment(time).format("YYYY");
  if(form.tcrqStart){ //当有投产开始日期时，早于开始日期的时间，结束日期不能选择
    const strYear =  moment(form.tcrqStart).format("YYYY")
    return ( moment(nowYear).isBefore(timedate) || moment(timedate).isBefore(strYear) )
  }else{
  	// 当前年之后的不能选择
    return moment(nowYear).isBefore(timedate);
  }
}

// 当有结束日期时，改动开始日期时，开始日期选择的在结束日期起不改动结束日期，否则清空结束日期值
const yearFilter = (val)=>{
  if(form.tcrqEnd){
    const yeardate = moment(val).format("YYYY")
    const endYear = moment(form.tcrqEnd).format("YYYY")
    if(moment(endYear).isBefore(yeardate)){
      form.tcrqEnd = ""
    }
  }
}