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>

特别说明

  1. 在页面中定义一个div并赋值id为 rili。
  2. 其他所有参数均在方法中进行配置
  3. 联系信息:zd_logbug@163.com