vue日期組件 支持vue1.0和2.0
vue-datetime
使用vue編寫的時間組件，小巧實(shí)用，支持vue1.0，vue2.0
v1.0 功能:
1.支持同時展開多個日期選擇框
2.支持單擊選中和取消，可配置單選和多選
3.支持雙擊啟動連續(xù)選擇，支持正向連續(xù)，逆向連續(xù)和跳躍不可選日期
4.支持在日期選擇框內(nèi)直接切換月份
5.支持初始化不可點(diǎn)擊日期(剩余的可選擇)
6.支持初始化已選擇日期(已選擇日期高亮)
7.支持初始化可選擇日期(剩余的不可選擇)
8.同時初始化不可點(diǎn)擊和可點(diǎn)擊日期，將以可點(diǎn)擊日期為準(zhǔn)
v1.1:
1.修復(fù)已知bug
v1.2:
1.重構(gòu)代碼，使代碼更優(yōu)雅和簡潔
2.性能優(yōu)化
3.完善功能，使多時間框和原地切換時間共存
4.支持不傳入options 和datelist的使，默認(rèn)顯示當(dāng)前日期并且可原地切換日期
用法：<edit-time :datelist='datelist' :options='options'></edit-time>
datelist = [
{
year: undefined, // 日期初始年, 默認(rèn)當(dāng)前年
month: undefined, // 日期初始月, 默認(rèn)當(dāng)前月
multiSelect: true, // 日期是否可多選
switch: false // 當(dāng)前日期框是否支持切換年月份
}
]
options = {
disable: [], // 不可選日期，格式: '2016-01-01'
// enable: [], // 可選日期，格式: '2016-01-01'，enable和disable只能有一個，如果都有默認(rèn)用enable
selected: [], // 已選擇的day，格式: '2016-01-01'
callback: undefined // 點(diǎn)擊日期回調(diào)函數(shù), callback(selectDateList)
}
github源碼地址；https://github.com/Stephen1993/vue-datetime
圖示:
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
element-plus日歷(Calendar)動態(tài)渲染以及避坑指南
這篇文章主要給大家介紹了關(guān)于element-plus日歷(Calendar)動態(tài)渲染以及避坑指南的相關(guān)資料,這是最近幫一個后端朋友處理一個前端問題,elementUI中calendar日歷組件內(nèi)容進(jìn)行自定義顯示,實(shí)現(xiàn)類似通知事項(xiàng)的日歷效果,需要的朋友可以參考下2023-08-08
vant自定義引入iconfont圖標(biāo)及字體的方法步驟
因?yàn)関antUI給的圖標(biāo)非常少,為了滿足自己的需求,就應(yīng)該找到一種方法來向vant添加自己自定義的圖標(biāo),對于自定義圖標(biāo)我第一時間想到的就是阿里的iconfont矢量圖庫,這篇文章主要給大家介紹了關(guān)于vant自定義引入iconfont圖標(biāo)及字體的方法步驟,需要的朋友可以參考下2023-09-09
vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝
這篇文章主要為大家介紹了vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決
這篇文章主要介紹了vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決方案，具有很好的參考價(jià)值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問題
這篇文章主要介紹了關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
elementplus el-table(行列互換)轉(zhuǎn)置的兩種方法
本文主要介紹了elementplus el-table(行列互換)轉(zhuǎn)置,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
vue 實(shí)現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式
這篇文章主要介紹了vue 實(shí)現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue2前端調(diào)用WebSocket有消息進(jìn)行通知代碼示例
在Vue項(xiàng)目中實(shí)現(xiàn)全局的消息鏈接監(jiān)聽主要涉及到了WebSocket技術(shù),這是一種雙向通信協(xié)議,允許客戶端與服務(wù)器之間實(shí)時、高效地交換數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2前端調(diào)用WebSocket有消息進(jìn)行通知的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue?contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問題及解決方法
這篇文章主要介紹了使用vue-contextmenujs鼠標(biāo)右鍵菜單時，當(dāng)高度不夠時顯示不全的問題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問題，但是如果組件升級了，想要使用最新升級后的組件，還要再次修改代碼，需要的朋友可以參考下2022-07-07
Vue注冊模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08