Vue封装DateRangePicker组件流程详细介绍
作者：骑上我心爱的小摩托
在后端管理项目中使用vue来进行前端项目的开发，但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的
前言
日期选择器在实际使用中，可能会要求默认固定日期、回显日期或者是时间固定点（00:00:00到23:59:59）
一、封装el-date-picker
<template>
<div>
<el-date-picker
@change="handleChange"
v-model="dateValue"
type="daterange"
align="right"
unlink-panels
:clearable=false
value-format="timestamp"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
:default-time="['00:00:00', '23:59:59']">
</el-date-picker>
</div>
</template>
<script>
export default {
name: 'DateRangePicker',
props: {
defaultTimeRange: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
dateValue: '',
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
const start = new Date(new Date().toLocaleDateString()); ;
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
const start = new Date(new Date().toLocaleDateString()); ;
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
const start = new Date(new Date().toLocaleDateString()); ;
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
}
};
},
mounted() {
this.dateValue = [new Date(this.defaultTimeRange.from), new Date(this.defaultTimeRange.to)];
},
methods: {
handleChange(time) {
time = time || [];
this.$emit('handleChange', {start_time: time[0], end_time: time[1]});
}
}
};
</script>二、父组件中进行引用
父组件index.vue
<DateRangePicker @handleChange="handleTime" :default-time-range="defaultTimeRange"/>
<script>
import { generateTodayDefaultTimeRange } from '@/utils/utils';
export default {
data () {
return {
defaultTimeRange: { ...generateTodayDefaultTimeRange() }
}
}
methods:{
handleTime(time) {
//console.log(time)获取选择时间
}
}
}
</script>
引用JSutils.js
// 今日默认时间范围
export function generateTodayDefaultTimeRange(date = new Date()) {
const to = formatDateTime(new Date(date.getTime()));
const from = formatDateTime(new Date(date.getTime()));
return { from, to };
}
总结
- 综上所述，可见当前日期范围选择器默认时间是今天
default-time设置时间点固定为起始的00:00:00到23:59:59- 快捷项也设置成当前模式，自定义起始和结束时间文案
- 当前的获取时间格式为时间戳形式
value-format="timestamp"
到此这篇关于Vue封装DateRangePicker组件流程详细介绍的文章就介绍到这了,更多相关Vue DateRangePicker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！