成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

日歷插件zaneDate 不依賴任何第三方插件 使用簡(jiǎn)單 文檔完善

ranwu / 3516人閱讀

摘要：先來(lái)找圖看看時(shí)間選擇器的效果沒(méi)錯(cuò)就是這個(gè)吊樣，如果你不需要這個(gè)色調(diào)，你可以我的項(xiàng)目任意修改美美的色調(diào)。當(dāng)然也歡迎你給我提很多很多的讓我改不停。

先來(lái)找圖看看時(shí)間選擇器的效果：





沒(méi)錯(cuò)就是這個(gè)吊樣，如果你不需要這個(gè)色調(diào)，你可以fork我的github項(xiàng)目任意修改美美的色調(diào)。

當(dāng)然也歡迎你給我提很多很多的bug讓我改不停? 。

npm地址：https://www.npmjs.com/package...
github地址：https://github.com/wangweiang...
demo地址：http://www.seosiwei.com/zaneD...

說(shuō)明：
掉起插件DOM節(jié)點(diǎn)可以是input輸入框，也可以是其他任意閉合的html標(biāo)簽

此插件不依賴任何第三方插件，因此可以在任何地方多帶帶使用

插件不兼容低版本的IE瀏覽器，IE瀏覽器請(qǐng)慎重

暫時(shí)只支持單個(gè)時(shí)間段選擇，后期會(huì)推出多個(gè)時(shí)間段選擇方式

使用方法：
瀏覽器端直接應(yīng)用css,js







初始化
zaneDate({
    elem:"#zane-calendar",
})

webpack 開(kāi)發(fā)引入方式

const zaneDate = require("zane-calendar")
或
import zaneDate from "zane-calendar"




初始化
zaneDate({
    elem:"#zane-calendar",
})

gitHub代碼拉取下來(lái)運(yùn)行方式

git clone https://github.com/wangweianger/zane-data-time-calendar.git
npm install
npm run dev
npm run build

插件參數(shù)說(shuō)明

{    
    elem:"#zane-calendar",   控件的dom原生 注意：僅限制于id選擇器
    type:"day",   可選類型 day year month time oubleday doubleyear doublemonth doubletime
    lang:"cn",   可選擇語(yǔ)言類型 cn , en 
    width:280,  插件寬度配置
    format:"yyyy-MM-dd HH:mm:ss",  時(shí)間格式化
    begintime:"",  開(kāi)始時(shí)間  （單選擇器默認(rèn)選擇此項(xiàng)）
    endtime:"",       結(jié)束時(shí)間  （double選擇器需要）
    min:"",  可選取時(shí)間最小范圍 1900-10-01
    max: "",  可選取時(shí)間最大范圍 2099-12-31
    position:"fixed",  定位方式  暫時(shí)只支持 fixed
    event:"click",   事件方式 暫時(shí)只支持 click 
        zindex:100,  z-index的值
    showtime:true,  是否顯示選擇時(shí)間
    showclean:true,  是否顯示清除按鈕
    shownow:true,  是否顯示當(dāng)前按鈕
    showsubmit:true, 是否顯示提交按鈕
    haveBotBtns:true, 是否有底部按鈕列表
    calendarName:"", 此參數(shù)勿動(dòng) 表示當(dāng)前時(shí)間插件實(shí)例化對(duì)象
    mounted:()=>{}, 插件加載完成之后調(diào)用
    change:(fulltime,begintime,endtime)=>{}, 時(shí)間變更之后調(diào)用
    done:(fulltime,begintime,endtime)=>{}, 選擇完成之后調(diào)用
}

參數(shù)具體配置可參考demo文件

案例調(diào)用方式

    默認(rèn)完整選項(xiàng)
    zaneDate({
        elem:"#zane-calendar",
    })

    只選擇年月日
    zaneDate({
        elem:"#zane-calendar",
        showtime:false,
    })

    使用英文
    zaneDate({
        elem:"#zane-calendar",
        lang:"en",
    })

    只選擇年
    zaneDate({
        elem:"#zane-calendar",
        type:"year",
    })

    只選擇月
    zaneDate({
        elem:"#zane-calendar",
        type:"month",
    })

    只選擇時(shí)間
    zaneDate({
        elem:"#zane-calendar",
        type:"time",
    })

    格式化方式
    zaneDate({
        elem:"#zane-calendar",
        format:"yyyy年MM月dd日 HH時(shí)mm分ss秒",
    })

    限定能選擇的最小最大區(qū)間
    zaneDate({
        elem:"#zane-calendar",
        min:"2017-08-01",
        max:"2017-08-20",
    })

1.1.0 版本 新增double雙選擇時(shí)間配置

config.type  新增double類型  可選類型如下：
day year month time doubleday doubleyear doublemonth doubletime

雙日期范圍選擇

zaneDate({
    elem:"#demo21",
    type:"doubleday",
    showtime:false
})

雙年范圍選擇
zaneDate({
    elem:"#demo22",
    type:"doubleyear",
})

雙月范圍選擇
zaneDate({
    elem:"#demo23",
    type:"doublemonth",
})

雙時(shí)間選擇
zaneDate({
    elem:"#demo24",
    type:"doubletime",
})

1.2.0
doubleday類型新增選擇時(shí)間，支持時(shí)分秒選擇

double類型檢測(cè)距離右邊window邊線的距離，若不足，自動(dòng)排列為上下兩個(gè)日期

config.type doubleday支持選擇時(shí)間范圍

雙日期范圍選擇

zaneDate({
    elem:"#demo25",
    format:"yyyy-MM-dd HH:mm:ss",
    type:"doubleday",
    showtime:true
})

1.2.1 版本 新增z-index 參數(shù)

zaneDate({
    elem:"#zane-calendar",
    zindex:500,
})

2.0.5 修復(fù) double選擇器 默認(rèn)值

如果你有什么好的建議 或者疑問(wèn) 請(qǐng)給我留言吧。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94092.html

相關(guān)文章

  • Cordova創(chuàng)建系統(tǒng)日歷事件

    摘要：在制作一款打卡的時(shí)候有這么一個(gè)需求創(chuàng)建提醒到系統(tǒng)日歷中，也就是利用系統(tǒng)日歷來(lái)做事件的提醒，這么做的好處很明顯，無(wú)需處理提醒的細(xì)節(jié)，也無(wú)需后臺(tái)。 在制作一款打卡App的時(shí)候有這么一個(gè)需求 -- 創(chuàng)建提醒到系統(tǒng)日歷中，也就是利用系統(tǒng)日歷來(lái)做事件的提醒，這么做的好處很明顯，App無(wú)需處理提醒的細(xì)節(jié)，也無(wú)需后臺(tái)。這個(gè)App是基于Cordova開(kāi)發(fā)的，并沒(méi)有訪問(wèn)系統(tǒng)日歷的接口，我們只能通過(guò)插件來(lái)...

    snowLu 評(píng)論0 收藏0

  • 前端插件庫(kù)

    摘要：原文鏈接前端插件庫(kù)站點(diǎn)前端開(kāi)發(fā)文檔博客前端插件庫(kù)前端插件庫(kù)官網(wǎng)是的函數(shù)庫(kù)，目的是強(qiáng)化表格操作如搜索排序，并自動(dòng)加入組件引入表格中，使用非常靈活簡(jiǎn)便。由推出，靈活扎實(shí)的建議列表函數(shù)庫(kù)。 原文鏈接：前端插件庫(kù)站點(diǎn)：前端開(kāi)發(fā)文檔博客：前端插件庫(kù) 前端插件庫(kù) DataTables 官網(wǎng)：https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高勝山 評(píng)論0 收藏0

  • 前端插件庫(kù)

    摘要：原文鏈接前端插件庫(kù)站點(diǎn)前端開(kāi)發(fā)文檔博客前端插件庫(kù)前端插件庫(kù)官網(wǎng)是的函數(shù)庫(kù)，目的是強(qiáng)化表格操作如搜索排序，并自動(dòng)加入組件引入表格中，使用非常靈活簡(jiǎn)便。由推出，靈活扎實(shí)的建議列表函數(shù)庫(kù)。 原文鏈接：前端插件庫(kù)站點(diǎn)：前端開(kāi)發(fā)文檔博客：前端插件庫(kù) 前端插件庫(kù) DataTables 官網(wǎng)：https://www.datatables.net/ DataTables是jQuery的JavaScr...

    shusen 評(píng)論0 收藏0

  • 學(xué)習(xí)實(shí)踐 - 收藏集 - 掘金

    摘要：官網(wǎng)地址聊天機(jī)器人插件開(kāi)發(fā)實(shí)例教程一創(chuàng)建插件在系統(tǒng)技巧使你的更加專業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。我會(huì)簡(jiǎn)單基于的簡(jiǎn)潔視頻播放器組件前端掘金使用和實(shí)現(xiàn)購(gòu)物車場(chǎng)景前端掘金本文是上篇文章的序章，一直想有機(jī)會(huì)再次實(shí)踐下。 2道面試題：輸入U(xiǎn)RL按回車&HTTP2 - 掘金通過(guò)幾輪面試，我發(fā)現(xiàn)真正那種問(wèn)答的技術(shù)面，寫(xiě)一堆項(xiàng)目真不如去刷技術(shù)文章作用大，因此刷了一段時(shí)間的博客和掘金，整理下曾經(jīng)被...

    mikyou 評(píng)論0 收藏0

  • VUE UI框架對(duì)比 element-ui 與 iView

    摘要：而則是用到到指令結(jié)合的方式去生成，批量生成元素。表格操作列自定義渲染的時(shí)，使用的是的函數(shù)，直接在中插入對(duì)應(yīng)模板表格分頁(yè)都需要引入分頁(yè)組件配合使用兩者總體比較，要比簡(jiǎn)潔許多。 element VS iview(最近項(xiàng)目UI框架在選型 ，做了個(gè)分析， 不帶有任何利益相關(guān)）主要從以下幾個(gè)方面來(lái)做對(duì)比使用率（npm 平均下載頻率，組件數(shù)量，star, issue…)API風(fēng)格打包優(yōu)化與設(shè)計(jì)師友...

    ZHAO_ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<