Primefaces 3.3.1 和 jQuery Datepicker 不工作

Question

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

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 Faces 自动完成之前的日期选择器：

Prime Faces 自动完成后的日期选择器

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

我还注意到，日期选择器问题并非特定于主要人脸自动完成功能。如果我添加任何其他素面元素或标签，我将面临 datepicker 的问题。

Answer 1

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

How to override Primefaces jQuery and css