显示对应于日期选择器选择的 DIV答案

【问题标题】：Show DIV corresponding to datepicker selection显示对应于日期选择器选择的 DIV
【发布时间】：2012-12-17 03:02:53
【问题描述】：

使用最新版本的 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>

【问题讨论】：

您能否更新使用此代码时遇到的错误？
我没有收到错误。日期选择器显示正常，但是选择的日期不会打开对应的div。我不知道我是否正确捕获了 .show(); 的日期；声明。
我有点困惑，那么这个隐藏的 div 里到底是什么。可以提供html吗？
尝试在onSelect函数中添加alert('#date' + date)，看看是否与div ID相同。
感谢 Wolf，您的警报建议以及其他一些反馈帮助我修改了字符串，以便选择器正常工作。 :]

标签： jquery html user-interface datepicker

【解决方案1】：

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

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

您还可以设置不带斜线的选择器 id，然后在 onSelect 事件处理程序中从字符串中删除斜线，并在 jquery 选择器中使用它。

【讨论】：

您似乎理解了这个问题，我也认为这可能与日期格式为斜杠这一事实有关，但我不确定如何使用您提供的代码行.
您可以使用我提供的代码行，而不是 $('#date' + date).show(); 行。但是，为了保持 DOM 元素选择器代码的一致性，我认为最好使用选项 2，即在没有斜杠的情况下命名 div，并在事件处理程序中从传入的“日期”参数中删除斜杠，之前使用 jQuery 显示 div。 如果它有助于解决您的问题，请将我的解决方案标记为答案。