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

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

沒錯就是這個吊樣，若是你不須要這個色調，你能夠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

<link href="./dist/zane-calendar.css">
<script src="./dist/zane-calendar.js"></script>

<!-- 須要加時間插件的輸入框 -->
<input type="text" name="" id="zane-calendar">

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

webpack 開發引入方式

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

<!-- 須要加時間插件的輸入框 -->
<input type="text" name="" id="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選擇器 默認值

若是你有什麼好的建議 或者疑問 請給我留言吧。