Vue封装DateRangePicker组件流程详细介绍
更新时间:2022年11月14日 08:42:15 作者:骑上我心爱的小摩托
在后端管理项目中使用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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
前端启动出现报错提示vue-cli-service serve的原因及解决办法
这篇文章主要给大家介绍了关于前端启动出现报错提示vue-cli-service serve的原因及解决办法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-11-11一文快速学会阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)
冒泡就是事件开始是由最具体的元素接收,然后逐层向上级传播到较为不具体的元素,这篇文章主要给大家介绍了关于阻止事件冒泡的4种方法,文中介绍的方法分别是原生js阻止以及vue中使用修饰符阻止的相关资料,需要的朋友可以参考下2023-12-12
最新评论