Elementui中日期选择器的使用

我会带着你远行 2023-02-24 11:18 24阅读 0赞

# 准备 #

这里使用了moment.js  
关于moment.js的使用,请看[Vue项目中使用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>

[Vue_moment.js]: https://blog.csdn.net/qq_28988969/article/details/105177843