入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

laydate 插件 基本使用及开始及结束时间限制

创建时间:2017-05-06 投稿人: 浏览次数:5288

页面工作中,时间日期插件必不可少,最近用了 layDate 日期组件,简洁易用,样式清爽,记录下。

核心方法:laydate(options);
                options是一个对象,它包含了以下key: "默认值"
                      elem: "#id",                        // 日期显示元素选择器,laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 "#id .class"
                      event: "click",                    // 触发事件。如果没有传入event,则按照默认的click
                      format: "YYYY-MM-DD hh:mm:ss",    // 日期格式
                      istime: false,                        // 是否开启时间选择
                      isclear: true,                        // 是否显示清空
                      istoday: true,                    // 是否显示今天
                      issure: true,                        // 是否显示确认
                      festival: true,                    // 是否显示节日
                      min: "1900-01-01 00:00:00",            // 最小日期
                      max: "2099-12-31 23:59:59",        // 最大日期
                      start: "2014-6-15 23:00:00",            // 开始日期
                      fixed: false,                        // 是否固定在可视区域
                      zIndex: 99999999,                // css z-index
                      choose: function(dates){            // 选择好日期的回调
                  }
二、其它方法/属性
                  laydate.v            // 获取laydate版本号
                  laydate.skin(lib);    // 加载皮肤,参数lib为皮肤名             
                  /*
                     layer.now支持多类型参数。timestamp可以是前后若干天,也可以是一个时间戳。format为日期格式,为空时则采用默认的“-”分割。
                      如laydate.now(-2)将返回前天,laydate.now(3999634079890)将返回2096-09-28
                 */
                  layer.now(timestamp, format);   // 该方法提供了丰富的功能,推荐灵活使用。          
                  laydate.reset();                // 重设日历控件坐标,一般用于页面dom结构改变时。无参


初始化方法:

可以直接在input中使用 

<input onclick="laydate({istime: true, format: "YYYY-MM-DD hh:mm:ss"})">

也可以直接在外部js中调用

<input id="hello" class="laydate-icon">
<script>
laydate({
  elem: "#hello", //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 "#id .class"
  event: "focus" //响应事件。如果没有传入event,则按照默认的click
});

如果需要input框默认显示当前时间 可以设置value=laydate.now();


通常我们在做时间搜索的时候会要求做起始时间限制,网上比较常见的一个方法是

$(function(){  
    var start = {  
        elem: "#start", //选择ID为START的input  
        format: "YYYY/MM/DD hh:mm:ss", //自动生成的时间格式  
        min: laydate.now(), //设定最小日期为当前日期  
        max: "2099-06-16 23:59:59", //最大日期  
        istime: true, //必须填入时间  
        istoday: false,  //是否是当天  
        start: laydate.now(0,"YYYY/MM/DD hh:mm:ss"),  //设置开始时间为当前时间  
        choose: function(datas){  
             end.min = datas; //开始日选好后,重置结束日的最小日期  
             end.start = datas //将结束日的初始值设定为开始日  
        }  
    };  
    var end = {  
        elem: "#end",  
        format: "YYYY/MM/DD hh:mm:ss",  
        min: laydate.now(),  
        max: "2099-06-16 23:59:59",  
        istime: true,  
        istoday: false,  
        start: laydate.now(0,"YYYY/MM/DD hh:mm:ss"),  
        choose: function(datas){  
            start.max = datas; //结束日选好后,重置开始日的最大日期  
        }  
    };  
    laydate(start);  
    laydate(end);  
    })  

但是这个方法会有一个问题,就是点击 组件自带的“清除”时,并没有触发choose事件,另一个时间的限制没有解除

所以放弃组件本身choosen方法使用原生点击时间限制,这样就解决了上一个问题

    $("#startDate").click(function(){
        var end=$("#endDate").val();
        var obj={
            elem: "#startDate"
        };
        end&&(obj.max=end);
        laydate(obj);
    });
    $("#endDate").click(function(){
        var start=$("#startDate").val();
        var obj={
            elem: "#endDate"
        };
        start&&(obj.min=start);
        laydate(obj);
    });



声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
  • 上一篇:没有了
  • 下一篇:没有了
未上传头像