【插件】layDate----日期插件的使用（自定义mark标记，两个日期控件关联）

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] = '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过程中遇到的一些问题解决方法。如果有其他解决方法，或问题，欢迎留言交流。

转载于:https://www.cnblogs.com/qiuyueding/p/8296776.html