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.
