zaneData PC端日历插件

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)=>{},   选择完成之后调用
}

承载元素

演示,详见:

http://www.seosiwei.com/zaneDate/index.html

猜你喜欢

转载自blog.csdn.net/QQ_Empire/article/details/82669063
今日推荐