PC端时间日历插件功能齐全无依赖-白红宇

时间日历插件，网上有很多版本，功能强大的，功能简单的数不尽数，那为什么我还要写一个日历插件呢？

很认真的告诉你：

我手痒了，就是闲下来随便敲敲。

开发一个功能齐全的日期选择插件

根据自己的业务需求不断优化更新

好进入正题简单的阐述一下插件的使用方法，如果你不是傻瓜，肯定会秒懂它的使用。

备注：由于此次开发用的时间很短，还有一些功能没有实现后期会慢慢的加上：例如节日显示，皮肤功能等.... ，当然代码也需要精简。

先来找图看看时间选择器的效果：

没错就是这个吊样，如果你不需要这个色调，你可以fork我的github项目任意修改美美的色调。

当然也欢迎你给我提很多很多的bug让我改不停? 。

npm地址：

github地址：

demo地址：

说明：

掉起插件DOM节点可以是input输入框，也可以是其他任意闭合的html标签

此插件不依赖任何第三方插件，因此可以在任何地方单独使用

插件不兼容低版本的IE浏览器，IE浏览器请慎重

暂时只支持单个时间段选择，后期会推出多个时间段选择方式

使用方法：

浏览器端直接应用css,js


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

webpack 开发引入方式

const zaneDate = require('zane-calendar')或import zaneDate from 'zane-calendar'
    初始化zaneDate({	elem:'#zane-calendar',})复制代码

gitHub代码拉取下来运行方式

git clone https://github.com/wangweianger/zane-data-time-calendar.gitnpm installnpm run devnpm 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选择器默认值

如果你有什么好的建议或者疑问请给我留言吧。

关注我的博客：

原文地址：