个人中心
gpt4 book ai didi

javascript - 日期选择器无法处理我的 jsf 和 xhtml 文件，任何人都可以指导我吗

转载 作者：行者123 更新时间：2023-12-02 16:31:54 25 4
gpt4 key购买 nike

这是我的 xhtml 页面，我在其中使用 JSF 框架，当我在项目之外尝试此代码时，它正在工作，但是当我尝试与我的 html View 集成时，它不起作用，请帮我解决这个问题

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

最佳答案

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 导入。另一个例子是您对日期选择器 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 View 中，甚至不需要包含任何这些 JS 文件，因为 PrimeFaces 会自动为您完成工作并生成 HTML(包括必要的 JS)。

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

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

关于javascript - 日期选择器无法处理我的 jsf 和 xhtml 文件，任何人都可以指导我吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28213293/

25 4 0
文章推荐： javascript - 冒泡范围 - 从嵌套函数更新 var
文章推荐： javascript - 我的函数一直给出 NaN
文章推荐： javascript - 无法让我的幻灯片播放
文章推荐： javascript - 在有事件的div内容上触发事件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com