如何为表格中每一行的日期选择器动态设置起始星期几-php教程-PHP中文网

如何为表格中每一行的日期选择器动态设置起始星期几

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

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

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

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

✅ 正确实现思路

语义化区分每行的日期控件
避免使用泛化的 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 类名便于批量初始化。

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

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

逐行异步获取起始日并动态设置 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"}]}，保持前后端契约清晰。