<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 doubletimelang:'cn',   可选择语言类型 cn , en width:280,  插件宽度配置format:'yyyy-MM-dd HH:mm:ss',  时间格式化begintime:'',  开始时间  （单选择器默认选择此项）endtime:'',       结束时间  （double选择器需要）min:'',  可选取时间最小范围 1900-10-01max: '',  可选取时间最大范围 2099-12-31position:'fixed',  定位方式  暂时只支持 fixedevent:'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 不依赖任何第三方插件 使用简单