Question

使用最新版本的jquery ui的datepicker，我想根据所选日期显示一个隐藏的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。我认为不接受斜杠，所以有办法解决这个问题吗？

2013年1月1日div的HTML看起来像这样......

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

Answer 1

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

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

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

显示与datepicker选择对应的DIV

1 个答案: