Vue封裝DateRangePicker組件流程詳細介紹
更新時間:2022年11月14日 08:42:15 作者:騎上我心愛的小摩托
在后端管理項目中使用vue來進行前端項目的開發(fā),但我們都知道Vue實際上無法監(jiān)聽由第三方插件所引起的數(shù)據(jù)變化。也無法獲得JQuery這樣的js框架對元素值的修改的。而日期控件daterangepicker又基于JQuery來實現(xiàn)的
前言
日期選擇器在實際使用中,可能會要求默認固定日期、回顯日期或者是時間固定點(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="結(jié)束日期" :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 }; }
總結(jié)
- 綜上所述,可見當前日期范圍選擇器默認時間是今天
default-time
設(shè)置時間點固定為起始的00:00:00到23:59:59
- 快捷項也設(shè)置成當前模式,自定義起始和結(jié)束時間文案
- 當前的獲取時間格式為時間戳形式
value-format="timestamp"
到此這篇關(guān)于Vue封裝DateRangePicker組件流程詳細介紹的文章就介紹到這了,更多相關(guān)Vue DateRangePicker內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例,幫助大家更好的理解和學習vue,感興趣的朋友可以了解下2020-10-10vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解
這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解,本文大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧2018-09-09基于element-ui對話框el-dialog初始化的校驗問題解決
這篇文章主要介紹了基于element-ui對話框el-dialog初始化的校驗問題解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09