zaneData是一个完全由原生javascript封装的PC端日历插件,不依赖任何第三方插件,功能全面,使用简单.
http://www.seosiwei.com/zaneDate/index.html
使用方式
浏览器端使用
<!-- 引入相应的js和css -->
<link href="./dist/zane-calendar.min.css">
<script src="./dist/zane-calendar.min.js"></script>
<!-- 需要加时间插件的输入框 -->
<input type="" name="" id="zane-calendar">
初始化
zaneDate({
elem:'#zane-calendar',
})
Webpack 使用
<!-- 安装依赖 -->
npm install zane-calendar --save-dev
const zaneDate = require('zane-calendar') 或
import zaneDate from 'zane-calendar'
<!-- 需要加时间插件的输入框 -->
<input type="" name="" id="zane-calendar">
初始化
zaneDate({
elem:'#zane-calendar',
})
所有参数说明(组合随意)
{
elem:'#zane-calendar', 控件的dom原生 注意:仅限制于id选择器(必填参,其他参数皆为可选参)
type:'day', 可选类型 day year month time doubleday doubleyear doublemonth doubletime
lang:'cn', 可选择语言类型 cn , en
width:280, 插件宽度配置 250 <= X <= 500
height:300, 插件高度配置 250 <= X <= 350
behindTop:10, 插件与输入框的距离
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, 是否有底部按钮列表
mounted:()=>{}, 插件加载完成之后调用
change:(fulltime,begintime,endtime)=>{}, 时间变更之后调用
done:(fulltime,begintime,endtime)=>{}, 选择完成之后调用
}
承载元素
演示,详见: