PC端時間日曆插件 功能齊全 無依賴

時間日曆插件，網上有不少版本，功能強大的，功能簡單的數不盡數，那爲何我還要寫一個日曆插件呢？

很認真的告訴你：

• 我手癢了，就是閒下來隨便敲敲。
  
• 開發一個功能齊全的日期選擇插件
• 根據本身的業務需求不斷優化更新

好 進入正題 簡單的闡述一下插件的使用方法，若是你不是傻瓜，確定會秒懂它的使用。

備註：因爲這次開發用的時間很短，還有一些功能沒有實現後期會慢慢的加上： 例如 節日顯示，皮膚功能等.... ，固然代碼也須要精簡。

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

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

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

npm地址：www.npmjs.com/package/zan…

github地址：github.com/wangweiange…

demo地址：www.seosiwei.com/zaneDate/in…

說明：

• 掉起插件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選擇器 默認值

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

關注個人博客：zane的我的博客

原文地址：日曆插件zaneDate 不依賴任何第三方插件 使用簡單