JQuery Date Picker with JSF

I'm using JQuery Date Picker plugin for my JSF.

It works fine for a page with only 1 date field but with more than 1 it cannot populate the date value to my input field.

In my case, i would like to have start date and end date.

Below is my code:

JQUERY

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

JSF

<h:inputText id="from" value="#{UserManagerBean.startDate}" required="false" styleClass="datefrom" />
<h:inputText id="to" value="#{UserManagerBean.endDate}" required="false" styleClass="dateto" />

For your information, i tried with 2 html input fields and it works fine as well. Please help!!! Thank You

Since this one got bumped to the top...

This should work (slight tune up might be needed):

    function initDatePickers() {
        $(document).delegate("#from, #to", "focusin", function() {
            var $this = $(this);
            $this.datepicker({
                onClose: function(dateText, inst) { 
                  $(".ui-datepicker-calendar").hide();
                }
            });
            $this.attr( 'readOnly' , 'true' );
        }); 


        $(document).delegate("#from, #to", "focus", function() {
            $(".ui-datepicker-calendar").hide();
        });         
    }

I think you better remove the styleClass from your inputs...