moment——日期格式化常用示例

<template>
  <div id="app" style="text-align: center;">
    <h1>{{ msg | format}}</h1>
  </div>
</template>

<script>
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
export default {
  name: 'app',
  data () {
    return {
      msg: new Date
    }
  },
  filters:{
    format(val){
      // return moment(val).calendar() //默认为英文、引入后设置格式
      // return moment(val).format('YYYY年MM月DD日') //自定义方案1，简写：LL 或 ll
      // return moment(val).format('YYYY-MM-DD HH:mm:ss') //大写HH为24小时制，小写dd为星期
      // return moment(val).format('hh:mm:ss a') //12小时制
      // return moment(val).format('YYYYMMDDHHmmss') //纯数字日期
      // return moment(val).subtract(1, "days").format("YYYY-MM-DD HH:mm:ss") //1天前(add:后)：weeks、months、years、hours、minutes、seconds
      // return moment(val).format("LLLL") //全中文日期
      // return moment(val).format("dddd") //获取星期
      // return moment(val).valueOf() //完整的时间戳
      // return moment(val).format('X') //秒结尾
      // return moment(val).format('x') //毫秒结尾
      return moment(val).format('LLLL')
    }
  }
}
</script>

 常用时间范围设置：

//获取本日、本周week、本月month、本年year，注意没有yesterday,可以通过subtract（1，'days'）设置，这里带xxx-s！！！
  const startDate = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'); 
  const startDate = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');

如果是从今天开始到80年后：

[moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').add(80, "years").format('YYYY-MM-DD HH:mm:ss')],// 当前时间2019-12-25 00:00:00——2099-12-31 23:59:59

【模板】：

const pickerOptionsTime = {
  shortcuts: [
    {
      text: '昨天',
      onClick (picker) {
        const date = [moment().startOf('day').subtract(1, "days").format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').subtract(1, "days").format('YYYY-MM-DD HH:mm:ss')]
        picker.$emit('pick', date)
      }
    }, {
      text: '当天',
      onClick (picker) {
        const date = [moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')]
        picker.$emit('pick', date)
      }
    }, {
      text: '本周',
      onClick (picker) {
        const date = [moment().startOf('week').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('week').format('YYYY-MM-DD HH:mm:ss')]
        picker.$emit('pick', date)
      }
    }
  ]
}

封装的elementUI搜索表单：

<template>
  <div class="search-text-form">
    <el-form style="display:inline-block" inline :model="param" :rules="rules" ref="param">
      <el-form-item label="起止时间：" class="search-text-form-item" prop="time">
        <el-date-picker
          clearable
          id="popover_select_time"
          v-model="param.time"
          type="datetimerange"
          :picker-options="pickerOptions"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item label="任务状态：" class="search-text-form-item" prop="status">
        <el-select
          id="popover_select_status"
          v-model="param.status"
          placeholder="请选择任务状态"
          clearable
        >
          <el-option
            style="text-align: center;"
            v-for="(item,index) in statusOptions"
            :key="index"
            :label="item.cname"
            :value="item.ename"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关键字：" class="search-text-form-item" prop="kwd">
        <el-input
          id="popover_select_kwd"
          style="width: 180px;"
          v-model="param.kwd"
          placeholder="多个关键字，使用空格分开"
          clearable
        />
      </el-form-item>
      <el-form-item class="search-text-form-item">
        <el-button
          round
          id="popover_select_clear"
          :disabled="disabledSearch"
          @click="searchFormChange('clear')"
        >清空</el-button>
        <el-button
          round
          id="popover_select_search"
          style="float: right"
          type="primary"
          plain
          @click="searchFormChange(param)"
        >查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { pickerOptionsTime } from "@/utils/appManage"; // 公共的匹配值
export default {
  props: {
    param: {
      type: Object,
      default() {
        return {
          time: [],
          status: "",
          kwd: ""
        };
      }
    }
  },
  computed: {
    rules(){
      return {
        time: [
          { required: false, message: '请选择起止时间', trigger: 'select' ,type:'array'}
        ],
        status: [
          { required: true, message: '请选择任务状态', trigger: 'select'}
        ],
        kwd: [
          { required: false, message: '空格隔开，不可为空', trigger: 'blur' }
        ]
      }
    },
    statusOptions(){
      return [
        {cname:'成功',ename:'success'},
        {cname:'失败',ename:'fail'},
        {cname:'运行中',ename:'running'},
        {cname:'待调度',ename:'tobescheduled'},
        {cname:'已终止',ename:'killed'},
      ]
    },
    pickerOptions(){
      return pickerOptionsTime ||[]
    },
    disabledSearch() {
      return !(this.param.status || this.param.kwd || (Array.isArray(this.param.time) && this.param.time.length > 0)
      );
    }
  },
  methods: {
    searchFormChange(val) {
      console.log(val,6666);
      if(val==='clear'){
        for(let key in this.param){
          this.param[key]  = key==='time'?[]:''
        }
      }else{
        this.$refs['param'].validate((valid) => {
          if (valid) {
            this.$emit('call-back',val)
          }
        })
      }
    }
  },
};
</script>