實用外掛（六）手機日曆外掛——LCalendar
阿新 • • 發佈：2019-02-13
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 && strYear%100 != 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，而且樣式可以很方便的自定義，可以設定初始值。其中的年月日，都能夠很流暢的滾動。