Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例

更新時間：2023年06月29日 09:46:27 作者：菜園前端

這篇文章主要為大家介紹了Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Element-ui DatePicker

通常用于選擇日期

按需引入方式

如果是完整引入可跳過此步驟

import Vue from 'vue'
import { DatePicker } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/date-picker.css'
Vue.use(DatePicker)

基礎(chǔ)用法

<template>
    <el-date-picker v-model="value" type="date" placeholder="選擇日期"> </el-date-picker>
</template>
<script>
export default {
    data() {
        return {
            value: ''
        }
    }
}
</script>

選擇月份

<template>
    <el-date-picker v-model="value" type="month" placeholder="選擇月份"> </el-date-picker>
</template>
<script>
export default {
    data() {
        return {
            value: ''
        }
    }
}
</script>

選擇年份

<template>
    <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期"> </el-date-picker>
</template>
<script>
export default {
    data() {
        return {
            value: []
        }
    }
}
</script>

Attributes

以上就是Element-ui DatePicker日期選擇器基礎(chǔ)用法示例的詳細內(nèi)容，更多關(guān)于Element-ui DatePicker的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vite動態(tài)導(dǎo)入頁面動態(tài)import組件實現(xiàn)方式
本文總結(jié)了在使用Vite進行動態(tài)導(dǎo)入頁面和組件時遇到的問題,由于Vite與Webpack在處理動態(tài)import方面有所不同,需要采用特殊方法,文章強調(diào)了從后臺獲取路由表并動態(tài)引入組件的實踐方法
2026-04-04
Vue組件如何設(shè)置Props實例詳解
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個級別的配置項,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下
2022-06-06
axios庫的核心代碼解析及總結(jié)
這篇博客針對axios庫的核心代碼做一個簡要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
vue+Minio實現(xiàn)多文件進度上傳的詳細步驟
這篇文章主要給大家介紹了關(guān)于如何利用vue+Minio實現(xiàn)多文件進度上傳的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下
2022-03-03
Vue pinia模塊化全局注冊詳解
這篇文章主要介紹了Vue pinia模塊化全局注冊，Pinia是Vue.js團隊成員專門為Vue開發(fā)的一個全新的狀態(tài)管理庫，并且已經(jīng)被納入官方github
2023-02-02
使用vue3+vite導(dǎo)入圖片路徑錯亂問題排查及解決
使用vue3+vite開發(fā)的時候,導(dǎo)入svg圖片時,同一個文件夾下的文件,其中一個路徑正常解析,另一個不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導(dǎo)入圖片路徑錯亂問題排查及解決,需要的朋友可以參考下
2024-03-03
Vue項目安裝插件并保存
今天小編就為大家分享一篇關(guān)于Vue項目安裝插件并保存，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
Vue3利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳
這篇文章主要為大家詳細介紹了Vue3如何利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳(帶哈希計算),感興趣的小伙伴可以跟隨小編一起學(xué)習一下
2023-10-10
解決vue3項目打包發(fā)布到服務(wù)器后訪問頁面顯示空白問題
這篇文章主要介紹了解決vue3項目打包發(fā)布到服務(wù)器后訪問頁面顯示空白問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue3?FullCalendar使用并設(shè)置dayGrid視圖的最大事件數(shù)過程
FullCalendar?dayGrid視圖可通過dayMaxEvents配置限制每日事件數(shù)量,超出部分折疊顯示為“+nmore”,設(shè)置為true時自動計算,數(shù)字則手動限制,點擊展開查看全部事件,適用于月/周視圖,支持CSS自定義折疊文本樣式
2025-08-08