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

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

• javascript
• jquery
• jsf
• jsf-2
• jquery-ui-datepicker

• 2 With regard to "don't reinvent the wheel", PrimeFaces (which also uses jQuery UI under the covers) has a <p:calendar> which works just as you describes, without additional boilerplate code: primefaces/showcase/ui/calendarBasic.jsf – BalusC Commented May 16, 2012 at 15:26
• I agree, but I need to use my custom JQuery ponents. Into the example that I fount the calender is called into the html page as div. How I can can this into the JSF page? – Peter Penzov Commented May 16, 2012 at 15:36

3 Answers 3

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>

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");
});

first add this line in JSP page:

    <link rel="stylesheet" href="http://code.jquery./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