本文介绍如何为 HTML 表格中每一行独立配置 jQuery UI Datepicker 的 firstDay 选项，使其根据该行对应数据的起始日期自动调整周起始日（如周五起始则显示周五–周四），避免多行间相互覆盖。

本文介绍如何为 html 表格中每一行独立配置 jquery ui datepicker 的 `firstday` 选项，使其根据该行对应数据的起始日期自动调整周起始日（如周五起始则显示周五–周四），避免多行间相互覆盖。

在实际业务场景中（如课程安排、排班系统或内容周期管理），常需为表格每行绑定独立的日期选择器，并要求其日历视图以该行所选日期所在的星期几为起点（例如：某行起始日为周五，则日历应从周五开始显示，而非默认的周日）。然而，若对所有 .datepicker 元素统一初始化（如 $('.datepicker').datepicker({ firstDay: 5 })），会导致所有实例共享同一 firstDay 值——后初始化的行会覆盖前一行的设置，造成逻辑错乱。

根本问题在于：jQuery UI Datepicker 的 firstDay 是实例级配置，不可全局复用；必须为每个输入框单独初始化或动态更新其选项。

✅ 正确实现思路

1. 语义化区分每行的日期控件
   避免使用泛化的 class="datepicker"，改为按功能+行标识双重标记：

   <input 
     class="datepickerStart contentsDateInput" 
     item="<?= $ceId ?>" 
     for="<?= $ceId ?>" 
     name="ceItem[<?= $ceId ?>][ceStartDate]" 
     value="<?= date('d/m/Y', strtotime($ceStartDate)) ?>" 
   />
   <input 
     class="datepickerEnd contentsDateInput" 
     item="<?= $ceId ?>" 
     for="<?= $ceId ?>" 
     name="ceItem[<?= $ceId ?>][ceEndDate]" 
     value="<?= date('d/m/Y', strtotime($ceEndDate)) ?>" 
   />

   此处 item 和 for 属性用于 JS 精确定位，datepickerStart/datepickerEnd 类名便于批量初始化。

2. 初始化时不设 firstDay，留待动态注入
   初始仅启用基础功能，避免硬编码：

   function initDatePickers() {
     $('.datepickerStart, .datepickerEnd').datepicker({
       changeMonth: true,
       changeYear: true,
       dateFormat: "dd/mm/yy",
       onSelect: function() { $(this).change(); }
     });
   }

3. 逐行异步获取起始日并动态设置 firstDay
   使用 each() 遍历每个 .datepickerStart，通过 item 属性读取当前行 ID，发起 AJAX 请求获取该行原始起始日期，解析后计算星期索引（0 = Sunday, 1 = Monday, ..., 5 = Friday, 6 = Saturday），再调用 datepicker('option', 'firstDay', index) 单独设置，并刷新控件：

   $(function() {
     initDatePickers(); // 先初始化所有实例
   
     $('.datepickerStart').each(function(index, element) {
       const ceId = $(element).attr('item');
       if (!ceId) return;
   
       $.ajax({
         method: 'POST',
         url: 'ajax/file.loadDates.php',
         data: {
           method: 'datepickerStart',
           ceCmId: '<?= $ceCmId ?>',
           ceAgId: '<?= $ceAgId ?>',
           ceId: ceId,
           ceCategory: '<?= $ceCategory ?>'
         },
         dataType: 'json'
       }).done(function(response) {
         if (response.status === 'success' && response.dates.length) {
           const dateStr = response.dates[0].dateStart; // e.g., "15/04/2025"
           const [day, month, year] = dateStr.split('/');
           const dateObj = new Date(year, month - 1, day);
           const firstDayIndex = dateObj.getDay(); // 0-6
   
           // 同时更新本行的起始日与结束日日期选择器
           $(`.datepickerStart[for="${ceId}"]`).datepicker('option', 'firstDay', firstDayIndex);
           $(`.datepickerEnd[for="${ceId}"]`).datepicker('option', 'firstDay', firstDayIndex);
   
           // 强制重绘以生效
           $(`.datepickerStart[for="${ceId}"]`).datepicker('refresh');
           $(`.datepickerEnd[for="${ceId}"]`).datepicker('refresh');
         }
       });
     });
   });

? 关键点说明：

• datepicker('option', 'firstDay', n) 是 jQuery UI 提供的安全 setter，支持运行时修改；
• datepicker('refresh') 必须调用，否则界面不会重新渲染周标题；
• 使用 [for="${ceId}"] 属性选择器确保精准作用于当前行，杜绝跨行污染；
• PHP 后端 file.loadDates.php 应返回结构如 {"status":"success","dates":[{"dateStart":"15/04/2025"}]}，保持前后端契约清晰。

⚠️ 注意事项

• 性能优化：若行数较多（>50），建议合并请求（如一次拉取全部行的 ceId → startDay 映射），避免 N 次 AJAX；
• 错误处理：AJAX 失败时应降级为默认 firstDay: 0（周日）并记录错误日志；
• 时区一致性：确保 PHP strtotime() 与 JS Date() 解析使用相同时区（推荐统一用 UTC 存储，前端按本地时区显示）；
• 兼容性：确认 jQuery UI 版本 ≥ 1.9，旧版 refresh 方法行为可能不同。

通过上述方式，即可实现每行日期选择器完全独立、按需定制周起始日，兼顾灵活性与可维护性。