将自定义类名添加到 jquery 日历单元格答案

【问题标题】：Add custom classname to jquery calendar cell将自定义类名添加到 jquery 日历单元格
【发布时间】：2016-10-06 06:17:35
【问题描述】：

我正在使用 Jquery 日历。我正在尝试在日历的每个单元格中插入一个新的类名。它被添加，但在单击日历时被删除。

基本上它会在每次点击时刷新日历，因此新添加的类在刷新时会被删除。

如何保留类名？

这是我的代码

$(function() {
  $('#custom-date-format').multiDatesPicker({
    dateFormat: "y-m-d"
  });
  $('.ui-state-default').addClass("calendar_bg");
});

Demo

【问题讨论】：

标签： javascript jquery css calendar jquery-ui-datepicker

【解决方案1】：

使用 Datepicker Widget 的回调函数

    $('#DatePicker').datepicker({
       //The calendar is recreated OnSelect for inline calendar
        onSelect: function (date, dp) {
           updateDatePickerCells();
        },
        onChangeMonthYear: function(month, year, dp) {
            updateDatePickerCells();
        },
        beforeShow: function(elem, dp) { //This is for non-inline datepicker
            updateDatePickerCells();
        }
    });

    updateDatePickerCells();

    function updateDatePickerCells(dp) {
        /* Wait until current callstack is finished so the datepicker
           is fully rendered before attempting to modify contents */
        setTimeout(function () {
            $('.ui-datepicker td > *').each(function (idx, elem) {
                $(this).addClass("calendar_bg");
            });
        }, 0);
    }

See Demo

对于 multiDatesPicker()

$(function() {
    $('#from-input').multiDatesPicker({
        beforeShow: function(elem, dp) {
            updateDatePickerCells();
        }
    });
});

【讨论】：

【解决方案2】：

您为什么不打算覆盖现有的.ut-state-default background-color 而不是添加新的？

.ui-state-default{background: #ffeb3b !important}

【讨论】：

我将类用于其他目的，不仅仅是为了 bg 颜色，所以很高兴知道添加类名的可能性。

【解决方案3】：

这是一个已知的棘手的 jQuery UI 日历问题，请参阅此问题 jQuery ui - datepicker prevent refresh onSelect

无论如何，解决方法是在选择时添加inst.inline = false;，就像这样

$('#custom-date-format').multiDatesPicker({
    dateFormat: "y-m-d",    
    onSelect: function(date, inst){
        inst.inline = false;
        $('.ui-state-default').addClass("calendar_bg");
    }    
});

查看demo，但请注意，它会在 multidatepicker.js 中引发错误。这个插件好像有问题。

【讨论】：

但是当你点击下个月时，这会删除课程。

【解决方案4】：

最好使用现有的类名并覆盖其默认样式。

添加此样式.ui-widget-content a.ui-state-default { background: #ffeb3b }

这里也是demo

【讨论】：