HTML 輸入框整合日期選擇器：推薦 My97 DatePicker 使用教學

需求

文字輸入框旁附上日曆圖示，點擊彈出日期選擇器，支援自由選取日期。

推薦方案：My97 DatePicker

輕量、零依賴、相容 IE6+、行動裝置友善，官網：https://www.my97.net/dp/demo/index.htm

快速整合步驟

1. 下載套件，解壓至專案資料夾（如 /assets/My97DatePicker/）。
2. 引入核心 JS：<script src="/assets/My97DatePicker/WdatePicker.js"></script>
3. 輸入框加上 onclick="WdatePicker()" 或 class="Wdate"。

完整範例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>日期選擇器示範</title>
<script src="/assets/My97DatePicker/WdatePicker.js"></script>
<style>
  .date-input { padding:6px 10px; width:160px; }
  .date-btn { vertical-align:middle; cursor:pointer; margin-left:4px; }
</style></head><body>
<h3>基本用法</h3>
<input type="text" class="date-input Wdate" placeholder="點選日期">

<h3>自訂格式與範圍</h3>
<input type="text" class="date-input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd', minDate:'2020-01-01', maxDate:'2030-12-31'})" placeholder="2020-2030 年間">

<h3>含時間選擇</h3>
<input type="text" class="date-input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss', alwaysUseStartDate:true})" placeholder="日期時間">

<h3>雙語言（中/英）切換</h3>
<input type="text" class="date-input" onclick="WdatePicker({lang:'en'})" placeholder="English">
<input type="text" class="date-input" onclick="WdatePicker({lang:'zh-tw'})" placeholder="繁體中文">
</body></html>

常用配置參數

現代替代方案（無 jQuery 依賴）

• Flatpickr：npm i flatpickr，flatpickr(input, {dateFormat:"Y-m-d"})，極輕量、模組化。
• Date-fns + 自訂 UI：函數式日期工具庫，搭配 Popper.js 定位。
• 原生 <input type="date">：現代瀏覽器支援，行動裝置原生體驗佳，但樣式客製化受限。

選擇建議

• 維護舊專案、需相容 IE、零建置流程 → My97。
• 新專案、模組化建置、追求現代 UX → Flatpickr 或 原生 date + Polyfill。