Question

My code:

 var availableDates = ["23-1-2013","24-1-2013","25-1-2013"];

        function available(date) {
          dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
          if ($.inArray(dmy, availableDates) !== -1) {
            return [true, "","Available"];
          } else {
            return [false,"","unAvailable"];
          }
        }


        $("a.pickadate").click(function () {
            $("#datepicker").datepicker({
                    beforeShowDay: available,
                    altField: '#datepicked',
                    dateFormat: "dd-mm-yy"
                });
        });
        $("#datepicker a.ui-state-default").click(function () {
            $("#datepicker").datepicker("hide");
        });

It opens fine, populates the fields fine and shows the correct date’s fine as well; just when I select something it stays open.

And my HTML is:

<input type="text" id="datepicked" name="datepicked" size="8" style="float: left;">
    <a href="javascript:void();" class="pickadate">
        <img src="media/images/icon-calendar.gif" style="float: left; margin-right: 10px;">
    </a>    
    <!-- Datepicker -->
    <div id="datepicker" style="position: absolute; left: 670px; border: 0px; z-index: 5000; top: 247px;"></div>

Why isn’t it closing? Is it to do with the CSS in the style tag? I don’t know where I should put that otherwise. If i take that out, it doesn’t close, and the positioning is awful.

Answer 1

jQuery UI seems to hate it when you put .datepicker on something that’s not an input of some type. Call .datekpicker() on #datepicked instead, and style the UI separately.

http://jsfiddle.net/wvxmF/1/