layui改变laydate日历的样式

本文主要是介绍layui改变laydate日历的样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

因项目需要将layui日历的样式进行了改变，主要改变如下：

1.在layui日历中添加价格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all"><style>#test-n1 .layui-laydate-main{width: 350px;}.price{border-top: 1px solid black;color: red;}</style>
</head>
<body>
<div id="test-n1"></div><script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../js/jquery-1.8.3.js"></script>
<script>layui.use('laydate',function () {var laydate = layui.laydate;//直接嵌套显示laydate.render({elem: '#test-n1',position: 'static',min: 0,ready: function(date){//$('.layui-this').removeClass('layui-this');//去掉默认选中当前日期console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}var choosedate = $('.layui-laydate-content td[class=""]');//选中所有显示日期的tdchoosedate.append("<div class=\"price\">￥100</div>");//在选中的td中加入显示价价格的div},done: function(value, date, endDate){console.log(value); //得到日期生成的值，如：2017-08-18console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}},change: function(value, date, endDate){var choosedate = $('.layui-laydate-content td[class=""]');choosedate.append("<div class=\"price\">￥100</div>");}});});</script>
</body>
</html>

运行结果：

2.单点选中日期，或按Ctrl键连选日期

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
</head>
<body>
<div id="test-n1"></div><script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../js/jquery-1.8.3.js"></script>
<script>layui.use('laydate',function () {var laydate = layui.laydate;var prevCheckDate;      // 记录上次ctrl+鼠标选中的日期//直接嵌套显示laydate.render({elem: '#test-n1',position: 'static',min: 0,ready: function(date){$('.layui-this').removeClass('layui-this');//去掉默认选中的当前日期var choosedate = $('.layui-laydate-content td[class=""]');// 绑定点击事件choosedate.unbind("click").click(function(event){// 记录每次选中的元素var checkDates = $('.layui-laydate-content td[mychecked="true"]');// 将历史选中的日期全部添加样式checkDates.addClass('layui-this');// 判断当前点击元素是否已经被选择过了if($(this).attr('mychecked') == 'true'){$(this).attr('class','');$(this).removeAttr('mychecked');return;}// 为选中的元素设置一个标记$(this).attr('mychecked','true');// 监听点击事件发生时，用户是否按下了ctrl键if(event.ctrlKey) {if(prevCheckDate){var nowCheckDate = $(this).attr('lay-ymd');prevCheckDate = new Date(prevCheckDate.replace(/-/g,"/"));nowCheckDate = new Date(nowCheckDate.replace(/-/g,"/"));var nyear = nowCheckDate.getFullYear();var pyear = prevCheckDate.getFullYear();var nmonth = nowCheckDate.getMonth() + 1;var pmonth = prevCheckDate.getMonth() + 1;var nday = nowCheckDate.getDate();var pday = prevCheckDate.getDate();if(nyear == pyear && nmonth == pmonth){var i = nday > pday ? pday:nday;var j = nday > pday ? nday:pday;for(i;i < j;i++){$('td[lay-ymd="'+nyear+'-'+nmonth+'-'+i+'"]').addClass('layui-this');$('td[lay-ymd="'+nyear+'-'+nmonth+'-'+i+'"]').attr('mychecked','true');}}}// 重置上次ctrl选中元素prevCheckDate = $(this).attr('lay-ymd');}else{prevCheckDate = null;}});}});});</script>
</body>
</html>

运行结果：