element日期組件實(shí)現(xiàn)只能選擇小時(shí)或分鐘
前言
在使用 element 框架時(shí)，總是會(huì)有一些滿足不了現(xiàn)有項(xiàng)目需求的問(wèn)題，這個(gè)時(shí)候就需要我們對(duì) element 的組件進(jìn)行改造，最近有一個(gè)需求就是要求日期組件只能選擇年月日時(shí)，不要分鐘和秒，找了一圈，發(fā)現(xiàn) element 并沒(méi)有相關(guān)的組件或者屬性可以支持，這個(gè)時(shí)候就需要我們對(duì)其進(jìn)行改造。
本章用到的屬性
| 屬性 | 描述 | 類型 |
|---|---|---|
| format | 顯示在輸入框中的格式（yyyy-MM-dd HH:mm:ss） | string |
| value-format | 綁定值的格式。不指定則綁定值為 Date 對(duì)象 | string |
只能選擇小時(shí)
只能選擇到小時(shí)，最簡(jiǎn)單的方法就是通過(guò) css 改變樣式配合 element 日期組件的 format 屬性來(lái)實(shí)現(xiàn)這個(gè)效果。
<template>
<div>
<el-date-picker v-model="timeValue" format="yyyy-MM-dd HH" value-format="yyyy-MM-dd HH" type="datetime">
</el-date-picker>
<el-button type="primary" @click="submitOn">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
timeValue: "",
};
},
methods: {
submitOn() {
console.log(this.timeValue);
},
},
};
</script>
<style scope>
.el-time-spinner__wrapper {
width: 100% !important;
}
</style>
只能選擇小時(shí)實(shí)現(xiàn)效果
只能選擇小時(shí)、分鐘
選擇到小時(shí)、分鐘，我們則可以直接通過(guò) format 和 value-format 屬性直接實(shí)現(xiàn)。
<template>
<div>
<el-date-picker v-model="timeValue" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime">
</el-date-picker>
<el-button type="primary" @click="submitOn">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
timeValue: "",
};
},
methods: {
submitOn() {
console.log(this.timeValue);
},
},
};
</script>
只能選擇小時(shí)、分鐘實(shí)現(xiàn)效果
到此這篇關(guān)于element日期組件實(shí)現(xiàn)只能選擇小時(shí)或分鐘的文章就介紹到這了,更多相關(guān)element日期選擇小時(shí)或分鐘內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼
本篇文章主要介紹了vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue+highCharts實(shí)現(xiàn)可選范圍的圖表
這篇文章主要為大家詳細(xì)介紹了vue+highCharts實(shí)現(xiàn)可選范圍的圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue3中的createApp分析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果
在vue項(xiàng)目中,我們通常會(huì)使用Axios來(lái)與后臺(tái)進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請(qǐng)求時(shí),常常需要在頁(yè)面上顯示一個(gè)加載框（Loading）,然后等數(shù)據(jù)返回后自動(dòng)將其隱藏,本文介紹了基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03
vue中的stylus及stylus-loader版本問(wèn)題
這篇文章主要介紹了vue中的stylus及stylus-loader版本問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目之安裝引入使用vconsole方式(生產(chǎn)環(huán)境不顯示)
在Vue2開(kāi)發(fā)中,引入vConsole可以為移動(dòng)端提供類似瀏覽器F12的調(diào)試工具,支持查看日志、網(wǎng)絡(luò)請(qǐng)求等功能,vConsole是一個(gè)輕量、可拓展的前端調(diào)試面板,與框架無(wú)關(guān),適用于多種前端框架,安裝方法包括npm和CDN兩種,可根據(jù)項(xiàng)目環(huán)境配置是否顯示調(diào)試面板2024-10-10
最近項(xiàng)目要用到百度地圖api,好久沒(méi)用到地圖,就百度了一番,下面這篇文章主要給大家介紹了關(guān)于vue3中使用百度地圖的簡(jiǎn)單步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06