Skip to content

Instantly share code, notes, and snippets.

@relyky

relyky/jquery_tw_datepicker.js

Created August 18, 2023 06:13
Show Gist options
  • Save relyky/dc09f47f9f1bd22efe85be799e7895bb to your computer and use it in GitHub Desktop.
Save relyky/dc09f47f9f1bd22efe85be799e7895bb to your computer and use it in GitHub Desktop.
Download ZIP
民國年, datepicker
Raw
jquery_tw_datepicker.js
/**
* Created by EIJI on 2014/1/3.
* 民國年日期選擇器 https://codepen.io/not0000/pen/KvvGjr
* 更多資訊可參考原作者文章 http://softmenlouis.blogspot.com/2017/04/blog-post_74.html
*/
(function(){
var yearTextSelector = '.ui-datepicker-year';
var dateNative = new Date(),
dateTW = new Date(
dateNative.getFullYear() - 1911,
dateNative.getMonth(),
dateNative.getDate()
);
function leftPad(val, length) {
var str = '' + val;
while (str.length < length) {
str = '0' + str;
}
return str;
}
// 應該有更好的做法
var funcColle = {
onSelect: {
basic: function(dateText, inst){
/*
var yearNative = inst.selectedYear < 1911
? inst.selectedYear + 1911 : inst.selectedYear;*/
dateNative = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
// 年分小於100會被補成19**, 要做例外處理
var yearTW = inst.selectedYear > 1911
? leftPad(inst.selectedYear - 1911, 4)
: inst.selectedYear;
var monthTW = leftPad(inst.selectedMonth + 1, 2);
var dayTW = leftPad(inst.selectedDay, 2);
console.log(monthTW);
dateTW = new Date(
yearTW + '-' +
monthTW + '-' +
dayTW + 'T00:00:00.000Z'
);
console.log(dateTW);
return $.datepicker.formatDate(twSettings.dateFormat, dateTW);
}
}
};
var twSettings = {
closeText: '關閉',
prevText: '上個月',
nextText: '下個月',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy/mm/dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年',
showOn: "button",
onSelect: function(dateText, inst){
$(this).val(funcColle.onSelect.basic(dateText, inst));
if(typeof funcColle.onSelect.newFunc === 'function'){
funcColle.onSelect.newFunc(dateText, inst);
}
}
};
// 把yearText換成民國
var replaceYearText = function(){
var $yearText = $('.ui-datepicker-year');
if(twSettings.changeYear !== true){
$yearText.text('民國' + dateTW.getFullYear());
}else{
//if($yearText.prev('span.datepickerTW-yearPrefix').length === 0){
// $yearText.before("<span class='datepickerTW-yearPrefix'>民國</span>");
//}
// 下拉選單
$yearText.children().each(function(){
if(parseInt($(this).text()) > 1911){
$(this).text(parseInt($(this).text()) - 1911);
}
});
}
};
$.fn.datepickerTW = function(options){
// setting on init,
if(typeof options === 'object'){
//onSelect例外處理, 避免覆蓋
if(typeof options.onSelect === 'function'){
funcColle.onSelect.newFunc = options.onSelect;
options.onSelect = twSettings.onSelect;
}
// year range正規化成西元, 小於1911的數字都會被當成民國年
if(options.yearRange){
var temp = options.yearRange.split(':');
for(var i = 0; i < temp.length; i += 1){
//民國前處理
if(parseInt(temp[i]) < 1 ){
temp[i] = parseInt(temp[i]) + 1911;
}else{
temp[i] = parseInt(temp[i]) < 1911
? parseInt(temp[i]) + 1911
: temp[i];
}
}
options.yearRange = temp[0] + ':' + temp[1];
}
// if input val not empty
if($(this).val() !== ''){
options.defaultDate = $(this).val();
}
}
// setting after init
if(arguments.length > 1){
// 目前還沒想到正常的解法, 先用轉換成init setting obj的形式
if(arguments[0] === 'option'){
options = {};
options[arguments[1]] = arguments[2];
}
}
// override settings
$.extend(twSettings, options);
// init
$(this).datepicker(twSettings);
// beforeRender
$(this).click(function(){
var isFirstTime = ($(this).val() === '');
// year range and default date
if((twSettings.defaultDate || twSettings.yearRange) && isFirstTime){
if(twSettings.defaultDate){
$(this).datepicker('setDate', twSettings.defaultDate);
}
// 當有year range時, select初始化設成range的最末年
if(twSettings.yearRange){
var $yearSelect = $('.ui-datepicker-year'),
nowYear = twSettings.defaultDate
? $(this).datepicker('getDate').getFullYear()
: dateNative.getFullYear();
$yearSelect.children(':selected').removeAttr('selected');
if($yearSelect.children('[value=' + nowYear + ']').length > 0){
$yearSelect.children('[value=' + nowYear + ']').attr('selected', 'selected');
}else{
$yearSelect.children().last().attr('selected', 'selected');
}
}
} else {
$(this).datepicker('setDate', dateNative);
}
$(this).val($.datepicker.formatDate(twSettings.dateFormat, dateTW));
replaceYearText();
if(isFirstTime){
$(this).val('');
}
});
// afterRender
$(this).focus(function(){
replaceYearText();
});
return this;
};
})();
Raw
jquery_tw_datepicker5.html
/**
* Created by EIJI on 2014/1/3.
* 民國年日期選擇器 https://codepen.io/not0000/pen/KvvGjr
* 更多資訊可參考原作者文章 http://softmenlouis.blogspot.com/2017/04/blog-post_74.html
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
</head>
<body>
<h2>
<p>左邊是民國年，右邊是西元年，可以兩個比較看看</p>
</h2>
<label>
<input type="text" class="datepickerTW">
</label>
<label>
<input type="text" class="datepicker">
</label>
<p>已知問題</p>
<ol>
<li><p>尚未製作比1911還小(民國前)的情況，所以如果民國年選到個位數，就會變成 1910 1911 1 2 3，選了1911，日期欄位回傳可能就真的會變成 民國1911年，因此不適用於製作可以選到民國年前的歷史文件，請留意</p>
</li>
<li><p>雖然有支援 dateFormat: 'yy-mm-dd' 的格式，可以調換 yy mm dd 的順序，但不能使用大寫的MM，如果用大寫的會變回英文月份</p></li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" ></script>
<script src="jquery_tw_datepicker.js" ></script>
<script>
$('.datepickerTW').datepickerTW({
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd',
// yearRange: '-10:2018',
// defaultDate: '86-11-01',
});
$('.datepicker').datepicker({
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
// yearRange: '1911:2018',
// defaultDate: '2016-11-01'
});
</script>
</body>
</html>
Raw
mingo.html
<!-- 參考：[minGoDatePicker](https://github.com/chiminglee/minGoDatePicker/tree/master) -->
<!-- 民國年與西元年同時存在 with jQuery.UI -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>民國年與西元年小套件同時存在</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
</head>
<body>
民國年: (Rmmd)<input type="text" name="mingo" class="min_go_date" />
西元年: (yy-mm-dd)<input type="text" name="datepicker" class="datepicker" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" ></script>
<script>
$(document).ready(function() {
$(".min_go_date").datepicker({changeYear: true, changeMonth: true, currentText: "Now", dateFormat:"Rmmdd", showButtonPanel: true});
$(".datepicker").datepicker({changeYear: true, changeMonth: true, currentText: "Now", dateFormat:"yy-mm-dd", showButtonPanel: true});
});
//將.datepicker改成民國年與西元年小套件同時存在
/* 參考
http://aqr199.blog.ithome.com.tw/trackbacks/411/62016 ( 羅必達工作室)
http://www.dotblogs.com.tw/louis/archive/2011/12/01/60291.aspx (阿儒※練功房※)
*/
$(function() {
//先設定預設西元年的datepicker必要功能
var old_generateMonthYearHeader = $.datepicker._generateMonthYearHeader;
var old_formatDate = $.datepicker.formatDate;
var old_parseDate = $.datepicker.parseDate;
$.extend($.datepicker, {
//選擇日期之後的value
formatDate: function (format, date, settings) {
var oformatDate = old_formatDate(format, date, settings);
if(format == 'Rmmdd'){
var d = date.getDate();
var m = date.getMonth()+1;
var y = date.getFullYear();
var fm = function(v){
return (v<10 ? '0' : '')+v;
};
if((y - 1911) >= 100) {y = y - 1911 ;}else { y = "0" + String(y - 1911);}
return (y) +''+ fm(m) +''+ fm(d);
}
return oformatDate;
},
//點取已存在日期的parse
parseDate: function (format, value, settings) {
var v = new String(value);
var Y,M,D;
if(format == 'Rmmdd'){
if(v.length==7){/*1001215*/
Y = v.substring(0,3)-0+1911;
M = v.substring(3,5)-0-1;
D = v.substring(5,7)-0;
return (new Date(Y,M,D));
}else if(v.length==6){/*0981215*/
Y = "0" + String(v.substring(0,2)-0+1911);
M = v.substring(2,4)-0-1;
D = v.substring(4,6)-0;
return (new Date(Y,M,D));
}
return (new Date());
}else {
var oparseDate = old_parseDate.apply(this, [format, value, settings]);
return (oparseDate);
}
},
//改變小工具的年
_generateMonthYearHeader: function (inst, drawMonth, drawYear, minDate, maxDate, secondary, monthNames, monthNamesShort) {
var dateFormat = this._get(inst, "dateFormat");
var htmlYearMonth = old_generateMonthYearHeader.apply(this, [inst, drawMonth, drawYear, minDate, maxDate, secondary, monthNames, monthNamesShort]);
if(dateFormat == 'Rmmdd'){
if ($(htmlYearMonth).find(".ui-datepicker-year").length > 0) {
htmlYearMonth = $(htmlYearMonth).find(".ui-datepicker-year").find("option").each(function (i, e) {
console.log(e.textContent);
if (Number(e.value) - 1911 > 0) {$(e).text(Number(e.textContent) - 1911);}
}).end().end().get(0).outerHTML;
}
}
return htmlYearMonth;
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment