需求:
想法:
金融業的客戶堅持使用網站前台,使用民國年顯示,其實使用西元年顯示,與舊有系統串接資料再轉日期格式即可,未來與其他系統資料串接也會比較容易,結論必須寫plugin改寫現有元件,因為客戶最大。
改寫項目:
參考來源:JQueryUI datepicer輸出民國年
- 客戶指定要從Bootsrtap的Datepicker元件,轉為使用JQuery的Datepicker元件。
- 必須顯示民國年。
- 點選input不顯示元件,點選日曆圖示才顯示元件。
想法:
金融業的客戶堅持使用網站前台,使用民國年顯示,其實使用西元年顯示,與舊有系統串接資料再轉日期格式即可,未來與其他系統資料串接也會比較容易,結論必須寫plugin改寫現有元件,因為客戶最大。
改寫項目:
- 複寫顯示西元年,改為顯示民國年。
- 因為字數過長,使用css將元件寬度加長。
- binding資料到input時,轉換為民國年。
- JQuery元件預設input跟button觸發元件兩種模式,為了要綁定在原本Bootstrap的日曆圖示,使用css將該button隱藏。
- 使用JQuery selector綁定icon的click事件觸發顯示Datepicker元件。
引用js與css
<link href="/Content/jquery-ui-1.10.3/jquery-ui-1.10.3.custom.css" rel="stylesheet"> <script src="/Scripts/jquery-ui-1.10.3/jquery-ui-1.10.3.custom.min.js"></script> <script src="/Scripts/share/locales/datepicker-zh-TW.js"></script> <style>.ui-datepicker { width: 20em } .ui-datepicker-trigger { display:none }</style>
JS plugin
(function (factory) { if (typeof define === "function" && define.amd) { // AMD. Register as an anonymous module. define(["../widgets/datepicker"], factory); } else { // Browser globals factory(jQuery.datepicker); } }(function (datepicker) { var old_generateMonthYearHeader = $.datepicker._generateMonthYearHeader; var old_get = $.datepicker._get; var old_CloseFn = $.datepicker._updateDatepicker; $.extend($.datepicker, { _generateMonthYearHeader: function (inst, drawMonth, drawYear, minDate, maxDate, secondary, monthNames, monthNamesShort) { var htmlYearMonth = old_generateMonthYearHeader.apply(this, [inst, drawMonth, drawYear, minDate, maxDate, secondary, monthNames, monthNamesShort]); if ($(htmlYearMonth).find(".ui-datepicker-year").length > 0) { htmlYearMonth = $(htmlYearMonth).find(".ui-datepicker-year").find("option").each(function (i, e) { if (Number(e.value) - 1911 > 0) $(e).text("民國" + (Number(e.innerText) - 1911) + "年"); }).end().end().get(0).outerHTML; } return htmlYearMonth; }, _get: function (a, b) { a.selectedYear = a.selectedYear - 1911 < 0 ? a.selectedYear + 1911 : a.selectedYear; a.drawYear = a.drawYear - 1911 < 0 ? a.drawYear + 1911 : a.drawYear; a.curreatYear = a.curreatYear - 1911 < 0 ? a.curreatYear + 1911 : a.curreatYear; return old_get.apply(this, [a, b]); }, _updateDatepicker: function (inst) { old_CloseFn.call(this, inst); $(this).datepicker("widget").find(".ui-datepicker-buttonpane").children(":last") .click(function (e) { inst.input.val(""); }); }, _setDateDatepicker: function (a, b) { if (a = this._getInst(a)) { this._setDate(a, b); this._updateDatepicker(a); this._updateAlternate(a) } }, _widgetDatepicker: function () { return this.dpDiv } }); datepicker.regional["zh-TW"] = { closeText: "關閉", prevText: "<上個月", nextText: "下個月>", currentText: "今天", monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], dayNamesShort: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"], dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"], weekHeader: "週", dateFormat: "yymmdd", firstDay: 1, isRTL: false, showOn: "button", changeYear: true, changeMonth: true, showMonthAfterYear: true, onSelect: function (dateText, inst) { var dateFormate = inst.settings.dateFormat == null ? "yymmdd" : inst.settings.dateFormat; //取出格式文字 var reM = /m+/g; var reD = /d+/g; var objDate = { y: inst.selectedYear - 1911 < 0 ? inst.selectedYear : padLeft((inst.selectedYear - 1911).toString(),3,"0"), m: padLeft(String(inst.selectedMonth + 1),2,"0"), d: padLeft(String(inst.selectedDay),2,"0") }; $.each(objDate, function (k, v) { var re = new RegExp(k + "+"); dateFormate = dateFormate.replace(re, v); }); inst.input.val(dateFormate); } }; datepicker.setDefaults(datepicker.regional["zh-TW"]); return datepicker.regional["zh-TW"]; })); function padLeft(str, length, sign) { if (str.length >= length) return str; else return padLeft(sign + str, length, sign); }
前端JS code
//初始化Datepicker $("#BIRTHDAY").datepicker({ yearRange: "-100:+0", dateFormat: "yy/mm/dd" }); //綁定bootstrap日曆圖示觸發Datepicker $(".glyphicon-calendar").click(function () { $("#BIRTHDAY").datepicker('show'); });
參考來源:JQueryUI datepicer輸出民國年
Tags: datepicker
, JQuery
訂閱:
張貼留言 (Atom)
不好意思, 冒昧請教一下.
回覆刪除我試著套用了您的Code, 可出現了一個問題- 在textbox有值的情況下點選日曆圖示, 元件不會預設到那一個日期, 而是顯示今天的日期, 必須將textbox中的值改為西元年時才會正確顯示. 由於對這部分技術不熟, 可否直接請教一下應如何修改才能解決這一問題? 非常感謝!
抱歉...平常沒在顧這個地方= =。後來自己暫時的解法,有值的狀況下把民國年轉成西元年set日曆跳出的日期,然後再把民國年的值蓋回textbox中。若您有不錯的方法也歡迎指教。
刪除