JQuery-UI datepicker 改顯示民國年

edited 十月 2013 in Javascript
原本是找到這個修改:
http://www.dotblogs.com.tw/fphoenix/archive/2009/07/05/9129.aspx

不過直接放上去不太理我(1.7.2),所以透過上面提到的線索做了些修改,直接把修改的部份放進 ui.datepicker-zh-TW.js 中,只要使用這個語系就轉換為民國年顯示,程式碼如下:
jQuery(function($){
	$.datepicker.regional['zh-TW'] = {
		closeText: '關閉',
		prevText: '<上月',
		nextText: '下月>',
		currentText: '今天',
		monthNames: ['一月','二月','三月','四月','五月','六月',
		'七月','八月','九月','十月','十一月','十二月'],
		monthNamesShort: ['一','二','三','四','五','六',
		'七','八','九','十','十一','十二'],
		dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
		dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
		dayNamesMin: ['日','一','二','三','四','五','六'],
		dateFormat: 'yy-mm-dd', firstDay: 1,
		showMonthAfterYear: false,
		changeMonth: true,
		changeYear: true,
		isRTL: false
	};
	$.datepicker.setDefaults($.datepicker.regional['zh-TW']);
	$.datepicker._phoenixGenerateMonthYearHeader = $.datepicker._generateMonthYearHeader;
	$.datepicker._generateMonthYearHeader = function(inst, drawMonth, drawYear, minDate, maxDate,
			selectedDate, secondary, monthNames, monthNamesShort
	) {
		var result = $($.datepicker._phoenixGenerateMonthYearHeader(
				inst, drawMonth, drawYear, minDate, maxDate,
				selectedDate, secondary, monthNames, monthNamesShort));
		result.children("select.ui-datepicker-year").children().each(function() {
			$(this).text('民國' + ($(this).text() - 1911) + '年');
		});
		return result.parent().html();
	};
});

這個調整只有改變下拉選單的顯示,最後輸出的數值還是西元年,因為我的需求只有到此,有興趣的朋友就進一步調整囉 ;)

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=4315

評論

  • edited 一月 2011
    發現上面這個方式在更新版本到 jQuery 1.4.4 與 jQuery UI 1.8.7 時有些狀況,主要是民國年無法正常顯示,或是只有 Firefox 無法正常顯示,看了一下原始程式發現,在 jQuery UI 中有針對 mozilla 作其他方式處理,於是調整 _generateMonthYearHeader() 為這樣:
    $.datepicker._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();
        };
    

    不確定有沒有其他情況需要處理,目前看來運作正常 :)
Sign In or Register to comment.