调用datepicker的selectDate方法报错：该方法不是函数，附相关代码

嘿，我来帮你排查这个selectDate is not a function的报错问题，结合你的代码和常见的datepicker使用坑点，咱们一步步来分析：

报错原因分析 #

1. 插件API方法名搞混了 #

从你代码里的language、autoClose这些配置项来看，你用的应该是bootstrap-datepicker这类第三方插件，而非jQuery UI的datepicker。但bootstrap-datepicker根本没有selectDate这个方法——它用来设置选中日期的方法是setDate；如果是jQuery UI的datepicker，它的调用方式也不是通过data()拿实例再调用，而是直接用$(elem).datepicker('setDate', 日期)这种格式。你大概率是把不同插件的API搞混了。

2. 获取实例的键名写错了 #

如果你确实需要通过实例调用方法，那可能是data()里的键名不对。比如bootstrap-datepicker的实例是存在'datepicker'这个键下的，要是你写成了别的（比如'dp'或者拼写错误），那拿到的就是undefined，自然调用不了方法。

3. 初始化顺序出问题了 #

要是你调用selectDate的代码跑在datepicker初始化完成之前——比如DOM还没加载完，或者初始化代码还没执行——那data()里根本还没存datepicker实例，调用方法肯定报错。

4. 日期格式导致初始化失败 #

你代码里用new Date($(elem).attr("data-mindate"))来设置最小/最大日期，如果data-mindate或者data-maxdate的格式不对（比如不是标准的日期格式），会导致datepicker初始化失败，实例创建不出来，后续调用方法当然会报错。

解决方案 #

步骤1：先确认你用的是哪个datepicker插件 #

先核对项目里引入的插件：

• 如果是bootstrap-datepicker：
  正确设置日期的两种方式：

  // 方式1：直接通过插件方法调用
  $(elem).datepicker('setDate', new Date());
  // 方式2：拿到实例后调用setDate
  $(elem).datepicker().data('datepicker').setDate(new Date());
  

• 如果是jQuery UI Datepicker：
  它没有selectDate方法，设置日期用setDate，调用格式是：

  $(elem).datepicker('setDate', new Date());
  

  注意：jQuery UI的datepicker不能通过data()拿实例调用方法，必须用上面这种插件方法的格式。

步骤2：修正你的调用代码 #

假设你用的是bootstrap-datepicker，把selectDate换成setDate，并且确保实例获取正确，比如：

$(".multi_datepicker").each((key, elem) => {
  const $elem = $(elem).datepicker({
    language: gon.locale,
    minDate: new Date($elem.attr("data-mindate")),
    maxDate: new Date($elem.attr("data-maxdate")),
    autoClose: true,
    onShow: (inst, animationCompleted) => {
      if (animationCompleted) return true;
      const id = Number(inst.$el.attr("id").split("_")[2]);
      if (id < 0) return true;
      const previous = $(`#search_legs_${id - 1}_date`);
      if (previous.length === 0) return true;
      // 你的其他逻辑...
    }
  });

  // 这里改成setDate
  $elem.data('datepicker').setDate(new Date());
});

步骤3：确保代码在DOM加载完成后执行 #

把你的datepicker初始化代码放在$(document).ready()里，避免DOM还没渲染完就执行初始化：

$(document).ready(() => {
  $(".multi_datepicker").each((key, elem) => {
    // 初始化datepicker的代码
  });

  // 等初始化完成后再调用日期设置方法
});

步骤4：检查日期格式是否正确 #

把data-mindate和data-maxdate改成ISO标准格式（比如YYYY-MM-DD），确保new Date()能正确解析：

<input class="multi_datepicker" data-mindate="2024-01-01" data-maxdate="2024-12-31" id="search_legs_0_date" />

内容的提问来源于stack exchange，提问作者Евгений Сухомлин