vue日期組件 支持vue1.0和2.0
vue-datetime
使用vue編寫(xiě)的時(shí)間組件,小巧實(shí)用,支持vue1.0,vue2.0
v1.0 功能:
1.支持同時(shí)展開(kāi)多個(gè)日期選擇框
2.支持單擊選中和取消,可配置單選和多選
3.支持雙擊啟動(dòng)連續(xù)選擇,支持正向連續(xù),逆向連續(xù)和跳躍不可選日期
4.支持在日期選擇框內(nèi)直接切換月份
5.支持初始化不可點(diǎn)擊日期(剩余的可選擇)
6.支持初始化已選擇日期(已選擇日期高亮)
7.支持初始化可選擇日期(剩余的不可選擇)
8.同時(shí)初始化不可點(diǎn)擊和可點(diǎn)擊日期,將以可點(diǎn)擊日期為準(zhǔn)
v1.1:
1.修復(fù)已知bug
v1.2:
1.重構(gòu)代碼,使代碼更優(yōu)雅和簡(jiǎn)潔
2.性能優(yōu)化
3.完善功能,使多時(shí)間框和原地切換時(shí)間共存
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只能有一個(gè),如果都有默認(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組件的教程,請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue日期時(shí)間選擇器組件使用方法詳解
- vue-calendar-component 封裝多日期選擇組件的實(shí)例代碼
- vue使用自定義事件的表單輸入組件用法詳解【日期組件與貨幣組件】
- vue實(shí)現(xiàn)移動(dòng)端輕量日期組件不依賴(lài)第三方庫(kù)的方法
- 基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)自定義日期組件功能的實(shí)例代碼
- Vue無(wú)限滑動(dòng)周選擇日期的組件的示例代碼
- 詳解vue移動(dòng)端日期選擇組件
- 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
- vue左右滑動(dòng)選擇日期組件封裝的方法
相關(guān)文章
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06vue代理請(qǐng)求之Request?failed?with?status?code?404問(wèn)題及解決
這篇文章主要介紹了vue代理請(qǐng)求之Request?failed?with?status?code?404問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07vue對(duì)插件(iview,elementui,treeselect)樣式的局部修改方式
這篇文章主要介紹了vue對(duì)插件(iview,elementui,treeselect)樣式的局部修改方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07前端vue項(xiàng)目如何使用Decimal.js做加減乘除求余運(yùn)算
decimal.js是使用的二進(jìn)制來(lái)計(jì)算的,可以更好地實(shí)現(xiàn)格化式數(shù)學(xué)運(yùn)算,對(duì)數(shù)字進(jìn)行高精度處理,使用decimal類(lèi)型處理數(shù)據(jù)可以保證數(shù)據(jù)計(jì)算更為精確,這篇文章主要給大家介紹了關(guān)于前端vue項(xiàng)目如何使用Decimal.js做加減乘除求余運(yùn)算的相關(guān)資料,需要的朋友可以參考下2024-05-05八個(gè)一看就覺(jué)得很棒的Vue開(kāi)發(fā)技巧分享
在用Vue開(kāi)發(fā)的這幾年里,我學(xué)到了很多有用的技巧,所以這篇文章主要給大家分享介紹了八個(gè)一看就覺(jué)得很棒的Vue開(kāi)發(fā)技巧,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04Vue.js使用$.ajax和vue-resource實(shí)現(xiàn)OAuth的注冊(cè)、登錄、注銷(xiāo)和API調(diào)用
這篇文章主要介紹了 Vue.js使用$.ajax和vue-resource實(shí)現(xiàn)OAuth的注冊(cè)、登錄、注銷(xiāo)和API調(diào)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05vue實(shí)現(xiàn)的請(qǐng)求服務(wù)器端API接口示例
這篇文章主要介紹了vue實(shí)現(xiàn)的請(qǐng)求服務(wù)器端API接口,結(jié)合實(shí)例形式分析了vue針對(duì)post、get、patch、put等請(qǐng)求的封裝與調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2019-05-05