日曆插件zaneDate 不依賴任何第三方插件 簡單高效

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

     

     

 

沒錯就是這個吊樣，若是你不須要這個色調，你能夠fork個人github項目任意修改美美的色調。

固然也歡迎你給我提不少不少的bug讓我改不停😃 。

npm地址：https://www.npmjs.com/package/zane-calendar

github地址：https://github.com/wangweianger/zane-data-time-calendar

demo地址：http://www.seosiwei.com/zaneDate/index.html

 

說明：

• 掉起插件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,
})

　　

1.2.2 版本 完善日曆插件文檔

2.0.9 版本 修復單頁面BUG，修復safair蘋果信息 相關BUG

2.1.0 版本 修復雙選擇器有默認值的bug，更新demo圖片

2.2.0 版本 修復上一月下一月跳月問題

2.2.3 版本 修復點擊屢次重複生成日曆問題

2.2.4 版本 增長結束時間大於開始時間的判斷

2.2.5 版本 增長雙選擇器區間選中樣式效果

 

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