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

时间:2016-10-06 06:17:36

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

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

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

如何保留班级名称?

这是我的代码

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

Demo

4 个答案:

答案 0 :(得分:1)

使用Datepicker Widget的回调函数

NMAKE : fatal error U1073: don't know how to make '..\..\..\resources\langs\lang_en_US.qm'

See Demo

对于multiDatesPicker()

    $('#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);
    }

答案 1 :(得分:0)

为什么你不想覆盖现有的urn:ietf:params:xml:ns:netconf:base:1.0背景色而不是添加新的背景色?

.ut-state-default

答案 2 :(得分:0)

这是一个众所周知的棘手的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中引发错误。这个插件似乎有问题。

答案 3 :(得分:0)

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

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

以下是相同的demo