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)文章
這篇文章主要為大家詳細(xì)介紹了vue使用echarts圖表的詳細(xì)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果
這篇文章主要介紹了vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，一個(gè)簡(jiǎn)單的組件示例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue 實(shí)現(xiàn)穿梭框功能的詳細(xì)代碼
本文給大家介紹Vue 實(shí)現(xiàn)穿梭框功能，代碼分為css，html和js代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-10-10
vue項(xiàng)目的html如何引進(jìn)public里面的js文件
這篇文章主要介紹了vue項(xiàng)目的html如何引進(jìn)public里面的js文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue如何根據(jù)網(wǎng)站路由判斷頁(yè)面主題色詳解
這篇文章主要給大家介紹了關(guān)于vue如何根據(jù)網(wǎng)站路由判斷頁(yè)面主題色的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue-router中scrollBehavior的巧妙用法
本文給大家介紹vue-router中scrollBehavior的妙用,文中給大家提到了兩種解決方案，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue之封裝公用變量以及實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了深入理解vue中slot與slot-scope的具體使用,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01