layui laydate 自定义mark

layui laydate 自行定义mark

在日历上标注区别签到过和未签到过的，效果如图：

要写个日历的，最后选择了layui上面的laydate日期和时间组件，我的需求上面不需要选择日期啥的，和日历一样，做个展示，
这里仅下载layDate就好，不用将lauui 全部下载。
文档的话移步： https://www.layui.com/laydate/

yqdArr和wqdArr是后端传过来的，写这边博客的时候还没对接口呢，只是静态的页面，所以就var了数组放着。

//已签到
  var yqdArr = ['2021-06-09','2021-06-10','2021-06-11','2021-06-12'] //已签到
  var mark1 = {}   //已签到
  for (var i = 0; i < yqdArr.length; i++) {
    var sdate = yqdArr[i]; //记录时间
    var date_array = sdate.split("-");
    var date_day = date_array[2]; //取日期的天
    mark1[sdate] = '<span class="yqd-box" style="color:#333;font-size: 14px;"><i class="" style="color:rgba(238, 143, 92, 0.8); position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + '</span>';
  }
  //未签到
  var wqdArr = ['2021-06-04','2021-06-05','2021-06-06',] //未签到
  var mark2 = {} //未签到
  for (var i = 0; i < wqdArr.length; i++) {
    var sdate = wqdArr[i]; //记录时间
    var date_array = sdate.split("-");
    console.log('date_array',date_array);
    var date_day = date_array[2]; //取日期的天
    console.log('date_day',date_day);
    mark2[sdate] = '<span class="wqd-box" style="color:#333;font-size: 14px;"><i class="" style="color:rgba(238, 143, 92, 0.8); position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + '</span>';
  }         
  var mark = {...mark1,...mark2};
  // console.log('mark',mark);
  //嵌套在指定容器中
  laydate.render({
    elem: '#calendar'
    ,position: 'static'
    ,showBottom: false   //不显示底部栏
    ,isInitValue: true //是否允许填充初始值，默认为 true 与value配合使用
    ,isPreview: false //禁用面板左下角选择值的预览，默认 true
    ,mark: mark
    // ,mark: {
    //   '0-6-14': '生日'  //每年的日期,0 即代表每一年
    //   ,'0-0-10': '工资' //每年的每个月10号
    //   ,'2021-6-19': '' //具体日期
    //   ,'2021-6-20': '' //具体日期
    //   ,'2021-6-21': '未签到' //如果为空字符，则默认显示数字+徽章
    //   ,'2021-6-22': '' //具体日期
    //   ,'2021-6-23': '' //具体日期
    // }
    ,change: function(value, date){ //日期时间被切换后的回调
      console.log('value',value);
    }
  });

签到过的加了yqd-box 类名，

.yqd-box {
  background-color: #FEF2DF;
  padding: .06rem!important;
  color: #D1B286!important;
  border-radius: 50%;
}
.yqd-box::after {
  position: absolute;
  content: "";
  right: 2px;
  top: .34rem;
  width: 1rem;
  font-size: .2rem;
  color: #999999;
  height: 25px;
  border-radius: 50%;
}

未签到的也加了类名 wqd-box

.wqd-box {
  background-color: #F3F3F3;
  color: #C2C2C2!important;
  padding: .06rem!important;
  border-radius: 50%;
}
.wqd-box::after {
  position: absolute;
  content: "未签到";
  right: -3px;
  top: .38rem;
  width: 1rem;
  font-size: .2rem;
  color: #C2C2C2;
  height: 25px;
  border-radius: 50%;
}

还有进去默认选中的样式，点击的样式都可以自己在人家的css中去掉的，不知道说明白了没，就这东西：

直接在人家的laydate.css里面改 .layui-laydate .layui-this

.layui-laydate .layui-this{background-color:#ffffff!important;color:#666!important}

先这样吧，后面有啥问题明天上班再说，下班。