Jquery datepicker not closing when selected?

Question

My code is:

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 normally, fills in the fields in order, shows the correct date in order, Just when I select something, it remains open: (

And my HTML:

 <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 doesn't it close? Is it with CSS in a style tag? I do not know where I should say this. If I remove this, it does not close, and the positioning sounds.

Answer 1

jQuery UI seems to hate it when you put .datepicker on something that is not input of any type. Call .datekpicker() on #datepicked instead and configure the user interface separately.

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

Answer 2

use this script

  $(document).click(function (e) { var ele = $(e.target); if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length) $(".hasDatepicker").datepicker("hide"); }); 

Answer 3

I know this is an old thread, but maybe someone will find this useful:

I have many different placeholders on a site with different colors, so using exact colors can override the style.

this is the solution that worked:

 ::-webkit-input-placeholder { color:inherit; opacity: 1 !important;}