原生js實現日期選擇器插件

原生js實現日期選擇器插件

前言

距離本身上次寫插件差很少半年了。公司技術棧都是用框架，調解下口味就寫了此原生插件。由於本意是想兼容到ie9就不用es6語法寫了。前段時間在看vue源碼受了點啓發，本插件有點接近數據驅動視圖更新的響應式渲染。若是但願有更多功能的，可在下方留言，我儘可能擴展！若是你有須要或者喜歡的話，能夠給我github來個star 😆

倉庫地址

在線預覽

預覽

準備

首先在頁面中引入css、js文件(文件在個人github，如何引入可看github示例html)

在頁面中寫上以下代碼:

Calendar.create({
    classN: 'calendar-item', // 這裏的calendar-item可隨意填 不須要跟我同樣
    callBack: function(bindElem, dateObj) {
        // bindElem: 該控件綁定的元素
        // dateObj: 選中的年、月、日 如： {year: 2018, month: 8, date: 12}

        // 用戶可經過bindElem和dateObj搞事情啦 😆
        bindElem.innerHTML = dateObj.year + '-' + dateObj.month + '-' + dateObj.date;
    }
})

String: classN:參數填入你要綁定日期控件的元素。本插件初始化的時候，會根據用戶提供的 classN類名生成相應個數

Function: callBack:bindElem: 該控件綁定的元素,dateObj: 選中的年、月、日 如： {year: 2018, month: 8, date: 12}。經過返回參數，讓用戶在回調函數中經過回調參數作操做，給用戶更高的自由度。
若是須要更多回調方法，我會盡可能擴展

結尾

若有什麼功能須要增長的，可在評論區留言，我儘可能知足。若有什麼疏忽或錯誤，但願您指出。我會盡早修改，以避免誤導他人。