jQuery UI DatePicker 設置默認值為當月最後一天：一行代碼搞定動態計算

需求

DatePicker 初始化時自動顯示**當前月份的最後一天**（如 9 月 9 日初始化 → 顯示 9 月 30 日）。

核心邏輯：構造下月 1 日再減 1 天

var d = new Date();
var lastDay = new Date(d.getFullYear(), d.getMonth() + 1, 0);  // 關鍵：day=0 表示上月最後一天
// 或
var lastDay = new Date(d.getFullYear(), d.getMonth() + 1, 1);
lastDay.setDate(lastDay.getDate() - 1);

完整初始化代碼

<input type="text" id="datepicker">

<script>
$(function () {
    var d = new Date();
    var lastDay = new Date(d.getFullYear(), d.getMonth() + 1, 0);  // 本月最後一天
    
    // 格式化為 yyyy-mm-dd
    var formatted = lastDay.getFullYear() + '-' + 
                    String(lastDay.getMonth() + 1).padStart(2, '0') + '-' + 
                    String(lastDay.getDate()).padStart(2, '0');
    
    $("#datepicker")
        .val(formatted)                    // 1. 先設置 input value
        .datepicker({ 
            dateFormat: 'yy-mm-dd'         // 2. 再初始化 datepicker
        });
});
</script>

關鍵點

1. 先 `.val()` 後 `.datepicker()`：若先初始化再設置 value，UI 不會更新
2. dateFormat 必須與 value 格式一致：`yy-mm-dd` 對應 `2024-09-30` 3. 月份補零：`String(month).padStart(2,'0')` 避免 `2024-9-5` 解析失敗

進階：動態響應「當前月份變化」

// 若頁面長期打開跨月，可用 setInterval 每天 00:00 刷新
setInterval(() => {
    var now = new Date();
    if (now.getDate() === 1) {  // 每月 1 號重新計算
        var lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
        $("#datepicker").val(formatDate(lastDay)).datepicker("setDate", lastDay);
    }
}, 3600000);

總結

DatePicker 設置默認為本月最後一天：構造 `new Date(year, month+1, 0)` 獲取最後一天 → 格式化 → 先 `.val()` 再 `.datepicker()`。核心技巧是 JS `Date` 構造函數 `day=0` 表示上月最後一天，簡潔無誤。