el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實(shí)現(xiàn)代碼
更新時(shí)間：2024年06月21日 14:44:09 作者：代碼搬運(yùn)媛
接到這樣的需求,日期篩選,但限制只能選擇同一個(gè)月的數(shù)據(jù),故此應(yīng)該去掉右側(cè)月份面板,今天通過(guò)本文給大家分享el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧
需求
日期篩選，但限制只能選擇同一個(gè)月的數(shù)據(jù)，故此應(yīng)該去掉右側(cè)月份面板。
實(shí)現(xiàn)
主要是通過(guò) css 樣式實(shí)現(xiàn)：
<style>
/* 隱藏右邊日期面板 */
.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-table,
.el-picker-panel__content.el-date-range-picker__content.is-right
.el-date-range-picker__header
div {
display: none;
}
.el-picker-panel__content.el-date-range-picker__content.is-right
.el-date-range-picker__header {
width: 60px;
top: -331px;
left: 230px;
}
/* 設(shè)置整體日期面板的寬度 */
.el-picker-panel.el-date-range-picker.el-popper {
width: 322px;
}
/* 隱藏中間線段 */
.el-date-range-picker__content.is-left {
border-right: none;
}
/* 左邊日期面板寬度 */
.el-picker-panel__content {
width: 63% !important;
}
</style>實(shí)現(xiàn)效果
到此這篇關(guān)于el-date-picker 選擇日期范圍只保存左側(cè)日期面板的文章就介紹到這了,更多相關(guān)el-date-picker 選擇日期范圍內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實(shí)戰(zhàn)篇
這篇文章主要介紹了詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實(shí)戰(zhàn)篇，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
下面小編就為大家分享一篇基于Vuejs的搜索匹配功能實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue如何實(shí)現(xiàn)多頁(yè)面配置以及打包方式
這篇文章主要介紹了Vue如何實(shí)現(xiàn)多頁(yè)面配置以及打包方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue 動(dòng)態(tài)添加的路由頁(yè)面刷新時(shí)失效的原因及解決方案
這篇文章主要介紹了vue動(dòng)態(tài)添加的路由頁(yè)面刷新時(shí)失效的原因及解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
平常使用Vue開發(fā)時(shí),一個(gè)項(xiàng)目中多個(gè)地方需要用到的相同組件通常我們會(huì)封裝為一個(gè)公共組件,所以我們可以將封裝好的組件打包發(fā)布至npm,本文主要介紹了vue組件發(fā)布成npm包,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
vue+AI智能機(jī)器人回復(fù)功能實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue+AI智能機(jī)器人回復(fù)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
Vue預(yù)渲染：prerender-spa-plugin生成靜態(tài)HTML與vue-meta-info更新meta
Vue.js中,prerender-spa-plugin和vue-meta-info插件的結(jié)合使用,提供了解決SEO問(wèn)題的方案,prerender-spa-plugin通過(guò)預(yù)渲染技術(shù)生成靜態(tài)HTML,而vue-meta-info則能動(dòng)態(tài)管理頁(yè)面元數(shù)據(jù),本文將探討如何使用這兩個(gè)工具優(yōu)化Vue.js項(xiàng)目的SEO表現(xiàn),包括安裝、配置及注意事項(xiàng)2024-10-10
vue3前端導(dǎo)出excel表格的兩種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue3前端導(dǎo)出excel表格的兩種實(shí)現(xiàn)方法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-11-11
發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用實(shí)例詳解
訂閱發(fā)布模式定義了一種一對(duì)多的依賴關(guān)系，讓多個(gè)訂閱者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象。這篇文章主要介紹了發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了詳解vue掛載到dom上會(huì)發(fā)生什么，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01