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}

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

layui laydate 自定义mark相关推荐

layui 日期重置_日期时间插件--日期时间组件文档 - layui.laydate
样式: /*这里我引的是我本地的js*/ layui.use('laydate', function () { var laydate = layui.laydate; var start = { / ...
layui.laydate默认当前时间时分秒
layui.laydate默认当前时间时分秒代码如下代码如下 //加载日期控件信息layui.use('laydate', function() {var laydate = layui.layd ...
layUI laydate 时间选择器近一天、近一月、近三月、近一年
参考其他博主代码的情况下进行改编写入时间组件 <input type="text" class="layui-input" id="dateI ...
Pytest注册使用自定义mark标签
[原文链接]Pytest注册使用自定义mark标签文章目录一.直接使用自定义mark标签二.通过conftest.py文件中重写pytest_configure函数注册标签三.通过pytest ...
【pytest官方文档】解读- 如何自定义mark标记，并将测试用例的数据传递给fixture函数
在之前的分享中,我们知道可以使用yield或者return关键字把fixture函数里的值传递给test函数. 这种方法很实用,比如我在fixture函数里向数据库里插入必要的测试数据,那我就可以把相 ...
layui laydate 渲染失效问题，lay-key导致动态生成代码二次渲染失败
在开发中因为需要动态生成时间选择框,所以选择了layui的 laydate控件,但是遇到了生成的时间选择框点击无效的问题,然后再次render 时间选择器一闪就消失了,查了多方资料,找到了如下的解决方 ...
layui layDate时间控件绑定多个文本框组件
layDate.js下载地址多个输入框都是实现选择日期时间,通过class去循环遍历绑定时间控件. <div><input type="text" class= ...
Android高德地图自定义Mark并实现聚合效果
Android高德地图自定义Mark并实现聚合效果起因:公司本来项目里面用到了高德地图,然后最近老板看见别人的APP里面有个聚合的这个功能,老板:"这个效果能不能实现,我也要!" ...
解决layui laydate动态创建多个时不起作用点击无效的问题
最近在一个表单中有个自定义日期选项, 用户每点击一次按钮就动态增加一行日期选择框 . 我选择了laydate框架来完成 , 但在新生成的日期组件中 , 除了第一个生成的外 , 其他的点击和选择都不起作 ...

layui laydate 自定义mark

layui laydate 自行定义mark

layui laydate 自定义mark相关推荐

最新文章

热门文章