Question

下面的我的xhtml有一个正常工作的日期选择器，直到我包含了使用自动完成功能的primefaces的命名空间。这是我的xhtml之前包括primefaces autocomplete

在Primeface xhtml之前：

<div 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" 
    lang="en" xml:lang="en" style="padding-bottom: 8px;">
    <h:head>
        <script type="text/javascript" src="#{lookupBean.themePath}/js/jquery-1.7.2.min.js" />
        <script type="text/javascript" src="#{lookupBean.themePath}/js/javascript.js" />
        <script type="text/javascript" src="#{lookupBean.themePath}/js/jquery.tablesorter.min.js" />
        <script type="text/javascript" src="#{lookupBean.themePath}/js/ui.datepicker.js" />

        <script type="text/javascript">
           jQuery(document).ready(function() 
            {
                jQuery('input:text[id$="endDate"]').datepicker({
                showOn : 'button',
                buttonImageOnly : true,
                buttonImage : '/vcc-theme/images/common/calendar.png',
                minDate : +0
            });
        </script>
    </h:head>
    <h:body>
        End Date:  <h:inputText id="endDate" for="endDate" value="#{manageMarketingProgramsBean.endDate}">
                        <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/New_York" />
                    </h:inputText>
    </h:body>
</div>

包括primefaces自动完成后：

<div 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"
    lang="en" xml:lang="en" style="padding-bottom: 8px;">
    <h:head>
        <script type="text/javascript" src="#{lookupBean.themePath}/js/jquery-1.7.2.min.js" />
        <script type="text/javascript" src="#{lookupBean.themePath}/js/javascript.js" />
        <script type="text/javascript" src="#{lookupBean.themePath}/js/jquery.tablesorter.min.js" />
        <script type="text/javascript" src="#{lookupBean.themePath}/js/ui.datepicker.js" />

        <script type="text/javascript">
           jQuery(document).ready(function() 
            {
                jQuery('input:text[id$="endDate"]').datepicker({
                showOn : 'button',
                buttonImageOnly : true,
                buttonImage : '/vcc-theme/images/common/calendar.png',
                minDate : +0
            });
        </script>
    </h:head>
    <h:body>
        End Date:  <h:inputText id="endDate" for="endDate" value="#{manageMarketingProgramsBean.endDate}">
                        <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/New_York" />
                    </h:inputText>

        Name:<p:autoComplete value="#{programManagerBean.programManager}"
                        completeMethod="#{programManagerBean.getInternalUsers}" maxResults="150" scrollHeight="250" size="50"
                        minQueryLength="2">
                    </p:autoComplete>
    </h:body>
</div>

在Prime面部自动完成之前的Datepicker： Before Prime Faces Autocomplete

Prime面部自动填充后的Datepicker After Prime Faces Autocomplete

自动完成工作正常，但在我的xhtml中添加该标记搞砸了日期选择器，不确定会发生什么？我能够选择月份，年份，但没有任何日期出现。如果我在这里做错了，请告诉我。

另外我注意到，datepicker问题不是特定于主要面部自动完成功能。如果我添加任何其他主要元素或标记，我将面临与datepicker的问题。

Answer 1

你的css搞砸了。请查看此问题以解决您的问题：

How to override Primefaces jQuery and css

Primefaces 3.3.1和jQuery Datepicker无法正常工作

1 个答案: