vue时间日历选择

一、elementUI组件选择 (官网地址: element.eleme.cn)

• 效果图如下

• 在template标签中

  <template>
      <span>起止时间</span>
      <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
  </<template>

• 在script标签中

  export default {
      data() {
           return {
              value1:''
          }
      }
  }
  

二、效果图如下

实现过程如下:

• 在 template标签中

<template>
   <el-card>
       <el-form :model="form" inline size="small" ref="form">
           <el-form-item label="起止时间">
               <el-date-picker
                 v-model="form.startDate"
                 type="date"
                 :picker-options="pickerStartDate"
                 style="width:150px"
               ></el-date-picker>
           </el-form-item>
           <span>-</span>
           <el-form-item>
               <el-date-picker
                 v-model="form.closeDate"
                 type="date"
                 :picker-options="pickerCloseDate"
                 style="width:150px"
               ></el-date-picker>
           </el-form-item>
       </el-form>
   </el-card>
</template>

• 在 script标签中

<script>
   export default {
       data() {
           return {
                form: {
                   startDate: null,
                   closeDate: null
                   },
               pickerStartDate: {
                   disabledDate: time => {
                       if (this.form.closeDate) {
                           return time.getTime() > this.form.closeDate;
                       }
                   }
               },
               pickerCloseDate: {
                   disabledDate: time => {
                       return time.getTime() < this.form.startDate;
                   }
               }
           }
       }
   }
</script>