如何通过HTML传递动态ID调用jQuery Datepicker组件

一、HTML 代码编写 #

在需要唤起日期选择器的输入框上绑定点击事件，自动传递自身ID到初始化函数：

<input type="text" id="dateInput1" onclick="initDatepicker(this.id)" placeholder="选择日期">
<input type="text" id="dateInput2" onclick="initDatepicker(this.id)" placeholder="选择日期">

用this.id自动获取当前输入框的ID，无需手动硬编码，适配任意ID的输入框。

二、JavaScript 函数实现 #

结合你提供的默认配置，编写按需初始化的函数，同时保留原有批量初始化逻辑：

$(function () {
  // 设置Datepicker全局默认配置（修正原配置中月份重复的错误）
  $.datepicker.setDefaults({
    monthNames: [
      "1月", "2月", "3月", "4月", "5月", "6月",
      "7月", "8月", "9月", "10月", "11月", "12月"
    ],
    monthNamesShort: [
      "1月", "2月", "3月", "4月", "5月", "6月",
      "7月", "8月", "9月", "10月", "11月", "12月"
    ],
    dayNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
    dayNamesShort: ["日", "月", "火", "水", "木", "金", "土"],
    dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
    weekHeader: "周",
    dateFormat: "yy/mm/dd",
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: true,
    changeMonth: true,
    changeYear: true,
    yearRange: "-90:+90",
  });

  // 保留原有批量初始化的代码（按需保留）
  $("#startDepDate, #endDepDate, #startRegDate, #endRegDate, #searchStartDate, #searchEndDate, #searchSendDate, #kikanstart, #kikanend, #searchDateStart, #searchDateEnd, #authDateStart, #authDateEnd, #searchdateStart, #searchdateEnd, #searchCanceldateStart, #searchCanceldateEnd, #searchPostDateFrom, #searchPostDateTo, #startDate, #endDate, #d1From, #d1To, #registerStart, #registerEnd, #acDateStart, #acDateEnd, #acRegStart, #acRegEnd" ).datepicker({
    showOn: "button",
    buttonText: "▼",
  });
});

// 接收ID参数，按需初始化Datepicker的函数
function initDatepicker(id) {
  const $target = $("#" + id);
  // 避免重复初始化，先判断元素是否已绑定Datepicker
  if (!$target.data("datepicker")) {
    $target.datepicker({
      showOn: "button",
      buttonText: "▼",
    });
    // 初始化完成后直接唤起日期选择器
    $target.datepicker("show");
  }
}

关键说明 #

1. 防重复初始化：通过$target.data("datepicker")判断元素是否已绑定Datepicker，避免多次点击导致的异常。
2. 配置复用：全局默认配置会自动应用到所有新初始化的Datepicker，无需重复编写基础参数。
3. 即时唤起交互：初始化后调用datepicker("show")，点击输入框直接弹出选择器，符合需求。

内容的提问来源于stack exchange，提问作者SAM Jubayer