2016-12-30_120842
需求:
  1. 客戶指定要從Bootsrtap的Datepicker元件,轉為使用JQuery的Datepicker元件。
  2. 必須顯示民國年。
  3. 點選input不顯示元件,點選日曆圖示才顯示元件。

想法:

金融業的客戶堅持使用網站前台,使用民國年顯示,其實使用西元年顯示,與舊有系統串接資料再轉日期格式即可,未來與其他系統資料串接也會比較容易,結論必須寫plugin改寫現有元件,因為客戶最大。

改寫項目:

  1. 複寫顯示西元年,改為顯示民國年。
  2. 因為字數過長,使用css將元件寬度加長。
  3. binding資料到input時,轉換為民國年。
  4. JQuery元件預設input跟button觸發元件兩種模式,為了要綁定在原本Bootstrap的日曆圖示,使用css將該button隱藏。
  5. 使用JQuery selector綁定icon的click事件觸發顯示Datepicker元件。

引用js與css

  1. <link href="/Content/jquery-ui-1.10.3/jquery-ui-1.10.3.custom.css" rel="stylesheet">
  2. <script src="/Scripts/jquery-ui-1.10.3/jquery-ui-1.10.3.custom.min.js"></script>
  3. <script src="/Scripts/share/locales/datepicker-zh-TW.js"></script>
  4. <style>.ui-datepicker { width: 20em } .ui-datepicker-trigger { display:none }</style>

JS plugin
  1. (function (factory) {
  2. if (typeof define === "function" && define.amd) {
  3.  
  4. // AMD. Register as an anonymous module.
  5. define(["../widgets/datepicker"], factory);
  6. } else {
  7.  
  8. // Browser globals
  9. factory(jQuery.datepicker);
  10. }
  11.  
  12. }(function (datepicker) {
  13. var old_generateMonthYearHeader = $.datepicker._generateMonthYearHeader;
  14. var old_get = $.datepicker._get;
  15. var old_CloseFn = $.datepicker._updateDatepicker;
  16. $.extend($.datepicker, {
  17. _generateMonthYearHeader: function (inst, drawMonth, drawYear, minDate, maxDate, secondary, monthNames, monthNamesShort) {
  18. var htmlYearMonth = old_generateMonthYearHeader.apply(this, [inst, drawMonth, drawYear, minDate, maxDate, secondary, monthNames, monthNamesShort]);
  19. if ($(htmlYearMonth).find(".ui-datepicker-year").length > 0) {
  20. htmlYearMonth = $(htmlYearMonth).find(".ui-datepicker-year").find("option").each(function (i, e) {
  21. if (Number(e.value) - 1911 > 0) $(e).text("民國" + (Number(e.innerText) - 1911) + "年");
  22. }).end().end().get(0).outerHTML;
  23. }
  24. return htmlYearMonth;
  25. },
  26. _get: function (a, b) {
  27. a.selectedYear = a.selectedYear - 1911 < 0 ? a.selectedYear + 1911 : a.selectedYear;
  28. a.drawYear = a.drawYear - 1911 < 0 ? a.drawYear + 1911 : a.drawYear;
  29. a.curreatYear = a.curreatYear - 1911 < 0 ? a.curreatYear + 1911 : a.curreatYear;
  30. return old_get.apply(this, [a, b]);
  31. },
  32. _updateDatepicker: function (inst) {
  33. old_CloseFn.call(this, inst);
  34. $(this).datepicker("widget").find(".ui-datepicker-buttonpane").children(":last")
  35. .click(function (e) {
  36. inst.input.val("");
  37. });
  38. },
  39. _setDateDatepicker: function (a, b) {
  40. if (a = this._getInst(a)) { this._setDate(a, b); this._updateDatepicker(a); this._updateAlternate(a) }
  41. },
  42. _widgetDatepicker: function () {
  43. return this.dpDiv
  44. }
  45.  
  46. });
  47.  
  48. datepicker.regional["zh-TW"] = {
  49. closeText: "關閉",
  50. prevText: "<上個月",
  51. nextText: "下個月>",
  52. currentText: "今天",
  53. monthNames: ["一月", "二月", "三月", "四月", "五月", "六月",
  54. "七月", "八月", "九月", "十月", "十一月", "十二月"],
  55. monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月",
  56. "七月", "八月", "九月", "十月", "十一月", "十二月"],
  57. dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
  58. dayNamesShort: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
  59. dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
  60. weekHeader: "週",
  61. dateFormat: "yymmdd",
  62. firstDay: 1,
  63. isRTL: false,
  64. showOn: "button",
  65. changeYear: true,
  66. changeMonth: true,
  67. showMonthAfterYear: true,
  68. onSelect: function (dateText, inst) {
  69. var dateFormate = inst.settings.dateFormat == null ? "yymmdd" : inst.settings.dateFormat; //取出格式文字
  70. var reM = /m+/g;
  71. var reD = /d+/g;
  72. var objDate = {
  73. y: inst.selectedYear - 1911 < 0 ? inst.selectedYear : padLeft((inst.selectedYear - 1911).toString(),3,"0"),
  74. m: padLeft(String(inst.selectedMonth + 1),2,"0"),
  75. d: padLeft(String(inst.selectedDay),2,"0")
  76. };
  77. $.each(objDate, function (k, v) {
  78. var re = new RegExp(k + "+");
  79. dateFormate = dateFormate.replace(re, v);
  80. });
  81. inst.input.val(dateFormate);
  82. }
  83. };
  84. datepicker.setDefaults(datepicker.regional["zh-TW"]);
  85.  
  86. return datepicker.regional["zh-TW"];
  87.  
  88. }));
  89.  
  90. function padLeft(str, length, sign) {
  91. if (str.length >= length) return str;
  92. else return padLeft(sign + str, length, sign);
  93. }


前端JS code
  1. //初始化Datepicker
  2. $("#BIRTHDAY").datepicker({
  3. yearRange: "-100:+0",
  4. dateFormat: "yy/mm/dd"
  5. });
  6.  
  7. //綁定bootstrap日曆圖示觸發Datepicker
  8. $(".glyphicon-calendar").click(function () {
  9. $("#BIRTHDAY").datepicker('show');
  10. });


參考來源:JQueryUI datepicer輸出民國年

2 則留言:

  1. blank

    不好意思, 冒昧請教一下.
    我試著套用了您的Code, 可出現了一個問題- 在textbox有值的情況下點選日曆圖示, 元件不會預設到那一個日期, 而是顯示今天的日期, 必須將textbox中的值改為西元年時才會正確顯示. 由於對這部分技術不熟, 可否直接請教一下應如何修改才能解決這一問題? 非常感謝!

    回覆刪除
    回覆
    1. 13528303_1058199404248770_4119284016275746849_o

      抱歉...平常沒在顧這個地方= =。後來自己暫時的解法,有值的狀況下把民國年轉成西元年set日曆跳出的日期,然後再把民國年的值蓋回textbox中。若您有不錯的方法也歡迎指教。

      刪除