Date Picker 无法处理我的 jsf 和 xhtml 文件任何人都可以指导我吗

Question

这是我的 xhtml 页面，我在该页面上使用 JSF 框架，当我在我的项目外尝试此代码时它可以正常工作，但是当我尝试与我的 html 视图集成时它不起作用kidly帮我解决这个问题

     <?xml version="1.0" encoding="ISO-8859-1" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core" 
             xmlns:p="http://primefaces.org/ui"
        xmlns:rich="http://richfaces.org/rich"
         xmlns:a4j="http://richfaces.org/a4j">

        <h:head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>EDPMS Process</title>
    <link rel="stylesheet" href="css/jquery-ui.css" />
     <link rel="stylesheet" href="css/style.css" />

      <link href="css/datepicker.css" rel="stylesheet" />
     <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" href="css/bootstrap-dropdown.css" />
    <link type="text/css" rel="stylesheet" href="css/headfoot.css" />
    <link href="css/font-awesome.css" rel="stylesheet" />

    <script src="js/jquery-1.9.1.js" type=""></script>
      <script src="js/jquery-ui.js" type=""></script>
     <script src="js/bootstrap.js" type="text/javascript"></script>
      <script src="src/main/webapp/js/bootstrap-datepicker.js" type="text/javascript"></script>
      <script src="js/bootstrap-datepicker.js" type="text/javascript">     </script>
      <script type="text/javascript" src="js/jquery.cookie.min.js"></script>
       <script type="text/javascript" src="js/jquery.collapsible.min.js"></script>
      <script type="text/javascript" src="js/highlight.pack.js"></script>
      <script type="text/javascript" src="js/jquery.cookie.min.js"></script>
      <script type="text/javascript" src="js/jquery.collapsible.min.js"></script>
     <script type="text/javascript" src="js/highlight.pack.js"></script>
     <script name="jquery/bootstrap-datepicker.js" library="primefaces"></script>
      <script src="js/warning.js" type=""></script>
    <link rel="stylesheet" href="css/mytablestyle.css" />*/
    <!-- <link rel="stylesheet" href="css/styles_ti_plus_2.css" /> -->

    <h:outputStylesheet value="css/jquery-ui-1.10.2.custom.min.css" />
    <!-- <link rel="stylesheet" href="css/jquery-ui-1.10.2.custom.min.css" /> -->
    <!-- <h:outputScript name="css/jquery-ui-1.10.2.custom.min.css" /> -->
    <!-- <script type="text/javascript" src="js/jquery-ui.js"></script> -->
    <!-- <script type="text/javascript" src="js/jquery-1.10.2.js"></script> -->

    <!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" /> -->
    <!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script> -->
    <!-- <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> -->
    <!-- <h:outputScript name="js/jquery-ui-1.10.4.custom.min.js"/> -->
                        <div class="form-group">
                            <div style="height:500px">
                                  <div>        
    <h3>Inline</h3>  
   <p:calendar value="#{calendarView.date1}" mode="inline"/>   

    <h3>Popup</h3>  
    <p:calendar value="#{calendarView.date2}" />  

    <h3>Popup Button</h3>  
    <p:calendar value="#{calendarView.date3}" showOn="button" />  

    <p:commandButton value="Submit" update="display" oncomplete="dialog.show()" />  

    <p:dialog header="Selected Dates" widgetVar="dialog"   
        showEffect="fold" hideEffect="fold"  
        height="150">  

    <h:panelGrid id="display" columns="2" cellpadding="5">  

        <h:outputText value="Inline Date:" />  
        <h:outputText value="#{calendarView.date1}">  
            <f:convertDateTime pattern="MM/dd/yyyy"/>  
        </h:outputText>  

        <h:outputText value="Popup Date:" />  
        <h:outputText value="#{calendarView.date2}">  
            <f:convertDateTime pattern="MM/dd/yyyy"/>  
        </h:outputText>  

        <h:outputText value="Popup Button Date: " />  
        <h:outputText value="#{calendarView.date3}">  
            <f:convertDateTime pattern="MM/dd/yyyy"/>  
        </h:outputText>  

       </h:panelGrid>  

       </p:dialog>  
        </div>
                            <h:form> 
                    <h3>LEO DATE</h3>  
          <p:calendar value="#{calendarView.date3}" showOn="button" />  
              <p:dialog header="Selected Dates" widgetVar="dialog"   
                                      showEffect="fold" hideEffect="fold"  
                                        height="150">  

                <h:panelGrid id="display" columns="2" cellpadding="5"> 

                         <h:outputText value="Popup Button Date: " />  
                          <h:outputText value="#{calendarView.date3}">  
                                 <f:convertDateTime pattern="MM/dd/yyyy"/>  
                                 </h:outputText>  

                                </h:panelGrid>  

                                </p:dialog>  
                                </h:form>
                                </div>
                            </div>

Java代码

    package com.misys.tiplus2.controller;

     import java.text.SimpleDateFormat;
     import java.util.Date;
     import javax.faces.application.FacesMessage;
     import javax.faces.bean.ManagedBean;
      import javax.faces.context.FacesContext;

    import org.primefaces.context.RequestContext;
   import org.primefaces.event.SelectEvent;

    @ManagedBean(name = "calendarView", eager = true)
    public class CalendarView {

    private Date date1;
     private Date date2;
     private Date date3;
     public Date getDate1() {
     return date1;
     }
    public void setDate1(Date date1) {
    this.date1 = date1;
    }
    public Date getDate2() {
    return date2;
    }
     public void setDate2(Date date2) {
      this.date2 = date2;
    }
     public Date getDate3() {
      return date3;
    }
     public void setDate3(Date date3) {
       this.date3 = date3;
    }

    public void onDateSelect(SelectEvent event) {
     FacesContext facesContext = FacesContext.getCurrentInstance();
     SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy");
     facesContext.addMessage(null, new  FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected",     format.format(event.getObject())));
         }

     public void click() {
    RequestContext requestContext = RequestContext.getCurrentInstance();

    requestContext.update("form:display");
    requestContext.execute("PF('dlg').show()");
}
}

Answer 1

PrimeFaces 构建于 jQuery、i.a.

之上

因此，如果您确实必须包括jQuery API，那么请使用 PrimeFaces 附带的那个以避免兼容性问题。这意味着您应该使用

<h:outputScript library="primefaces" name="jquery/jquery.js" />

而不是<script src="js/jquery-1.9.1.js" type=""></script>

正如 Kukeltje 在评论中提到的那样，您确实必须清理 css 和 js 导入。另一个例子是您对日期选择器的使用 API。您将其包含了 3 次甚至更多：

<script src="src/main/webapp/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript">     </script>
<script name="jquery/bootstrap-datepicker.js" library="primefaces"></script>

然而，在发布的 JSF 视图中，甚至不需要包含任何这些 JS 文件，因为 PrimeFaces 会为您完成工作并自动生成 HTML - 包括必要的 JS - .

此外，您还必须检查您的 xhtml。您根本没有关闭 h:head 标签，因此这甚至不应该呈现有效的 HTML 输出。

最后但同样重要的是：请从开发人员的角度描述您的问题，如果这些更改后问题仍然存在。 is not working kidly 之类的陈述没有以正确的方式描述问题。

Date Picker 无法处理我的 jsf 和 xhtml 文件 任何人都可以指导我吗

Date Picker is not working on my jsf and xhtml file can anyone guide me please

javascript

jquery

jsf

primefaces

Date Picker 无法处理我的 jsf 和 xhtml 文件任何人都可以指导我吗