在初始化时将数据属性添加到 jquery ui 日期选择器

Question

我正在初始化 jquery ui 的日期选择器，如下所示：

var datesArray=['3/7/2016','3/12/2016']
$('#datepicker').datepicker({
    inline: true,
    beforeShowDay: function (date) {
        var theday = (date.getMonth()+1) +'/'+ 
            date.getDate()+ '/' + 
            date.getFullYear();
        return [true,$.inArray(theday, datesArray) >=0 ? "specialDate":''];
    }
});

这将创建日历，其中 class specialDate 应用于 datesArray 中的所有日期。

此外，我需要在日期选择器初始化时向这些相同的日期添加一个唯一的数据属性值（类似于 data-value="39"），但我不确定如何 select 这些日期。

我可以使用类似

的东西

var datavalues = {
    "3/7/2016" : "38",
    "3/12/2016" : "39"
};

其中 38 和 39 是 data-value。

这个关于 adding a custom parameter 的问题让我很接近，但我不确定如何使用它来仅在创建时添加数据属性。

Answer 1

创建日期选择器时，您将无法使用 .data() 或作为数据属性执行此操作。您可以像这样使用 onSelect：

工作示例：https://jsfiddle.net/ha5zgvby/

HTML

<p>Date:
  <input type="text" id="datepicker" />
</p>
<p>Stuff:
  <input type="text" id="special" />
</p>

JQuery

var datavalues = {
  "03/07/2016": "38",
  "03/12/2016": "39"
};
$(function() {
  var $result = $("#special");
  $('#datepicker').datepicker({
    inline: true,
    onSelect: function(dt, obj) {
      $result.val(datavalues[dt]);
    },
    altField: "#result"
  });
});

选择日期后，函数将传递所选的值。如果该值在您的对象中作为索引，那么您可以以某种方式使用它。

在初始化时将数据属性添加到 jquery ui 日期选择器

add data attribute to jquery ui datepicker on initialization

jquery

jquery-ui

jquery-ui-datepicker

custom-data-attribute