elementUI的日期联动选择组件 el-date-picker

最新推荐文章于 2025-03-31 17:22:26 发布

稚嫩的二朵

最新推荐文章于 2025-03-31 17:22:26 发布

阅读量1.4k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_43537814/article/details/107416328

版权

本文介绍了如何在Vue.js项目中使用elementUI的el-date-picker组件实现日期联动选择功能，详细讲解了配置和使用步骤。

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

elementUI的日期联动选择组件 el-date-picker的使用

HTML代码：
<el-date-picker
        v-model="time"   
        @change="handleDate"   //日期改变的回调函数
        :picker-options="pickerOptions"  //设置禁用时间
        format="yyyy/MM/dd"  //设置显示的时间格式
        value-format="yyyy/MM/dd"  //设置传给后端的数据格式
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      
  JS代码：
  data(){
   return {
   time:'',
   pickerOptions: {
     disabledDate(time) {  //禁用今天和未来的时间
      return time.getTime() > Date.now() - 3600 * 1000 * 24;
     }
   }
  }
  handleDate() {
  this.form.oldDate = this.time[0];//开始时间
  this.form.newDate = this.time[1];//结束时间
  }