how to use jquery datepicker in jsf

Question

I want to use the jquery datepicker: http://jqueryui.com/datepicker/

But I don't know what I need, and here is my code:

<script src="css/jquery-1.9.1.js"></script>
<script src="css/jquery.ui.core.js"></script>
<script src="css/jquery.ui.widget.js"></script>
<script src="css/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
    $(".datepicker").datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true
});

The place I put my datepick is like:

<h:inputText styleClass="datepicker"></h:inputText>

But now, when I click on the inputText, the datepicker is not displayed.

Answer 1

Make sure you set up datepicker after page is loaded:

$(document).ready(function() {
  $(".datepicker").datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true})
});