layui之日历插件laydate-----(三)自定义日期mark

1  去掉laydate自定义的mark标记,css代码如下:

        /*去掉日历mark标记*/
        .laydate-day-mark::after{   
            width: 0%;
            height: 0%;
        }

2  自定义mark,js代码如下:

    var results1 = ['2019-08-01','2019-08-02','2019-08-05'];  //颜色设置为蓝色
    var results2 = ['2019-07-20','2019-07-21','2019-07-22'];  //颜色设置为橘色
    var results3 = ['2019-07-15','2019-07-16','2019-07-17'];  //颜色设置为粉色
    var marks = [];  

    for (var i = 0; i < results1.length; i++) { 
        var sdate = results1[i];            //获取每个具体时间
        var date_array = sdate.split("-");  //分割成数组
        var date_day = date_array[2];       //取日期的天  比如 2017-09-11 取11
        //将具体日期作为marks的属性值,不是数字i
        marks[sdate] = '<span style="color:#27A5E2;font-size: 14px;"><i class="iconfont icon-rizhi" style="color:#27A5E2; position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + '</span>';
    }
    for (var i = 0; i < results2.length; i++) { 
        var sdate = results2[i];            //获取每个具体时间
        var date_array = sdate.split("-");  //分割成数组
        var date_day = date_array[2];       //取日期的天  比如 2017-09-11 取11
        //将具体日期作为marks的属性值,不是数字i
        marks[sdate] = '<span style="color:orange;font-size: 14px;"><i class="iconfont icon-rizhi" style="color:orange; position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + '</span>';
    }
    for (var i = 0; i < results3.length; i++) { 
        var sdate = results3[i];            //获取每个具体时间
        var date_array = sdate.split("-");  //分割成数组
        var date_day = date_array[2];       //取日期的天  比如 2017-09-11 取11
        //将具体日期作为marks的属性值,不是数字i
        marks[sdate] = '<span style="color:pink;font-size: 14px;"><i class="iconfont icon-rizhi" style="color:pink; position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + '</span>';
    }

    //初始日期控件
    laydate.render({
        elem: '#calendar-control',                     //绑定日历控件
        position: 'static',
        theme: '#0E42ED',                              //主题颜色
        showBottom: false,                              //去掉日历下面的一行按钮
        change: function (value, date) {                 //监听日期被切换,触发此函数
            //lay('#calendar-date').html(value);       
        },
        mark: marks
    });

发布了62 篇原创文章 · 获赞 25 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_39115469/article/details/98170457