PC端時間日曆外掛 功能齊全 無依賴

zane1發表於2017-12-19

時間日曆外掛，網上有很多版本，功能強大的，功能簡單的數不盡數，那為什麼我還要寫一個日曆外掛呢？

很認真的告訴你：

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

好 進入正題 簡單的闡述一下外掛的使用方法，如果你不是傻瓜，肯定會秒懂它的使用。

備註：由於此次開發用的時間很短，還有一些功能沒有實現後期會慢慢的加上： 例如 節日顯示，皮膚功能等.... ，當然程式碼也需要精簡。

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

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 不依賴任何第三方外掛 使用簡單


相關文章