准备
这里使用了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>