日期选择器不适用于我的 jsf 和 xhtml 文件,任何人都可以指导我

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

本文关键字:任何人 都可以 文件 xhtml 不适用 选择器 适用于 我的 jsf 日期      更新时间:2023-09-26

这是我的 xhtml 页面,当我在我的项目之外尝试这段代码时,我正在使用 JSF 框架,它可以工作,但是当我尝试与我的 html 视图集成时,它不起作用,孩子帮我解决这个问题

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

爪哇代码

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

PrimeFaces 建立在 jQuery 之上,即

因此,如果你真的必须包含jQuery API,那么使用PrimeFaces附带的API,以避免兼容性问题。这意味着您应该使用

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

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

正如Kukeltje在评论中已经提到的,你真的必须清理你的css和js导入。Antoher 示例是您对日期选择器 API 的使用。您将它包含三次甚至更多次:

<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-tag,因此这甚至不应该呈现有效的 HTML 输出。

最后但并非最不重要的一点是:请从开发人员的角度描述您的问题,如果在这些更改后仍然存在。像is not working kidly这样的陈述并没有以正确的方式描述问题。

相关文章: