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

Myth丶恋晨 2021-11-10 04:32 1074阅读 0赞

**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
        });

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: /images/20211109/4e1b110ae63f47729ca9195ca7d2a59a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1074人围观）

还没有评论，来说两句吧...

相关阅读

相关 layDate日期插件的使用

于公司使用的是vue+bootstrap，所以在这里记录的是 *laydate 的*独立版本. **[官方插件下载以及实例][Link 1]** **[官方文档参考]...

川长思鸟来/ 2024年04月18日 16:41/ 0 赞/ 79 阅读

相关 layui-laydate时间日历控件详细示例

layui-laydate时间日历控件详细示例 ![426136e8363e68fc321f3d3551b0d579.png][] [豆趣编程][Link 1] 201

旧城等待，/ 2023年10月05日 18:09/ 0 赞/ 22 阅读

相关 layui的laydate控件的常用属性

目前使用的layui版，没有单独使用laydate。官网上的例子是每个属性单独设置的，我稍微整合了一下常用属性。引入了css和js以后 //初始化时间

约定不等于承诺〃/ 2023年02月25日 08:53/ 0 赞/ 18 阅读

相关 layui-laydate时间日历控件详细示例

![70][]![70 1][]![70 2][]![70 3][] layui下载地址：[http://www.layui.com/][http_www.layui.com

迷南。/ 2022年05月24日 08:07/ 0 赞/ 467 阅读

相关 layui laydate 时间控件一闪而过

问题：一个页面多次重载时间控件，并且都是不同页面，会导致时间控件绑定了，又被覆盖其他id的时间控件，又重新绑定上去。就会导致点击日期框，弹框一闪而过，从其他弹窗切换回来，又有

- 日理万妓/ 2022年05月21日 06:41/ 0 赞/ 426 阅读

相关 vue 引用时间插件laydate

步骤一：下载laydate插件，放到项目里，我的项目结构如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

淩亂°似流年/ 2022年03月29日 01:58/ 0 赞/ 392 阅读

相关 layui 添加第三方插件

关于 layui 添加第三方 JS 库在写公司项目时，需要将第三方 JS 库整合到 layui 中，具体操作如下：示例：[https://www.jians

本是古典何须时尚/ 2021年12月09日 07:37/ 0 赞/ 1045 阅读

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

1 去掉laydate自定义的mark标记，css代码如下： /去掉日历mark标记/ .laydate-day-mark::after{

Myth丶恋晨/ 2021年11月10日 04:32/ 0 赞/ 1075 阅读

相关 layui插件

https://www.layui.com 导航图标动画按钮表单选项卡进度条面板表格徽章时间线转载于:https://www.cnblo

野性酷女/ 2021年09月29日 12:44/ 0 赞/ 699 阅读

相关日历插件

html文件: <!DOCTYPE html> <html> <head lang="en"> <meta charset='utf-8'/

谁践踏了优雅/ 2021年07月24日 15:55/ 0 赞/ 713 阅读