CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Aurelin
Aurelin

Reputation: 763

JQuery UI Datepicker not firing on click (no errors)

I am trying to get a datepicker showing up when clicking on a form field, but the datepicker dialog doesn't show up. Interestingly, the jquery includes the datepicker div but then simply doesn't show up or get filled with any content.

The javascript error console doesn't show any errors, as far as I can see.

The head section (shortened) :

<link rel="stylesheet" href="/theme/sporthub/scripts/jqueryui/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://d2oqbtqshlvsrd.cloudfront.net/jquery.corner.js"></script>
<script type="text/javascript" src="/theme/sporthub/scripts/jqueryui/jquery-ui-1.8.16.min.js"></script>

The form field :

<div class="field1"><input id="donation_start" type="text" name="donation_start" value="<?= $a_donationsSetting['donation_start'] ?>" class="date_123 marginL14 hasDatepicker" /></div>

The datepicker call :

$(document).ready(function() {
   $( "#donation_start" ).datepicker();
});

When I open the site and look at it using Firebug, I can see the following line showing (It is not in the actual source code so I guess it gets included by datepicker..??)

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div"></div>

I have tried to call the datepicker by using $('.hasDatepicker').datepicker instead, and also by not putting it within the document.read(). No success.

What puzzles me most is that the datepicker is used in another included file as well, and it works perfectly fine.

Upvotes: 3

Views: 3824

Answers (2)

user3328674
user3328674

Reputation: 1

I had a similar issue, z-index was the culprit. It uses a z-index relative to the input, so be sure your input field has CSS position:relative set, in my case I had to adjust the z-index to 10 for it to work;

Upvotes: 0

Aurelin
Aurelin

Reputation: 763

My coworker just showed up and told me to remove the hasDatepicker class. That fixed the issue.

Apparently, jquery-ui adds this class in the process, and when it is already there, the datepicker won't fire.

Upvotes: 15

Related Questions