如何获取Datepicker输入框的ID属性？多实例回调报错排查

这个问题的核心原因是daterangepicker的回调函数内部的this上下文并不是指向你绑定的input元素，而是指向daterangepicker的实例对象，所以你无法通过$(this)获取到input的ID属性。下面给你几种可行的解决方案：

方案1：提前保存input元素的引用 #

在初始化daterangepicker之前，先把目标input元素的jQuery引用保存下来，在回调函数里直接使用这个引用即可。如果是多个输入框的场景，用each循环逐个绑定，每个元素单独保存引用：

单个输入框场景 #

// 先保存input的引用
const $birthdayInput = $('input[name="birthday"]');

$birthdayInput.daterangepicker({
  singleDatePicker: true,
  showDropdowns: true,
  minYear: 2000,
  maxYear: 2100,
  locale: localeDate,
}, function(start, end, label) {
  // 直接用提前保存的引用获取ID
  console.log($birthdayInput.attr("id"));
  
  // 你的日期处理逻辑
  const year = start.format("YYYY");
  const month = start.format("MM");
  const day = start.format("DD");
});

多个输入框场景 #

// 假设所有daterangepicker输入框都有共同的类名，比如daterangepicker-input
$('input.daterangepicker-input').each(function() {
  const $currentInput = $(this);
  
  $currentInput.daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 2000,
    maxYear: 2100,
    locale: localeDate,
  }, function(start, end, label) {
    // 获取当前输入框的ID
    console.log($currentInput.attr("id"));
    
    // 日期处理逻辑
    const year = start.format("YYYY");
    const month = start.format("MM");
    const day = start.format("DD");
  });
});

方案2：使用daterangepicker的事件监听 #

daterangepicker提供了apply.daterangepicker事件，在这个事件的处理函数中，this会指向触发事件的input元素，这样你就能正常获取ID了：

// 初始化daterangepicker
$('input[name="birthday"]').daterangepicker({
  singleDatePicker: true,
  showDropdowns: true,
  minYear: 2000,
  maxYear: 2100,
  locale: localeDate,
});

// 监听apply事件
$('input[name="birthday"]').on('apply.daterangepicker', function(ev, picker) {
  // 这里的this就是input元素
  console.log($(this).attr("id"));
  
  // 通过picker对象获取选中的日期
  const start = picker.startDate;
  const year = start.format("YYYY");
  const month = start.format("MM");
  const day = start.format("DD");
});

为什么原代码会报错？ #

再补充说明一下：daterangepicker的回调函数（也就是你传入的第二个参数）内部的this指向的是daterangepicker的实例对象，而不是绑定的input元素。你可以在回调里console.log(this)看看，就能看到它是picker实例，包含picker的配置、方法等，自然没有input的id属性。

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