javascript - jQuery UI datepicker中的自定义月份

我需要在ui datepicker中自定义每个月。这意味着每个月将显示不同的背景图像。我想做下一个：

<div class="calendar-container CURRENT-MONTS-CLASS"><div id="datepicker"></div></div>

如何获取当前月份的名称并将其作为类添加到datepicker的容器中？

非常感谢您的帮助！

最佳答案

您可以使用月份号，例如.month1-.month12或.monthJanuary-.monthDecember（或其他格式）...就我个人而言，我会坚持使用其他文化的数字，但是您可以将这两种方法都适用于此答案。使用日期选择器的onChangeMonthYear event像这样：

$('#datepicker').datepicker({
   onChangeMonthYear: function(year, month, inst) {
       //Month number (1-12) is month
       //Month name you can get by $("#datepicker .ui-datepicker-month").text()
       $(this).closest("div.calendar-container")
              .removeClass().addClass("calendar-container month" + month);
   }
});

并在页面加载时（在创建日期选择器之后）进行初始设置，因为我在上面使用了月份号，因此如下所示：

$("div.calendar-container").addClass("month" + ($('#datepicker').datepicker("getDate").getMonth()+1));

如果您使用的是名称，请使用：

$("div.calendar-container").addClass("month" + $("#datepicker .ui-datepicker-month").text());

无论使用哪种选项，只需使用所需的背景图像/样式创建12个类。 You can test it out here。如果您希望背景实际上位于日期选择器本身上，而不是.calendar-container <div>，则只需将其添加到CSS选择器中以使其更加具体，例如：

.month1 .ui-datepicker-inline { background: url(January.jpg); }

You can test out that version here。

关于javascript - jQuery UI datepicker中的自定义月份，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4566360/