0

默认情况下，jQuery UI 日期选择器会在选择日期时重置日历 HTML。我希望能够更改/添加日历的元素（添加图像、背景等）并在单击日期后让它们保持不变。

例如，此脚本以 24 日蓝色背景作为内联日期选择器开始。当您单击另一个日期（例如 15 日）时，HTML 将重置并且蓝色背景消失。单击日期后，我希望它保持蓝色。

<script>

$(function(){
    $('#cal').datepicker({
        onSelect: function(dateText, inst) {
            console.log(dateText);
            // dont do anything else
        }
    });
    $('.ui-state-default:contains(24)').css('background-color','blue');
});

</script>   

<div id='cal'></div>

演示：http: //jsfiddle.net/DtvZM/

看看当你点击一天时，第 24 天如何从蓝色变为白色。我希望它保持蓝色。

注意：这只是一个演示问题的示例，而不是我的实际代码。

在修改 jQuery UI 小部件代码之前，我想看看是否有一个简单的解决方案。

4

2 回答 2

0

我已经解决，如果不修改 UI 日期选择器代码，这是不可能的，这就是我最终要做的 -

在 _selectDate 方法中，我更改了行：

if (inst.inline)
    this._updateDatepicker(inst);

到

if (inst.inline) {
    inst.stay = true;
    this._updateDatepicker(inst);
    inst.stay = false;
}

然后在 _updateDatepicker 方法中，我改变了

inst.dpDiv.empty().append(this._generateHTML(inst));

到

if (!inst.stay) {
    inst.dpDiv.empty().append(this._generateHTML(inst));
}

现在UI选择了日期时，UI将不会重置日历HTML。

于 2012-05-18T05:47:36.973 回答
-1

回调$('.ui-state-default:contains(24)').css('background-color','blue'); 里面不能动吗？onSelect我相信你仍然需要这样做以确保新选择的 24 也变成蓝色。

另外，我想我会添加类并将实际样式保留在 CSS 中。

$(function(){
    $('#cal').datepicker({
        onSelect: function(dateText, inst) {
            console.log(dateText);
            $('.ui-state-default:contains(24)').css('background-color','blue');
            // dont do anything else
        }
    });
});

编辑：我认为您还需要重置每个上的所有 .ui-state-default 元素，onSelect以便如果用户首先选择“24”并且它变成蓝色，然后选择“17”，我相信它仍然是蓝色的， 所以：

$(function(){
    $('#cal').datepicker({
        onSelect: function(dateText, inst) {
            console.log(dateText);
            $('.ui-state-default').css('background-color','transparent');
            $('.ui-state-default:contains(24)').css('background-color','blue');
            // dont do anything else
        }
    });
});
于 2012-05-17T23:51:11.210 回答