Question

Using the latest version of jquery ui’s datepicker, I want to show one hidden div depending on the date selected.

The idea is to have datepicker displayed inline, and when the user selects a date, a hidden div corresponding with that date will show.

Here’s what I’ve got so far… I think I need to use onSelect but I’m having trouble putting it together based on other stackoverflow questions.

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

So if you selected January 1, 2013, the div with ID= date01/01/2013 would display. I assume the slashes aren’t accepted, so is there a way to work around this?

The HTML for the Jan 1 2013 div would look like this…

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

Answer 1

One of the issues could be that the “date” that is passed into the onSelect eventhandler is a string in the format “01/18/2013” (depending on the Culture setting of the browser). And it looks like you are using this string (appended with date) to select the div. But the jQuery selectors will throw an exception when it encounters special characters like “/”. One work around is to use

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

You could also set the selector id without the slashes, and then in the onSelect event handler remove the slashes from the string, and use that in the jquery selector.