插件layDate----日期插件的使用

Posted 2020-10-21 dqy95

layDate ----JS日期与时间的组件，是 layui 独立维护的三大组件之一。不依赖第三方库，同时兼容所有的浏览器。使用方法也比较简单，拓展功能很方便。

使用教程可参考官方文档：http://www.layui.com/laydate/

使用方法：

1、引入js文件（路径使用自己的路径）

<script src="/laydate/laydate.js"></script>

2、绑定控件

<input type="text" id="test1">

<script>
//执行一个laydate实例
laydate.render({
  elem: \'#test1\' //指定元素
});
</script>

这样id为test1的input控件现在就是一个日期控件了。

 添加自定义标记

这是官方文档给出的示例：

//开启公历节日
laydate.render({
  elem: \'#test17\'
  ,calendar: true
});
//自定义重要日
laydate.render({
  elem: \'#test18\'
  ,mark: {
    \'0-10-14\': \'生日\'
    ,\'0-12-31\': \'跨年\' //每年的日期
    ,\'0-0-10\': \'工资\' //每月某天
    ,\'0-0-15\': \'月中\'
    ,\'2017-8-15\': \'\' //如果为空字符，则默认显示数字+徽章
    ,\'2099-10-14\': \'呵呵\'
  }
  ,done: function(value, date){
    if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
      alert(\'这一天是：中国人民抗日战争胜利72周年\');
    }
  }
}); 

但是我想在日期中添加自定义的icon作为标记：如下图

 因为官方文档中的案例是用mark中的属性值来替代日期控件中的数字显示，若我想在这个日期中添加icon就可以用html来作为mark中属性值：

for (var i = 0; i < results.length; i++) {//results为存储日期的数组[\'2017-08-09\',\'2017-09-11\',\'2017-09-24\',\'2018-01-12\']
        var sdate = results[i]; //记录时间
        var date_array = sdate.split("-");
        var date_day = date_array[2]; //取日期的天比如2017-09-11取11
        mark[sdate] = \'<span style="color:#666;font-size: 14px;"><i class="iconfont icon-rizhi" style="color:rgba(238, 143, 92, 0.8); position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>\' + date_day + \'</span>\';
    }添加icon和日期号，作为mark的属性值
 //初始日期控件
    laydate.render({
        elem: \'#logdate\',
        max: new Date().toLocaleDateString(),//取当前日期为最大日期
        mark: mark,
        value: firstDate || new Date(),
        done: function(value, date, endDate) {
            console.log(value);//选完日期后调用的函数
        }
    });

mark的一些问题

1、因为laydate的样式中默认mark标记有小圆点的，如果要去掉那么就要在js中修改去除class或者修改css文件中对应的样式；

2、当你要重新给日期控件添加新的mark标记时，需要将原来的日期控件删除，然后重新绑定；

　　　　　　　　　　　　<div class="date-select">
                        <span class="place-title" id="dateSplittxt">当前日期：</span>
                        <input type="text" class="form-control" id="dateSplit" />
                    </div>


//日期控件清空mark
                            $("#dateSplit").remove();
                            $("#dateSplittxt").after(\'<input type="text" class="form-control" id="dateSplit" />\');
                            laydate.render({
                                elem: \'#dateSplit\', //指定元素
                                value: firstDate,
                                mark: mark,
                                max: new Date().toLocaleDateString(),
                                done: function (value, date, endDate) {
                                    that.getSplitPhoto(value, proid, placeid);
                                }
                            });

　　　　

时间段

官方文档中有选择范围的案例，但是只有一个日期控件：

laydate.render({
  elem: \'#test16\'
  ,type: \'datetime\'
  ,range: \'到\'
  ,format: \'yyyy年M月d日H时m分s秒\'
}); 

那么需要将两个日期控件关联起来选择时间段，就可以用下面的方法：

在绑定日期控件的时候就为其命名，使用它在另一个日期控件中设置最大/最小值。

 //初始化开始日期控件
    var start = laydate.render({
        elem: \'#LogdateStart\',
        max: new Date().toLocaleDateString(),
        done: function(value, date, endDate) {
            end.config.min = {
                year: date.year,
                month: date.month - 1,
                date: date.date
            }; //重置结束日期最小值
        }
    });
    //初始化结束日期控件
    var end = laydate.render({
        elem: \'#LogdateEnd\',
        max: new Date().toLocaleDateString(),
        done: function(value, date, endDate) {
            start.config.max = {
                year: date.year,
                month: date.month - 1,
                date: date.date
            }; //重置开始日期最大值
        }
    });

 以上，是我在使用laydate过程中遇到的一些问题解决方法。如果有其他解决方法，或问题，欢迎留言交流。