layui改變laydate日曆的樣式
阿新 • • 發佈：2018-11-08
因專案需要將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=""]');//選中所有顯示日期的td choosedate.append("<div class=\"price\">￥100</div>");//在選中的td中加入顯示價價格的div } ,done: function(value, date, endDate){ console.log(value); //得到日期生成的值，如：2017-08-18 console.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>
執行結果：
