elementui 时间选择器的使用及搜索

需要先安装 moment 日期格式转换的插件
1、安装

npm install moment -S

2、引入
在main.js写这两行代码

import moment from "moment";
Vue.prototype.$moment = moment;

在页面上就可以 使用了

demo

<sec-row>
  <sec-col :span="12">
     <sec-form-item label="触发时间" prop="timeRange">
        <sec-date-picker
           :clearable="true"
            v-model="filterForm.timeRange"
            type="datetimerange"
           :start-placeholder="start"
           :end-placeholder="ends"
           format="yyyy-MM-dd HH:mm:ss"
           value-format="yyyy-MM-dd HH:mm:ss"
           :disabled="disabled"  
        >   
        </sec-date-picker>
      </sec-form-item>
   </sec-col>           
</sec-row>

data

data() {
    
    
    return {
    
    
      filterForm: {
    
    
        name: "",
        userIP: "",
        visitURL: "",
        timeRange: [this.getNowTime(),this.getEndTime()], // 时间的组合
      },
      start: this.getNowTime(), //开始的时间
      ends: this.getEndTime(), //结束的时间
    };
  },

methods

//处理默认选中当前日期
    getNowTime() {
    
    
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = " 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，       如若不需要，此行可忽略
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${
      
      year}-${
      
      month}-${
      
      date}${
      
      hour}`;
      console.log(defaultDate);
      return defaultDate;
      this.$set(this.filterForm, "timeRange", defaultDate);
    },
//处理默认选中结束日期
    getEndTime() {
    
    
      var date = new Date();
      //年 getFullYear()：四位数字返回年份
      var year = date.getFullYear(); //getFullYear()代替getYear()
      //月 getMonth()：0 ~ 11
      var month = date.getMonth() + 1;
      //日 getDate()：(1 ~ 31)
      var day = date.getDate();
      //时 getHours()：(0 ~ 23)
      var hour = date.getHours();
      //分 getMinutes()： (0 ~ 59)
      var minute = date.getMinutes();
      //秒 getSeconds()：(0 ~ 59)
      var second = date.getSeconds();
      // 月 转化为两位数
      month = month.toString().padStart(2, "0");
      // 日 转化为两位数
      day = day.toString().padStart(2, "0");
      // 时 转化为两位数
      hour = hour.toString().padStart(2, "0");
      // 分 转化为两位数
      minute = minute.toString().padStart(2, "0");
      // 秒 转化为两位数
      second = second.toString().padStart(2, "0");
      var time =
        year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
      console.log(time);
      return time;
    },
//实现搜索时 将timeRange的值赋值给 开始时间和结束时间
 // 搜索
    submitForm() {
    
    
      getRomte({
    
    
        tenant_name: this.filterForm.name,
        client: this.filterForm.userIP,
        access_url: this.filterForm.visitURL,
        start_time: this.filterForm.timeRange[0], //开始的时间
        end_time: this.filterForm.timeRange[1],  //结束的时间
        batch: 1,
        batch_size: this.pagesize,
      }).then((res) => {
    
    
        console.log(res);
        console.log(this.filterForm.timeRange);
        console.log(res.result.records);
        this.total = res.result.total;
        this.tableData = res.result.records;
      });
    },