jquery日曆之昨天－－今天－－明天
阿新 • • 發佈：2019-01-27
本人菜鳥一枚，昨天被老大追著要一個含有前一天後一天的彈窗日曆，而且還要顯示當前的預設時間，這對於小白來說，無異於比長胖十斤更晴天霹靂。奈何我搜腸刮肚，絞盡腦汁，翻箱倒櫃但還是沒能找到一個合適的jquery日曆外掛，本著不拋棄不放棄的原則，我還是進行了最後的垂死掙扎，終於，根據mobiscroll 這個jquery改出來一個，（不要嘲笑菜鳥的無知，之前真的是以為外掛就是直接拿來用的，感謝無所不能的百度和一個大神的指點，讓我知道每個jquery庫原來都是有API可尋的）廢話不多說，直接上程式碼，希望能夠對那些和我一樣正在以龜速往前爬的小夥伴們以指引。
html程式碼：
<!DOCTYPEhtml> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>Mobiscroll日期時間中文精簡例項</title> <script src="js/jquery.1.7.2.min.js"></script> <script src="js/mobiscroll_002.js" type="text/javascript"></script> <script src="js/mobiscroll.js" type="text/javascript"></script> <link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css"> </head> <body> <label for="appDate">日期</label> <input class="appDate" readonly="readonly" name="appDate" id="appDate" type="text" style="width: 200px; font-size: 18px;color: #E87633;border: none; font-weight:bold;"> <script type="text/javascript"> $(function () { var currYear = (new Date()).getFullYear(); var opt={}; opt.date = {preset : 'date',}; opt.datetime = {preset : 'datetime'}; opt.time = {preset : 'time'}; opt.default = { theme: 'android-ics light', //面板樣式 display: 'modal', //顯示方式 mode: 'scroller', //日期選擇模式 dateFormat: 'yyyy-mm-dd', lang: 'zh', showYesterday:true, //預設前一天存在 showNow: true, //預設今天存在 showToworrow:true, //預設後一天存在 yesToday:"前一天", nowText: "今天", tomorrowData:"後一天", startYear: currYear - 100, //開始年份 endYear: currYear + 100, //結束年份 }; $("#appDate").mobiscroll($.extend(opt['date'], opt['default'])); }); </script> </body> </html>
mobiscroll.js裡面的程式碼我會重點選出一部分，主要是我做的改動的部分，其餘的整個會以包的形式展現給大家，當然mobiscroll——002.js也一樣：
mobiscroll.js改動部分：//預設點選之前顯示日期為當天日期 $("#appDate").val(date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()); 這個老扎心了，之前都整不出來，預設顯示當前日期，原來一句話的事兒。
//前一天 button1Text: s.showYesterday ? s.yesToday : undefined, button1: s.showYesterday ? function () { inst.setDate(new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1),false , 0.3,false); } : undefined, //今天 button3Text: s.showNow ? s.nowText : undefined, button3: s.showNow ? function () { inst.setDate(new Date(), false, 0.3, true); } : undefined, //後一天 button4Text: s.showToworrow ? s.tomorrowData : undefined, button4: s.showToworrow ? function () { inst.setDate(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1), true, 0.3, false); } : undefined,
//因為mobiscroll外掛庫是全英文的，（so這部分是給出中文翻譯部分）但是我們都是中國人好嗎？（其實只是因為看不懂英文，累覺不愛。。。）
$.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, { yesToday:"前一天", tomorrowData:"後一天", setText: '確定', cancelText: '取消' });
mobiscroll——002.js改動部分：
//這句程式碼需要超級注意，這句程式碼需要超級注意，這句程式碼需要超級注意，它決定你的昨天今天和明天有沒有用（雖然至今不懂為啥）
html += (s.display != 'inline' ? '<div class="dwbc' + (s.button1 ? ' dwbc-p' : '') + '">' +(s.button1 ? '<span class="dwbw md-yesterday"><span class="dwb">' + s.button1Text + '</span></span>' : '') + (s.button3 ? '<span class="dwbw dwb-n"><span class="dwb">' + s.button3Text + '</span></span>' : '') + (s.button4 ? '<span class="dwbw dwb-n md-tomorrow"><span class="dwb">' + s.button4Text + '</span></span>' : '')+'<span class="dwbw dwb-s"><span class="dwb">' + s.setText + '</span></span>' +'<span class="dwbw dwb-c"><span class="dwb">' + s.cancelText + '</span></span></div></div>' : '<div class="dwcc"></div>') + '</div></div></div>';好了，主要的東西都在這了，祝你好運奧