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="開始日期" 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)文章

vue限制實(shí)現(xiàn)不登錄無(wú)法進(jìn)入其他頁(yè)面
本文主要介紹了vue限制實(shí)現(xiàn)不登錄無(wú)法進(jìn)入其他頁(yè)面,vue限制不登錄,通過(guò)url進(jìn)入其他頁(yè)面強(qiáng)制回到登錄頁(yè)面；已經(jīng)登錄的情況下,不可以再進(jìn)入登錄界面,感興趣的可以了解一下
2024-01-01
如何在Vue項(xiàng)目中添加接口監(jiān)聽遮罩
這篇文章主要介紹了如何在Vue項(xiàng)目中添加接口監(jiān)聽遮罩,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue3使用自定義指令實(shí)現(xiàn)el dialog拖拽功能示例詳解
這篇文章主要為大家介紹了vue3使用自定義指令實(shí)現(xiàn)el dialog拖拽功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue-amap根據(jù)地址回顯地圖并mark的操作
這篇文章主要介紹了vue-amap根據(jù)地址回顯地圖并mark的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue可自定義tab組件用法實(shí)例
在本篇文章里小編給大家分享了關(guān)于Vue可自定義tab組件用法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。
2019-10-10
Vue中以HTML形式顯示內(nèi)容并動(dòng)態(tài)生成HTML代碼的方法
有的時(shí)候我們想在vue中直接顯示一個(gè)html的網(wǎng)頁(yè),如果用富文本方式,那么內(nèi)容就會(huì)太多,那么怎么處理呢?這篇文章主要給大家介紹了關(guān)于Vue中如何以HTML形式顯示內(nèi)容并動(dòng)態(tài)生成HTML代碼的相關(guān)資料,需要的朋友可以參考下
2024-03-03
vue 解決provide和inject響應(yīng)的問(wèn)題
這篇文章主要介紹了vue 解決provide和inject響應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
driver.js 是一個(gè)輕量級(jí)、無(wú)依賴的原生JavaScript引擎，在整個(gè)頁(yè)面中驅(qū)動(dòng)用戶的注意力，強(qiáng)大的、高度可定制的原生JavaScript引擎，無(wú)外部依賴，支持所有主流瀏覽器，這篇文章主要介紹了vue如何使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢?需要的朋友可以參考下
2023-03-03