javascript - 在 JSF 页面中调用 Jquery datepicker

Question

我想像这个例子一样将 Jquery datepicker 实现到 JSF 页面中。到目前为止，我设法使用以下代码将日历调用到 JSF 输入字段中：

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

我使用这个输入字段来调用代码：

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

当我单击输入字段时，会显示日历。

我想在 JQuery 网站中实现该示例，但在我的情况下，当我在输入字段之外单击时，日历不会按应有的方式隐藏。我该如何解决这个问题？

最好的祝福彼得

Answer 1

您可以使用类名而不是 id。把这个 JS 和 end 放在</h:body>

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

</script>

这是带有日历的输入字段。

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

Answer 2

您需要创建一个事件函数来$( "#datepicker" ).datepicker("hide");在元素失去焦点时运行该行。你可以这样做：

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

Answer 3

首先在 JSP 页面中添加这一行：

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

请注意：

description: form1=formid and enddate =inputtext_id

普拉文夏尔马