SelectDate
功能描述
本模块是基于jquery手写开发的日历开始结束选择工具,规避掉现有原生模块的切换月份所造成的适配问题, 产出背景:原生模块以及百度可以搜到的日历模块都不能满足需求,顾自己手写了一个。
依赖的模块
无
快速使用
直接针对页面调用功能
//code
相关html 结构
<div id="rili"></div>
主要css样式
无
关键js接口
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/c.js"></script>
<script>
b.openZDdiy({
width: 300,//整个控件宽度
itemheight: 40,//每行日期的高度
daytextsize: 16,//日期的文字大小
id: "rili",//设置的布局
selectimg: 'img/zmcselect.png',//选中的背景图
leftimg: 'img/zmcleft.png',//上个月背景图
rightimg: 'img/zmcright.png',//下个月背景图
mainbac: '#FAFFF9',//整体背景色
titlebac: '#FDE102',//头部背景色
selectcolor: '#fff',//选中之后的文字的颜色
noselectcolor: '#000',//正常背景颜色
nousecolor: '#999',//不可用颜色
isfromtoday: true,//当天之前的是否不可以点击
datelong: 7,//最长可以选择几天
startime: '2019-07-29',//默认选中的开始时间
stoptime: '2019-08-01',//默认选中的结束时间
daterange: function(timearray, start, stop){
console.log(JSON.stringify(timearray) + "==" + start + "==" + stop);//如果超过了7天的话 返回的都是false
}
});
</script>
特别说明
- 在页面中定义一个div并赋值id为 rili。
- 其他所有参数均在方法中进行配置
- 联系信息:zd_logbug@163.com