javascript 在 JSF 页面中调用 Jquery 日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10621680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call Jquery datepicker in JSF page
提问by Peter Penzov
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:
我想像这个例子一样将 Jquery datepicker 实现到 JSF 页面中。到目前为止，我设法使用以下代码将日历调用到 JSF 输入字段中：
//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?
我想将该示例实现到 JQuery 网站中，但在我的情况下，当我在输入字段外单击时，日历不会按原样隐藏。我该如何解决这个问题？
Best Wishes Peter
最好的祝福彼得
回答by user1285928
You can use the classname instead of the id. Put this JS and the end before the </h:body>
您可以使用类名而不是 id。把这个 JS 和结尾放在</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>
回答by Nildarar
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:
您需要创建一个事件函数来$( "#datepicker" ).datepicker("hide");在元素失去焦点时运行该行。您可以使用以下方法执行此操作：
$("#dateInputElementIdGoesHere").blur(function() {
$( "#datepicker" ).datepicker("hide");
});
回答by user3531714
first add this line in JSP page:
首先在 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>
And note this:
并注意这一点：
description: form1=formid and enddate =inputtext_id
praveen sharma
夏尔马
