显示与日期选择器选择相对应的DIV

Question

使用最新版本的jquery ui的日期选择器，我想显示一个隐藏的div取决于所选择的日期。

我们的想法是让日期选择器内联显示，当用户选择一个日期时，将显示一个与该日期对应的隐藏div。

这是我到目前为止得到的…我想我需要使用onSelect，但我有麻烦把它放在一起基于其他stackoverflow问题。

    $("#inlinedatepicker").datepicker({
    onSelect: function(date) {
        $('.tohide').hide();
        $('#date' + date).show();
    },
    inline: true,
    minDate: new Date(currentYear),
    beforeShowDay: function(date) {
        if (date.getDay() == 0 || date.getDay() == 1 || date.getDay() == 2 || date.getDay() == 3) {
            return [false, ''];
        } else {
            return [true, ''];
        }
    }
});

如果您选择了2013年1月1日，则显示ID= date01/01/2013的div。我猜斜杠是不被接受的，所以有什么办法可以解决这个问题吗?

Jan 1 2013div的HTML应该是这样的…

<div id="date01/01/2013">...</div>

Answer 1

其中一个问题可能是传递给onSelect事件处理程序的"date"是一个格式为"01/18/2013"的字符串(取决于浏览器的Culture设置)。看起来你是在使用这个字符串(附加日期)来选择div。但是当jQuery选择器遇到像"/"这样的特殊字符时，它会抛出异常。一种解决方法是使用

document.getElementById('date' + date).style.display = "block"; // this works  
                                                                // with "date01/18/2013"

你也可以设置没有斜杠的选择器id，然后在onSelect事件处理程序中从字符串中删除斜杠，并在jquery选择器中使用。