1、点我下载
2、使用方法：
<!-- 日历1个css文件--> <link rel="stylesheet" type="text/css" href="../css/LCalendar.css" /> <!-- 日历1个js文件--> <script src="../js/LCalendar.js" type="text/javascript" charset="utf-8"></script>3、demo：
<!DOCTYPE html > <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>报修</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/common.css" rel="stylesheet"> <link href="../css/mend-detail-finished.css" rel="stylesheet"> <!-- 日历1个css文件--> <link rel="stylesheet" type="text/css" href="../css/LCalendar.css" /> <!--[if lt IE 9]> <script src="../js/html5shiv.min.js"></script> <script src="../js/respond.min.js"></script> <![endif]--> <script src="../js/jQuery-1.9.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> <!-- 日历1个js文件--> <script src="../js/LCalendar.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //初始化LCalendar插件 $(function () { //实例化一个LCalendar对象 var calendar = new LCalendar(); calendar.init({ 'trigger': '#start_date', //标签id 'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择, 'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期 'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期 }); //再实例化一个LCalendar对象 var calendar = new LCalendar(); calendar.init({ 'trigger': '#end_date', //标签id 'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择, 'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期 'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期 }); }) </script> <style> td{height: 45px;} tr>td:first-child{border: 0;} </style> </head> <body style="height: 100%"> <header> <p> <a class="back" href="javascript:;"></a> <span>搜索</span> </p> </header> <table class="my-table"> <tr> <td width="30%">开始日期</td> <td width="70%"><input type="text" id="start_date" class="date-right" readonly/></td> </tr> <tr> <td width="30%">开始日期</td> <td width="70%"><input type="text" id="end_date" class="date-right" readonly/></td> </tr> <tr> <td width="30%">报修类别</td> <td width="70%" class="img-right top" style="background-position: 95% center;position: relative;"> <span>总务后勤报修</span> <ul class="select"> <li class="option">电教设备报修</li> <li class="option">总务后台报修</li> </ul> </td> </tr> <tr> <td width="30%">处理状态</td> <td width="70%"> <span class="state-type active">待分派<i class="icon">√</i></span> <span class="state-type">待维修<i class="icon">√</i></span> <span class="state-type">已完成<i class="icon">√</i></span> </td> </tr> <tr> <td width="30%">维修人员</td> <td width="70%" style="line-height: 40px;background-position: 95% center" class="img-right" > <span>李波</span> <a href="tel:123456" > <img src="../images/phone.png" alt="" width="16" style="margin-bottom: 3px;margin-left: 20px;"/> </a> </td> </tr> <tr> <td width="30%">维修人员</td> <td width="70%" style="line-height: 40px;background-position: 95% center" class="img-right" > <span>李波</span> <a href="tel:123456" > <img src="../images/phone.png" alt="" width="16" style="margin-bottom: 3px;margin-left: 20px;"/> </a> </td> </tr> <tr> <td colspan="2"> <button class="btn-red" style="margin-top: 20px;margin-left: 30%;width: 70%;">开始搜索</button> </td> </tr> </table> <script > //功能：设置第一个input值为30天前的日期，第二个input值为今天日期， function getLastMonthYestdy(date){ var date = new Date(); // 1 2 3 4 5 6 7 8 9 10 11 12月 var daysInMonth = new Array([0],[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]); var strYear = date.getFullYear(); var strDay = date.getDate(); var strMonth = date.getMonth()+1; if(strMonth<10)//给个位数的月、日补零 { strMonth="0"+strMonth; } if(strDay<10) { strDay="0"+strDay; } now = strYear+"-"+strMonth+"-"+strDay; if(strYear%4 == 0 && strYear0 != 0){//一、解决闰年平年的二月份天数 //平年28天、闰年29天//能被4整除且不能被100整除的为闰年 daysInMonth[2] = 29; } if(strMonth - 1 == 0) //二、解决跨年问题 { strYear -= 1; strMonth = 12; } else { strMonth -= 1; } // strDay = daysInMonth[strMonth] >= strDay ? strDay : daysInMonth[strMonth]; strDay = Math.min(strDay,daysInMonth[strMonth]);//三、前一个月日期不一定和今天同一号，例如3.31的前一个月日期是2.28；9.30前一个月日期是8.30 if(strMonth<10)//给个位数的月、日补零 { strMonth="0"+strMonth; } if(strDay<10) { strDay="0"+strDay; } datastr = strYear+"-"+strMonth+"-"+strDay; return datastr,now; } getLastMonthYestdy(); console.log(datastr);//必须确保日期格式为：YYYY-MM-DD $("#start_date").val(datastr);//30天前的日期 $("#end_date").val(now);//今天日期 </script> <script > //显示 $(".img-right.top").click(function (e) { e.stopPropagation(); $(".select").slideToggle(); }); //隐藏 $(document).click(function () { $(".select").slideUp(); }); $(".option").click(function (e) { //1、隐藏 e.stopPropagation(); $(this).parent().slideUp(); //2、赋值 var txt = $(this).text(); $(".img-right.top span").text(txt); } ) </script> <script > //处理状态切换： 选中/未选中 $(".state-type").click(function () { $(this).toggleClass("active"); }) </script> </body> </html>4、效果图：
5、总结
该插件为轻量级，压缩后只有10k，而且样式可以很方便的自定义，可以设置初始值。其中的年月日，都能够很流畅的滚动。
