11.el-time-select时分秒-时间选择器，设置默认时间、回显后台返回的时间

1.效果：

2.template：

<el-time-picker
  is-range
  v-model="form.time"
  format="HH:mm:ss"
  range-separator="至"
  start-placeholder="开始时间"
  end-placeholder="结束时间"
  placeholder="选择时间范围"
></el-time-picker>

3.data初始化：

export default {
  data() {
    return {
      form: {       
        time: [
          new Date().getFullYear() +
            "-" +
            new Date().getMonth() +
            "-" +
            new Date().getDate() +
            " " +
            "09:00:00",
          new Date().getFullYear() +
            "-" +
            new Date().getMonth() +
            "-" +
            new Date().getDate() +
            " " +
            "18:00:00"
        ], //营业时间
      },     
    };
  },
};

4.根据后端返回的时间格式回显：

//例如后端返回的时间是minTime:09:00:00,maxTime:18:50:00;
//回显的开始时间
this.form.time[0] = new Date(
  new Date().getFullYear() +
    "-" +
    new Date().getMonth() +
    "-" +
    new Date().getDate() +
    " " +
    "09:00:00"
).getTime();
//回显的结束时间
this.form.time[1] = new Date(
  new Date().getFullYear() +
    "-" +
    new Date().getMonth() +
    "-" +
    new Date().getDate() +
    " " +
    "18:50:00"
).getTime();

5.提交时间参数：格式为HH:mm:ss， 需要将input输入框的格式转换一下；

 methods: {
    // 时间戳转日期
    formatDate(value, timeType) {
      if (value != null) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        if (timeType == "date") {
          // 时间戳转日期-yyyy-MM-dd
          return y + "-" + MM + "-" + d;
        } else if (timeType == "dateTime") {
          // 时间戳转日期-yyyy-MM-dd HH:mm:ss
          return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
        } else if (timeType == "time") {
          // 时间戳转时间-HH:mm:ss
          return h + ":" + m + ":" + s;
        }
      } else {
        value = "";
      }
    },
  },
  created() {
    console.log("this.time-起", this.formatDate(this.form.time[0], "time")); //this.time-起 09:00:00
    console.log("this.time-止", this.formatDate(this.form.time[1], "time"));//this.time-止 18:00:00
  }