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

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

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

Element-ui DatePicker

通常用于選擇日期

按需引入方式

如果是完整引入可跳過(guò)此步驟

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="開(kāi)始日期" end-placeholder="結(jié)束日期"> </el-date-picker>
</template>
<script>
export default {
    data() {
        return {
            value: []
        }
    }
}
</script>

Attributes

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

您可能感興趣的文章:

相關(guān)文章

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