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

ranwu 發布于2019-08-22 16:09 / 3506人閱讀

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

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

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

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

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

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

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

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

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

使用方法：
瀏覽器端直接應用css,js







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

webpack 開發引入方式

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

插件參數說明

{    
    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:"",       結束時間  （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:"", 此參數勿動 表示當前時間插件實例化對象
    mounted:()=>{}, 插件加載完成之后調用
    change:(fulltime,begintime,endtime)=>{}, 時間變更之后調用
    done:(fulltime,begintime,endtime)=>{}, 選擇完成之后調用
}

參數具體配置可參考demo文件

案例調用方式

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

    限定能選擇的最小最大區間
    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 參數

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

2.0.5 修復 double選擇器默認值

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

云服務器 GPU云服務器日歷插件 js日歷插件 php 日歷插件 js日歷插件視頻

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94092.html

Cordova創建系統日歷事件

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

snowLu 2019-08-23 13:57 評論0 收藏0
前端插件庫

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

高勝山 2019-08-26 13:44 評論0 收藏0
前端插件庫

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

shusen 2019-08-30 10:53 評論0 收藏0
學習實踐 - 收藏集 - 掘金

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

mikyou 2019-08-29 12:50 評論0 收藏0
VUE UI框架對比 element-ui 與 iView

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

ZHAO_ 2019-08-20 17:25 評論0 收藏0