Primefaces 3.3.1 and jQuery Datepicker not working

问题

My xhtml below has a datepicker which was working fine until I included the namespace for primefaces to use autocomplete feature. Here is my xhtml before including primefaces autocomplete

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

After including primefaces autocomplete:

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

Datepicker Before Prime Faces Autocomplete:

Datepicker After Prime Faces Autocomplete

The autocomplete is working but adding that tag in my xhtml screws up the date picker, not sure what could be happening? I am able to pick the month, year but none of the dates are appearing. Please let me know if I am doing anything wrong here.

Also I noticed that the datepicker issue is not specific to prime face autocomplete feature. If I add any other prime faces element or tag I am facing the issue with datepicker.

回答1:

Your css is getting messed up. Look at this question to resolve your issues:

How to override Primefaces jQuery and css

来源：https://stackoverflow.com/questions/12307679/primefaces-3-3-1-and-jquery-datepicker-not-working

标签

jquery

primefaces

datepicker