vue 使用Moment插件格式化时间

最新推荐文章于 2024-07-23 11:05:43 发布

江江江I

最新推荐文章于 2024-07-23 11:05:43 发布

阅读量643

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/u013071763/article/details/112172707

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 <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>