Vue封裝DateRangePicker組件流程詳細(xì)介紹
前言
日期選擇器在實(shí)際使用中,可能會(huì)要求默認(rèn)固定日期、回顯日期或者是時(shí)間固定點(diǎ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: '最近一個(gè)月', 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: '最近三個(gè)月', 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>
二、父組件中進(jìn)行引用
父組件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)獲取選擇時(shí)間 } } } </script>
引用JSutils.js
// 今日默認(rèn)時(shí)間范圍 export function generateTodayDefaultTimeRange(date = new Date()) { const to = formatDateTime(new Date(date.getTime())); const from = formatDateTime(new Date(date.getTime())); return { from, to }; }
總結(jié)
- 綜上所述,可見當(dāng)前日期范圍選擇器默認(rèn)時(shí)間是今天
default-time
設(shè)置時(shí)間點(diǎn)固定為起始的00:00:00到23:59:59
- 快捷項(xiàng)也設(shè)置成當(dāng)前模式,自定義起始和結(jié)束時(shí)間文案
- 當(dāng)前的獲取時(shí)間格式為時(shí)間戳形式
value-format="timestamp"
到此這篇關(guān)于Vue封裝DateRangePicker組件流程詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Vue DateRangePicker內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用echarts實(shí)現(xiàn)地圖的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)地圖的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下2020-10-10vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解
這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解,本文大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-09-09基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問題解決
這篇文章主要介紹了基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問題解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09