Call Jquery datepicker in JSF-Seite

Ich umsetzen will, Jquery datepicker in JSF-Seite wie diese Beispiel.
Bisher konnte ich rufen Sie den Kalender in JSF-input-Feld mit diesem code:

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

Ich dieses Eingabe-Feld zum aufrufen der code:

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

Wenn ich auf das Eingabefeld der Kalender wird angezeigt.

Call Jquery datepicker in JSF-Seite

Möchte ich das Beispiel implementieren in der JQuery-Website, aber in meinem Fall, wenn ich auf eine Stelle außerhalb des Eingabefeldes der Kalender nicht verbergen, wie sein sollte. Wie kann ich dieses Problem beheben?

Die Besten Wünsche
Peter

Mit Bezug auf "das Rad nicht neu erfinden", PrimeFaces (die auch verwendet jQuery UI unter der Haube) hat ein <p:calendar> die genauso funktioniert, wie Sie beschreibt, ohne zusätzlichen boilerplate code: primefaces.org/showcase/ui/calendarBasic.jsf
Ich bin damit einverstanden, aber ich muss an meine custom JQuery-Komponenten. In dem Beispiel, dass ich die Quelle der Kalender aufgerufen wird, in die html-Seite als div. Wie kann ich, können diese in der JSF-Seite?

InformationsquelleAutor Peter Penzov | 2012-05-16

  1. 2

    Können Sie die Klassennamen anstelle der id. Setzen Sie dieses JS und das Ende vor den </h:body>

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

</script>

    - Und das ist das input-Feld mit dem Kalender.

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

    InformationsquelleAutor user1285928

  2. 1

    erstellen Sie eine Ereignis-Funktion, die zum ausführen der $( "#datepicker" ).datepicker("hide"); Zeile, wenn das element den Fokus verliert. Sie können dies tun, mit so etwas wie:

    $("#dateInputElementIdGoesHere").blur(function() {
  $( "#datepicker" ).datepicker("hide");
});
    Ich bearbeitet den code, aber es funktioniert nicht: pastebin.com/cnRiDA3E

    InformationsquelleAutor Nildarar

  3. -2

    zuerst fügen Sie diese Zeile in die JSP-Seite:

        <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>


    Und beachten Sie:

    description: form1=formid and enddate =inputtext_id

    praveen sharma

    InformationsquelleAutor user3531714

Schreibe einen Kommentar