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

Question

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

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

如何保留 class 名称？

这是我的代码

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

Demo

Answer 1

你为什么不考虑覆盖现有的 .ut-state-default 背景色而不是添加新的？

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

Answer 2

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

无论如何，解决方法是在 select 上添加 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，但请注意，它在 multidatespicker.js 中抛出错误。这个插件似乎有问题。

Answer 3

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

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

这里也是一样demo

Answer 4

使用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();
        }
    });
});

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

Add custom classname to jquery calendar cell

javascript

jquery

css

calendar

jquery-ui-datepicker