如何点击jQuery UI日期选择器时获取对应data-id并传至服务器

问题分析 #

你当前的代码有两个核心问题导致只能拿到第一个data-id：

• 直接通过$('.calendar').data("id")获取的是第一个匹配到的.calendar元素的data-id，不会随点击的日期选择器变化。
• HTML中存在重复的id="dateFrom"和id="dateTo"，这违反了HTML的id唯一性规则，会导致jQuery选择器$('#dateFrom')只能选中第一个元素。

修复方案 #

我们需要针对每个.calendar容器单独初始化Datepicker，并在事件回调中动态获取当前日期选择器所属容器的data-id：

第一步：修正HTML的重复id问题

先把重复的id移除（或者改成唯一值，不过这里用类足够）：

<div class="form-group row calendar" data-id="5799f281049ac12422000033">
 <div class="col-sm-4">
 <input type="text" class="form-control dateFrom hasDatepicker" name="dateFrom" placeholder="Arrival" readonly="">
 </div>
 <div class="col-sm-4">
 <input type="text" class="form-control dateTo hasDatepicker" name="dateTo" placeholder="Departure" readonly="">
 </div>
</div>
<div class="form-group row calendar" data-id="5799f281049ac12422000034">
 <div class="col-sm-4">
 <input type="text" class="form-control dateFrom hasDatepicker" name="dateFrom" placeholder="Arrival" readonly="">
 </div>
 <div class="col-sm-4">
 <input type="text" class="form-control dateTo hasDatepicker" name="dateTo" placeholder="Departure" readonly="">
 </div>
</div>
<div class="form-group row calendar" data-id="5799f281049ac12422000035">
 <div class="col-sm-4">
 <input type="text" class="form-control dateFrom hasDatepicker" name="dateFrom" placeholder="Arrival" readonly="">
 </div>
 <div class="col-sm-4">
 <input type="text" class="form-control dateTo hasDatepicker" name="dateTo" placeholder="Departure" readonly="">
 </div>
</div>

第二步：修改jQuery代码

遍历每个.calendar容器，为内部的日期选择器绑定Datepicker，并在回调中动态获取当前容器的data-id：

$(function() {
  // 遍历每个calendar容器，确保每个日期选择器绑定到所属容器的data-id
  $('.calendar').each(function() {
    var $currentCalendar = $(this);
    var containerDataId = $currentCalendar.data('id');
    
    // 初始化当前容器内的dateFrom选择器
    $currentCalendar.find('.dateFrom').datepicker({
      dateFormat: "dd.mm.y",
      onChangeMonthYear: function(year, month, inst) {
        // 生成当月第一天作为start_date（可根据你的实际需求调整）
        var start_date = $.datepicker.formatDate("dd.mm.y", new Date(year, month - 1, 1));
        
        $.ajax({
          url: '/availability',
          dataType: 'JSON',
          type: 'POST',
          async: false, // 注意：同步请求会阻塞UI，建议尽量改成异步
          data: { 
            dateFrom: start_date, 
            data_id: containerDataId 
          },
          success: function(response) {
            array = response.disableDates;
          }
        });
      }
    });
    
    // 初始化当前容器内的dateTo选择器
    $currentCalendar.find('.dateTo').datepicker({
      dateFormat: "dd.mm.y",
      onChangeMonthYear: function(year, month, inst) {
        var start_date = $.datepicker.formatDate("dd.mm.y", new Date(year, month - 1, 1));
        
        $.ajax({
          url: '/availability',
          dataType: 'JSON',
          type: 'POST',
          async: false,
          data: { 
            dateFrom: start_date, 
            data_id: containerDataId 
          },
          success: function(response) {
            array = response.disableDates;
          }
        });
      }
    });
  });
});

关键改动说明 #

• 使用$('.calendar').each()遍历每个容器，确保每个日期选择器都绑定到所属容器的data-id。
• 用$currentCalendar.find('.dateFrom')代替全局的$('#dateFrom')，彻底解决重复id导致的选择器错误。
• 在回调中直接使用预先获取的containerDataId，也可以用$(this).closest('.calendar').data('id')动态获取，效果一致。
• 补充了start_date的生成逻辑（如果你的需求不是当月第一天，可以根据业务场景调整）。

额外建议 #

• 尽量避免使用async: false，同步AJAX请求会阻塞浏览器UI，影响用户体验，建议改成异步并调整逻辑。
• 如果需要用返回的disableDates来禁用日期，记得在Datepicker的beforeShowDay回调中过滤这些日期。

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