在JSF页面中调用Jquery datepicker

Question

I want to implement Jquery datepicker into JSF page like this example . So far I managed to call the calendar into JSF input field using this code:

//For calendar
function calendar(){                                
    // Datepicker
    $('#datepicker').datepicker({
        inline: true,
        showWeek: true,
        firstDay: 1
    });
}

I use this input field to call the code:

<h:panelGroup>
        <div id="datepicker"></div>
        <h:inputText  onfocus="calendar()" value="#{DatabaseController.formMap['userid']}" >                                       
    </h:inputText>
</h:panelGroup>

When I click on the input field the calendar is displayed.

I want to implement the example into the JQuery web site but in my case when I click outside the input field the calendar does not hide as should be. How I can fix this?

Best Wishes Peter

Answer 1

You can use the classname instead of the id. Put this JS and the end before the </h:body>

<script type="text/javascript">
    //For calendar
    $(".datepicker").datepicker({
        inline: true,
        showWeek: true,
        firstDay: 1
    });

</script>

And this is the input field with the calendar.

<h:inputText styleClass="datepicker" value="#{DatabaseController.formMap['userid']}" >   </h:inputText>

Answer 2

you need to create a event function to run the $( "#datepicker" ).datepicker("hide"); line when the element loses focus. You can do this with something like:

$("#dateInputElementIdGoesHere").blur(function() {
  $( "#datepicker" ).datepicker("hide");
});

Answer 3

first add this line in JSP page:

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />



    <script>
      $(function() {
        $( "#form1\\:enddate" ).datepicker();


      });

    </script>

<h:form id="form1">
<div>
     <h:outputLabel for="etmonth" value="End Month" style="font-size:20px"></h:outputLabel>

     <h:inputText id="enddate"  value="" style="width:208px;height:20px;margin-left:28px;"></h:inputText>
</div>  

</h:form>

And note this:

description: form1=formid and enddate =inputtext_id

praveen sharma