亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

ranwu / 3582人閱讀

摘要：先來找圖看看時間選擇器的效果沒錯就是這個吊樣，如果你不需要這個色調(diào)，你可以我的項目任意修改美美的色調(diào)。當然也歡迎你給我提很多很多的讓我改不停。

先來找圖看看時間選擇器的效果：





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

當然也歡迎你給我提很多很多的bug讓我改不停? 。

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

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

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

插件不兼容低版本的IE瀏覽器，IE瀏覽器請慎重

暫時只支持單個時間段選擇，后期會推出多個時間段選擇方式

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







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

webpack 開發(fā)引入方式

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




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

gitHub代碼拉取下來運行方式

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

插件參數(shù)說明

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

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

案例調(diào)用方式

    默認完整選項
    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",
    })

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

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

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

1.1.0 版本 新增double雙選擇時間配置

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",
})

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

1.2.0
doubleday類型新增選擇時間，支持時分秒選擇

double類型檢測距離右邊window邊線的距離，若不足，自動排列為上下兩個日期

config.type doubleday支持選擇時間范圍

雙日期范圍選擇

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選擇器 默認值

如果你有什么好的建議 或者疑問 請給我留言吧。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/94092.html

相關(guān)文章

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

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

    snowLu 評論0 收藏0

  • 前端插件庫

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

    shusen 評論0 收藏0

  • 前端插件庫

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

    高勝山 評論0 收藏0

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

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

    mikyou 評論0 收藏0

  • VUE UI框架對比 element-ui 與 iView

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

    ZHAO_ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<