Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery UI datepicker not working when bound to a class

I've got this code:

<html>
<head>
  <link type="text/css" href="css/blitzer/jquery-ui-1.7.2.custom.css" rel="stylesheet" />   
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  <script type="text/javascript">
$(function() {
  $('.hasDatepicker').datepicker();
});
</script>
</head>
<body>
<p>date: <input type="text" name="data" class="hasDatepicker" /></p>
<input type="submit" value="send" />
</div>
</body>
</html>

When I click the input field, nothing happens. The datepicker is initialized though, when I inspect the DOM in Firebug, I get the id="dp1260260566059" added to my <input> element.

After changing the html and js to use id attribute instead of class, so having this in my code:

$(function() {
  $('#hasDatepicker').datepicker();
});

and

<p>date: <input type="text" name="data" id="hasDatepicker" /></p>

Everything works OK.

Can't datepicker from JQuery UI work for all elements of some class?

like image 866
kender Avatar asked Dec 08 '09 08:12

kender


2 Answers

Please check if the datepicker works if you change the class name of the input fields from 'hasDatePicker' to something else. The reason is, when add the datepicker to the input field using the below code:

$(function() {
  $('#date').datepicker();
});

it adds the class name "hasDatePicker" to the input field. (which is the one u r using)

like image 92
sv_in Avatar answered Sep 17 '22 20:09

sv_in


Don't use hasDatepicker as your date picker's class name. Use a different name, like date_picker.

JQuery adds the class hasDatepicker to the element that datepicker() is called on. If the element already has the class hasDatepicker, then the datepicker() function does nothing. So, just use a different class name.

like image 33
Nick Pickering Avatar answered Sep 18 '22 20:09

Nick Pickering