H5W3
当前位置:H5W3 > 其他技术问题 > 正文

ElementUI-DatePicker日期选择器

需求背景

后台项目想使用时间选择器选择一段时间进行数据筛选,element中本身有可选择日期范围的时间组
件,但是组件比较大在移动端显示有问题,所以需要重新封装一个可以适配移动端的时间选择器。

具体需求

  • 可选择时间段,开始时间应小于等于结束时间
  • 可以选择日期,也可选择日期时间点
  • 可以设置默认值,且若不选择具体的时间(几点几分几秒),结束时间应为当天的 23:59:59
  • 时间需要转换为时间戳且单位转换为秒

代码实现

html部分:

// 可用两个单选日期凑一下
<template>
<div>
<el-date-picker
v-model="start_time"
:type="dateType"
placeholder="选择日期"
:picker-options="pickerOptions"
/>
<span>-</span>
<el-date-picker
v-model="end_time"
:type="dateType"
placeholder="选择日期"
:picker-options="pickerOptionsWeekday1"
/>
</div>
</template>
 

数据处理部分:

export default class extends Vue {
// 时间选择器类型
// 值可为 date(仅选日期) 或 datetime(可选择日期以及时间)
@Prop({ default: 'date' }) dateType?: string
// 设置默认值,数据格式为 { start_time: xxx,  end_time: xxx },单位为 ms
// 若不手动选择时间点,结束时间建议传当天的 00:00:00
@Prop({ default: '' }) defaultDate?: any
private start_time:any = ''
private end_time:any = ''
// 限制开始时间,需小于等于结束时间,没有选择结束时间则不限制
private pickerOptions= this.limitsDate()
private limitsDate() {
return {
disabledDate: (time: any) => {
if(this.end_time){
return time.getTime() >=  +new Date(this.end_time) + 1000 * 60 * 60 * 24
}
}
}
}
private pickerOptionsWeekday1:any =  this.limitsDate1()
// 限制结束时间
private limitsDate1() {
return {
disabledDate: (time: any) => {
if(this.start_time){
return time.getTime() <= +new Date(this.start_time) - 1000 * 60 * 60 * 24
}
}
}
}
// 日期时间选择器不需要单独处理结束时间,日期选择器结束时间应为当天的23:59:59
// 时间转换为时间戳且单位为s(后端要求)
@Watch('start_time', { immediate: true })
private handlerStart(nv: any) {
let date:any = {
start_time: nv ? Math.ceil(+new Date(nv) / 1000) : '',
end_time: this.dateType === 'datetime' ? (this.end_time ? Math.ceil(+new Date(this.end_time) / 1000) : '') : (this.end_time ?  Math.ceil(+new Date(this.end_time) / 1000 + 86399) : '')
}
this.$emit('input', date)
}
@Watch('end_time', { immediate: true })
private handlerEnd(nv: any) {
// 日期时间选择器不需要单独处理结束时间,日期选择器结束时间应为当天的23:59:59
let date:any = {
start_time: this.start_time ? Math.ceil(+new Date(this.start_time) / 1000) : '',
end_time: this.dateType === 'datetime' ? (nv ? Math.ceil(+new Date(nv) / 1000) : '') : (nv ?  Math.ceil(+new Date(nv) / 1000 + 86399) : '')
}
this.$emit('input', date)
}
@Watch('defaultDate', { immediate: true })
private handlerdate(nv: any, ov: any) {
if(nv.start_time) {
this.start_time = nv.start_time
this.end_time = nv.end_time
}
}
}
 

使用组件示例

<DateTimePicker v-model="date" dateType="datetime"/>
// 父组件监听一下date值变化,自行整理数据结构
 

本文地址:H5W3 » ElementUI-DatePicker日期选择器

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址