想說只是小功能就不特別發佈到 Github 上，寫成一篇短文說明，有遇到此問題的開發者可以參考看看。
使用方法
本範例主要是將民國年統一轉換成西元年，以利後端資料庫在儲存時間戳時能統一時間格式。其他案例可以參考此做法調整，像是農曆轉西元年之類的。但不適合給前臺一般使用者使用，在沒教使用方法前，使用者會不知道該怎麼輸入數值，建議僅提供內部作業人員使用。
優點：上手後，操作人員只需要專注輸入純數字即可，不用煩惱換算問題和月曆選擇。
民國年轉西元年
- 在輸入框輸入民國年六位數格式
- 舉例：民國079年09月24日 → “0790924”
- 舉例：民國111年01月01日 → “1110101”
- 輸入完立即按下【Enter】按鍵
- 程式會幫你轉換成西元年格式
- 舉例：“0790924” → 1990-09-24
- 舉例：“1110101” → 2022-01-01
西元年格式轉換
- 在輸入框輸入西元年八位數格式
- 舉例：西元1990年09月24日 → “19900924”
- 舉例：西元2022年01月01日 → “20220101”
- 輸入完立即按下【Enter】按鍵
- 程式會幫你轉換成時間格式
- 舉例：“19900924” → 1990-09-24
- 舉例：“20220101” → 2022-01-01
Source Code
1<!DOCTYPE html>
2<html>
3<head></head>
4<body>
5 <div class="col-md-3 mt-2">
6 <label class="form-label">生日</label>
7 <input type="text" class="form-control" id="inputDate" placeholder="例: 0790924 或 19900924">
8 <input type="date" class="form-control" style="display: none;" id="outputDate" readonly>
9 </div>
10<script>
11 let lastInput = "";
12 const convertDate = (input) => {
13 if (input.length === 7) {
14 const year = parseInt(input.substring(0, 3), 10) + 1911;
15 const month = input.substring(3, 5);
16 const day = input.substring(5, 7);
17 return `${year}-${month}-${day}`;
18 } else if (input.length === 8) {
19 const year = input.substring(0, 4);
20 const month = input.substring(4, 6);
21 const day = input.substring(6, 8);
22 return `${year}-${month}-${day}`;
23 } else {
24 return null;
25 }
26 }
27 const updateDate = () => {
28 const inputDate = document.getElementById("inputDate").value;
29 if (inputDate === lastInput) {
30 return;
31 }
32 lastInput = inputDate;
33 const formattedDate = convertDate(inputDate);
34 if (formattedDate) {
35 document.getElementById("outputDate").value = formattedDate;
36 document.getElementById("inputDate").style.display = "none";
37 document.getElementById("outputDate").style.display = "";
38 } else {
39 alert("請輸入正確的日期格式");
40 }
41 };
42 document.addEventListener('DOMContentLoaded', () => {
43 const inputDateElement = document.getElementById("inputDate");
44 const outputDateElement = document.getElementById("outputDate");
45 inputDateElement.addEventListener("keyup", (event) => {
46 if (event.key === "Enter") {
47 event.preventDefault();
48 updateDate();
49 }
50 });
51 inputDateElement.addEventListener("blur", updateDate);
52 outputDateElement.addEventListener("click", () => {
53 inputDateElement.style.display = "";
54 outputDateElement.style.display = "none";
55 inputDateElement.focus();
56 });
57 });
58</script>
59</body>
60</html>
