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

创建一个父组件Demo.vue,在其中就可以使用子组件

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