Elementui中日期選擇器的使用

準備

這裡使用了moment.js

關于moment.js的使用,請看​Vue項目中使用moment.js

日期選擇器的使用

首先定義一個子元件DatePicker.vue

<template>
  <el-form-item :label="label" label-width="80px">
    <el-date-picker
      v-model="date"
      :picker-options="pickerOptions"
      type="date"
      placeholder="選擇日期"
      :clearable="false"
      @change="dateChange"
    ></el-date-picker>
  </el-form-item>
</template>

<script>
export default {
  props: {
    // 标簽文本需要傳入
    label: String
  },
  created() {
    // 預設查詢當天
    this.initDate(this.$moment().toDate())
  },
  data() {
    var that = this
    return {
      // 查詢日期
      date: null,
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const date = that.$moment().toDate()
              picker.$emit('pick', date)
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = that
                .$moment()
                .subtract('days', 1)
                .toDate()
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = that
                .$moment()
                .subtract('days', 7)
                .toDate()
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },
  methods: {
    // 初始化日期
    initDate(initDate) {
      this.date = initDate
      this.dateChange()
    },
    // 時間改變
    dateChange() {
      // 調用父元件傳遞的有參方法
      // emit 第一個參數：事件名，之後的參數：方法參數
      this.$emit('dateChange', this.$moment(this.date).format('YYYY-MM-DD'))
    }
  }
}
</script>

<style lang="less" scoped>
</style>      

把子元件注冊為全局元件,在components目錄下,建立一個register.js檔案

import Vue from 'vue'

// 注冊全局元件
// 日期選擇
import DatePicker from './base/DatePicker.vue'

Vue.component('datePicker', DatePicker )      

接着在main.js中引入register.js

import Vue from 'vue'
import App from './App.vue'
// 路由
import router from './router'
// vuex
import store from './store'
// axios
import './dependences/axios.js'
// v-charts
import './dependences/vcharts.js'
// moment.js
import './dependences/moment.js'
// 注冊元件
import './components/register.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')      

<template>
    <div>
      <el-row :gutter="10">
          <el-col :span="6">
            <zx-datePicker @dateChange="dateOneChange" label="日期1" ref="dateOneRef"></zx-datePicker>
          </el-col>
          <el-col :span="6">
            <zx-datePicker @dateChange="dateTwoChange" label="日期2"></zx-datePicker>
          </el-col>
      </el-row>
    </div>
</template>

<script>
export default {
  data() {
    return {
        dateOne: null,
        dateTwo: null
    }
  },
  mounted() {
    // 初始化日期1, 日期2使用預設值
    this.$refs.dateOneRef.initDate(
      this.$moment()
        .subtract('days', 1)
        .toDate()
    )
  },
  methods: {
    dateOneChange(dateOne) {
      this.dateOne = dateOne
    },
    dateTwoChange(dateTwo) {
      this.dateTwo = dateTwo
    }
  }
}
</script>

<style lang="less" scoped>
</style>      

日期範圍選擇器

<template>
  <el-form-item label="查詢日期" label-width="80px">
    <el-date-picker
      v-model="dateRange"
      :picker-options="pickerOptions"
      type="daterange"
      range-separator="至"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      :clearable="false"
      @change="dateRangeChange"
    ></el-date-picker>
  </el-form-item>
</template>

<script>
export default {
  mounted() {
    // 預設查詢一個月
    this.initDateRange(
      this.$moment()
        .subtract('days', 30)
        .toDate(),
      this.$moment().toDate()
    )
  },
  data() {
    var that = this
    return {
      // 查詢日期範圍
      dateRange: null,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const start = that
                .$moment()
                .subtract('days', 7)
                .toDate()
              const end = that.$moment().toDate()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近兩周',
            onClick(picker) {
              const start = that
                .$moment()
                .subtract('days', 14)
                .toDate()
              const end = that.$moment().toDate()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三周',
            onClick(picker) {
              const start = that
                .$moment()
                .subtract('days', 21)
                .toDate()
              const end = that.$moment().toDate()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一個月',
            onClick(picker) {
              const start = that
                .$moment()
                .subtract('days', 30)
                .toDate()
              const end = that.$moment().toDate()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近兩個月',
            onClick(picker) {
              const start = that
                .$moment()
                .subtract('days', 60)
                .toDate()
              const end = that.$moment().toDate()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三個月',
            onClick(picker) {
              const start = that
                .$moment()
                .subtract('days', 90)
                .toDate()
              const end = that.$moment().toDate()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六個月',
            onClick(picker) {
              const start = that
                .$moment()
                .subtract('days', 180)
                .toDate()
              const end = that.$moment().toDate()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const start = that
                .$moment()
                .subtract('days', 365)
                .toDate()
              const end = that.$moment().toDate()
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    // 初始化日期範圍
    initDateRange(startDate, endDate) {
      this.dateRange = [startDate, endDate]
      this.dateRangeChange()
    },
    // 時間範圍改變
    dateRangeChange() {
      // 調用父元件傳遞的有參方法
      // emit 第一個參數：事件名，之後的參數：方法參數
      this.$emit('dateRangeChange', this.$moment(this.dateRange[0]).format('YYYY-MM-DD'), this.$moment(this.dateRange[1]).format('YYYY-MM-DD'))
    }
  }
}
</script>

<style lang="less" scoped>
</style>