jquery - 在初始化时向 jquery ui datepicker 添加数据属性

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":''];
    }
});

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

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

我可以使用类似的东西

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

其中38和39是数据值。

这个问题关于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"
  });
});

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