如何利用radio button切換Jquery Ui Datepicker 顯示西元年和民國年. [Use Radio button to change between western year datepicker and chinese year datepicker.]

<!DOCTYPE html>
<html>

  <head>
  
    <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script data-require="jquery@*" data-semver="1.9.1" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>

  <body>
    <h1>JQuery Ui Datepicker 使用民國年或者西元年</h1>
    
    <label><input name="yearType" type="radio" value="chinese" checked="checked" />民國年</label>
    <label><input name="yearType" type="radio" value="Western" />西元年</label>
    
    <br />
    <div id="chineseDiv">
    
    <input type="text" id="dateFrom" class="datePicker" />
    ~
    <input type="text" id="dateTo">
    </div>
    
    <div id="westernDiv" style="display:none">
    <input type="text" id="dateFromW" class="datePicker" />
    ~
    <input type="text" id="dateToW">
    </div>
    <br />
    <input type="text" id="hiddenFrom" />
    <input type="text" id="hiddenTo" />
  </body>

</html>

// Code goes here

var originalSetting = {
  _generateMonthYearHeader: $.datepicker._generateMonthYearHeader,
  _formatDate: $.datepicker._formatDate
};

var chineseSetting = {
  _phoenixGenerateMonthYearHeader: $.datepicker._generateMonthYearHeader,

  _generateMonthYearHeader: function(inst, drawMonth, drawYear, minDate, maxDate,
    secondary, monthNames, monthNamesShort) {
    var result = $($.datepicker._phoenixGenerateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
      secondary, monthNames, monthNamesShort));
    result.children("select.ui-datepicker-year").children().each(function() {
      $(this).text('民國' + ($(this).text() - 1911) + '年');
    });
    if (inst.yearshtml) {
      var origyearshtml = inst.yearshtml;
      setTimeout(function() {
        //assure that inst.yearshtml didn't change.
        if (origyearshtml === inst.yearshtml) {
          inst.dpDiv.find('select.ui-datepicker-year:first').replaceWith(inst.yearshtml);
          inst.dpDiv.find('select.ui-datepicker-year').children().each(function() {
            $(this).text('民國' + ($(this).text() - 1911) + '年');
          });
        }
        origyearshtml = inst.yearshtml = null;
      }, 0);
    }
    //return result.html();
    return $("<div class='ui-datepicker-title'></div>").append(result.clone()).html();
  },

  _formatDate: function(inst, day, month, year) {
    if (!day) {
      inst.currentDay = inst.selectedDay;
      inst.currentMonth = inst.selectedMonth;
      inst.currentYear = inst.selectedYear;
    }
    var date = (day ? (typeof day == 'object' ? day :
        this._daylightSavingAdjust(new Date(year, month, day))) :
      this._daylightSavingAdjust(new Date(inst.currentYear, inst.currentMonth, inst.currentDay)));
    return (date.getFullYear() - 1911) + "-" +
      (date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1)) + "-" +
      (date.getDate() < 9 ? "0" + date.getDate() : date.getDate());
  }

};

$(function() {

  $.datepicker.regional['zh-TW'] = {
    closeText: '關閉',
    prevText: '&#x3C;',
    nextText: '&#x3E;',
    currentText: '今天',
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
      '七月', '八月', '九月', '十月', '十一月', '十二月'
    ],
    monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月',
      '七月', '八月', '九月', '十月', '十一月', '十二月'
    ],
    dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
    dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
    weekHeader: '周',
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true
  };
  $.datepicker.setDefaults($.datepicker.regional['zh-TW']);
  
  ChineseDatePicker();

  $("input[name='yearType']").click(function() {
    
    ClearValue();
    
    if ($(this).val() === "chinese") {
      ChineseDatePicker();
    } else {
      WesternDatePicker();
    }

  });

});

function ChineseDatePicker() {
  $("#chineseDiv").show();
  $("#westernDiv").hide();

  $.extend($.datepicker, chineseSetting);

  $("#dateFrom").datepicker({
    changeMonth: true,
    changeYear: true,
    altField: "#hiddenFrom",
    altFormat: "yymmdd",
    dateFormat: 'yy/mm/dd', //這邊dateFormat一定要給的和我們顯示的不一樣，這樣當他呼叫formatDate的時候，才會format不了，然後給今天為預設值
    onClose: function(selectedDate, input) {
      $("#dateTo").datepicker("option", "minDate", $.datepicker._getDate(input));
    },
    beforeShow: function(selectedDate, input) {
      
    }
  });

  $("#dateTo").datepicker({
    changeMonth: true,
    changeYear: true,
    altField: "#hiddenTo",
    altFormat: "yymmdd",
    dateFormat: 'yy/mm/dd'
  });
}


function WesternDatePicker() {
  $("#chineseDiv").hide();
  $("#westernDiv").show();

  $.extend($.datepicker, originalSetting);

  $("#dateFromW").datepicker({
    changeMonth: true,
    changeYear: true,
    altField: "#hiddenFrom",
    altFormat: "yymmdd",
    onClose: function(selectedDate, input) {
      $("#dateToW").datepicker("option", "minDate", $.datepicker._getDate(input)); //這邊日期使用了datePicker的_getDate，要不然取得的是民國年而不是西元年，會導致設定minDate怪怪。
    }
  });

  $("#dateToW").datepicker({
    changeMonth: true,
    changeYear: true,
    altField: "#hiddenTo",
    altFormat: "yymmdd"
  });
}

function ClearValue()
{
  $("#dateFrom").val("");
  $("#dateFromW").val("");
  $("#dateTo").val("");
  $("#dateToW").val("");
  
  $("#hiddenFrom").val("");
  $("#hiddenTo").val("");
}

/* Styles go here */

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year
{
  width: auto;
}

這邊顯示了如何利用radio button切換Jquery Ui Datepicker 顯示西元年和民國年

目前還有一些問題：
1. 在民國年，因為沒有修改 “_setDateFromField” 導致衍生兩個問題：1. 選完日期，再選一次的時候預設日期不是之前選的，而是今天日期。2. 
因為我們沒有複寫那一段，因此我們的datePicker裡面使用的"dateFormat" 一定要和我們複寫的“_formatDate”使用的切割符號不同。以我們的例子就是我使用了“-”在
“_formatDate”裡面，然後實際datePicker的"dateFormat"是"/"。
這樣做的原因是要讓他沒有辦法parse成功，才會給今天日期，這樣我們的民國年才不會錯。“如果有興趣可以把那個"dateFormat"拿掉，然後選一次日期，在點一次就會發現。

2. 民國年的css有問題，跑版了 - 已修正，詳細請看下面


#修改到的3個部分
要讓DatePicker顯示民國年其實完整的話需要修改3個部分（我這邊目前只有2個）
1. _generateMonthYearHeader - 這個是年份下拉式選單所顯示的內容
2. _formatDate - 這個是選擇了某一個日期之後，在textbox顯示的內容
3. _setDateFromField - 這個是從textbox讀取回來轉換成為date object的時候使用（為修改）

以上3個是基本上修改的位置，網路上面有些教學會教更改這3個function裡面實際呼叫的function，至於改哪一個就看個人喜好。

#Reference
1. [jQuery DatePicker 日期選擇(民國年)](http://aqr199xx.pixnet.net/blog/post/26205987) - 這個裡面介紹了修改的3個部分，不過他修改的是我上面提到的3個裡面實際呼叫的
2. [jQuery UI 1.8 datepicker 搭配民國年](http://maxclapton.blogspot.tw/2010/08/jquery-ui-18-datepicker.html) - 這個有介紹如何實作”_setDateFromField“
3. [jQuery-UI datepicker 改顯示民國年](http://twpug.net/discussion/4315) - 介紹了_generateMonthYearHeader的部分
4. [JQuery-UI的datepicker擴充](http://www.dotblogs.com.tw/fphoenix/archive/2009/07/05/9129.aspx) - 3個都有介紹


#民國年跑版問題
總共修正了兩個部分：
1. 在”_generateMonthYearHeader“(ln 32) return的時候，原本是直接返回"result.html()"，不過因為這樣最外層的會沒有包跨，
導致版型有一個部分缺失，造成跑版。這個問題沒有辦法用jquery的beforeShow來解決。
2. 雖然跑版問題解決，不過在顯示民國年，如果是3位數的最後一個字母（”年“）會被蓋到。這個問題是因為在css裡面，兩個ddl width是49%，但是我們這邊因為有中文字
導致文字蓋掉。解決方法，把width設定為Auto，不過這樣在西元年那邊，ddl就不會填滿

##修正使用的Reference
http://stackoverflow.com/questions/5587844/jquery-get-html-including-the-selector
http://stackoverflow.com/questions/7917962/jquery-html-function-how-to-include-selector-html
http://stackoverflow.com/questions/10812921/jquery-ui-datepicker-how-to-wrap-the-datepicker-in-a-new-div
http://stackoverflow.com/questions/6459398/jquery-get-html-of-container-including-the-container-itself