vue 使用Moment插件格式化时间

 <el-form
      ref="searchMap"
      :inline="true"
      style="padding-top: 20px; width: 60%"
      :model="searchMap"
    >
      <el-form-item
        label="选择日期"
        prop="systemClass"
        style="padding-left: 0.8rem"
      >
        <el-date-picker
          v-model="filters.column.start_date"
          type="date"
          :picker-options="pickerBeginDateBefore"
          format="yyyy-MM-dd"
          placeholder="开始日期"
        >
        el-date-picker>

        <el-date-picker
          v-model="filters.column.end_date"
          type="date"
          format="yyyy-MM-dd"
          :picker-options="pickerBeginDateAfter"
          placeholder="结束日期"
        >
        el-date-picker>
      el-form-item>

      <el-form-item label="关键字">
        <el-input
          v-model="searchMap.keyWord"
          placeholder="用户名/系统标识/api名"
        />
      el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="onSearch"
        >查询el-button
      >
    el-form>
<script>
 data() {
     
    return {
     
      pickerBeginDateBefore: {
     
        disabledDate: (time) => {
     
          let beginDateVal = this.filters.column.end_date;
          if (beginDateVal) {
     
            this.searchMap.beginTime = moment(
              this.filters.column.start_date
            ).format("YYYY-MM-DD");
            return time.getTime() > beginDateVal;
          }
        },
      },
      // 处理时间段选择(开始时间不能大于结束时间
     //vue使用Moment插件格式化时间
     // npm install moment --save
     // import Moment from 'moment'
      pickerBeginDateAfter: {
     
        disabledDate: (time) => {
     
          let beginDateVal = this.filters.column.start_date;
          if (beginDateVal) {
     
            this.searchMap.endTime = moment(
              this.filters.column.end_date
            ).format("YYYY-MM-DD");

            return time.getTime() < beginDateVal;
          }
        },
      },
      filters: {
     
        column: {
     
          start_date: "", //开始时间
          end_date: "", //结束时间
        },
      },
      searchMap: {
     
        KeyWord: "",
        beginTime: "",
        endTime: "",
      },
      dataForm: {
     },
    };
  },
   methods: {
     
    onSearch() {
     
      alert(this.searchMap.keyWord);
    },
  },
</script>

你可能感兴趣的:(Vue,vue.js)