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>