Layui---日历插件Laydate(三)

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] = '' + date_day + '';
    }
    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] = '' + date_day + '';
    }
    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] = '' + date_day + '';
    }

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

 

Layui---日历插件Laydate(三)_第1张图片

 

你可能感兴趣的:(前端,LayDate,layui)