element + vue 之日期选择器组件封装

1.新建一个date-picker文件

2.date-picker.vue代码

<template>
  <div>
    <el-date-picker
      :size="sizeA"
      class="w125"
      type="date"
      placeholder="选择开始日期"
      v-model="activityInfo.start_time"
      :picker-options="pickerBeginDateBefore"
      value-format="yyyy-MM-dd 00:00:00"
    ></el-date-picker>
    ~
    <el-date-picker
      :size="sizeA"
      class="w125"
      type="date"
      v-model="activityInfo.end_time"
      :picker-options="pickerBeginDateAfter"
      placeholder="选择结束日期"
      value-format="yyyy-MM-dd 23:59:59"
      :disabled="activityInfo.is_long"
      
    ></el-date-picker>
  </div>
</template>

<script>
export default {
    
    
  name: "WTimer",
  props: {
    
    
    activityInfo: {
    
    
      type: Object,
    },
    sizeA: {
    
    
      type: String,
      default: 'mini',
    },
  },
  data() {
    
    
    return {
    
    
      startDate: "",
      endDate: "",
      pickerBeginDateBefore: {
    
    
        disabledDate: (time) => {
    
    
          // if 判断另一项为空时可以随便选择时间
          if (this.activityInfo.end_time) {
    
    
            return (
              time.getTime() > new Date(this.activityInfo.end_time).getTime()
            );
          } else {
    
    
            return false;
          }
        },
      },
      pickerBeginDateAfter: {
    
    
        disabledDate: (time) => {
    
    
          if (this.activityInfo.start_time) {
    
    
            return (
              time.getTime() <
              new Date(this.activityInfo.start_time).getTime() -
                (1 * 24 * 60 * 60 - 1) * 1000
            );
          } else {
    
    
            return false;
          }
        },
      },
    };
  },

  mounted() {
    
    },

  methods: {
    
    },
};
</script>
<style lang="scss" scoped>
@import "../../style/variable.scss";
/deep/.el-input--mini {
    
    
  width: $el-input-mini;
}
.w125{
    
    
  width: 125px;
}
</style>

3.引用日期组件

 <el-form-item label="转上架日期:">
     <datePicker
     :activityInfo="activityInfo"
     show-word-limit
     clearable>
     </datePicker>
  </el-form-item>

import datePicker from "@/components/DateField/date-picker"; //引用日期选择器组件
import {
    
     getNowFormatDate } from "@/utils/index"; //引用日期格式
export default {
    
    
components: {
    
    datePicker} //注册
 data() {
    
    
    return {
    
    
      activityInfo: {
    
    
        start_time: "",
        end_time: "",
        is_long: false,
      },
    }
   },
   mounted() {
    
    
     this.activityInfo.start_time = getNowFormatDate() + " 00:00:00"; //初始化默认展示当天日期
     this.activityInfo.end_time = getNowFormatDate() + " 23:59:59";
   },
   methods:{
    
    
    // 获取列表
    getQueryList() {
    
    
        this.search.startTime = this.activityInfo2.start_time;
        this.search.endTime = this.activityInfo2.end_time;
        //请求数据
         examineRecordQuery(...this.search)
          .then((res) => {
    
    
            this.QueryList = res.data.data.list;
            this.page.total = res.data.data.total;
          })
          .catch(() => {
    
    
            this.list = [];
            this.page = _.cloneDeep(page);
          });
     },
     //重置
      resetForm(formName) {
    
    
      this.activityInfo.start_time = "";
      this.activityInfo.end_time = "";
      this.getQueryList();
    },
   }
}

4.getNowFormatDate 方法

//获取当天时间
export function getNowFormatDate(date) {
    
    
 var date = date || new Date();
 var seperator1 = "-";
 var year = date.getFullYear();
 var month = date.getMonth() + 1;
 var strDate = date.getDate();
 if (month >= 1 && month <= 9) {
    
    
  month = "0" + month;
 }
 if (strDate >= 0 && strDate <= 9) {
    
    
  strDate = "0" + strDate;
 }
 var currentdate = year + seperator1 + month + seperator1 + strDate;
 return currentdate;
}