0

I am using Primefaces in my XHTML I decided to use the jQuery's datePicker with icon trigger instead of PrimeFaces calendar on my web page. the code for the datepicker is :

<h:panelGrid id="searchGrid" columns="3" styleClass="grid" columnClasses="one,two,three">
    <p:column>
        <h:outputLabel for="date" value="Date" />
    </p:column>
    <p:column>                  
        <script type="text/javascript">
            $(function() {
                $("#date").datepicker({
                    minDate : "#{indexBean.searchCriteria.mindate}",
                    maxDate : "#{indexBean.searchCriteria.maxdate}",
                    dateFormat : "dd/mm/yy",
                    showOn : "button",
                    buttonImage : "/style/images/calendar.png",
                    buttonImageOnly : true
                });
            });
        </script>
        <p:inputText id="date" value="#{indexBean.searchCriteria.date}" label="Date" validator="#{indexBean.validateDate}">
            <p:watermark value="eg: 01/01/2013" for="date" /> 
        </p:inputText>

However the button (icon) of the datePicker won't show on the page. is there anything missing?? Thanks in advance

clav
  • 4,221
  • 30
  • 43
Rana
  • 11
  • 1
  • 6
  • Can you access the calendar image directly by entering the URL into the browser: `http://localhost:port/yourappcontext/style/images/calendar.png`? – clav Mar 26 '13 at 23:36
  • Yes I can. I have used another image in the same Xhtml page and it worked – Rana Mar 27 '13 at 00:31
  • What browser are you using? You should be able to see an error in the console using the browser dev tools. – clav Mar 27 '13 at 00:35
  • Google crome is giving me this error: (Uncaught TypeError: Object [object Object] has no method 'datepicker' (anonymous function)). Is there anything i could be missing??? Thanks – Rana Mar 27 '13 at 00:45

2 Answers2

0

It looks like you don't have jQuery UI imported. Make sure you have something like this in the head of your page:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

Also, I would move your javascript below the datepicker input element:

<h:panelGrid id="searchGrid" columns="3" styleClass="grid" columnClasses="one,two,three">
<p:column>
    <h:outputLabel for="date" value="Date" />
</p:column>
<p:column>                  
    <p:inputText id="date" value="#{indexBean.searchCriteria.date}" label="Date" validator="#{indexBean.validateDate}">
        <p:watermark value="eg: 01/01/2013" for="date" /> 
    </p:inputText>

    <script type="text/javascript">
        $(function() {
            $("#date").datepicker({
                minDate : "#{indexBean.searchCriteria.mindate}",
                maxDate : "#{indexBean.searchCriteria.maxdate}",
                dateFormat : "dd/mm/yy",
                showOn : "button",
                buttonImage : "/style/images/calendar.png",
                buttonImageOnly : true
            });
        });
    </script>
clav
  • 4,221
  • 30
  • 43
  • this is part of the page anything missing?? – Rana Mar 27 '13 at 01:07
  • You don't have `http://` on the front of the urls in your jQuery stylesheet and javascript includes. – clav Mar 27 '13 at 13:08
  • I think you're having issues with the combination of primefaces with jQuery UI. There are quite a few questions on stackoverflow when I do a google search for "jQuery UI datepicker with primefaces", like this one http://stackoverflow.com/q/12307679/1970746. I don't know much about primefaces so without doing a bunch of research I probably can't help, sorry. – clav Mar 27 '13 at 23:01
  • I did search everywhere before i posted this question. Anyway thanks clav – Rana Mar 28 '13 at 02:58
  • Hey guys. I figured out that the icon trigger is not working inside the of my page ... How can I make it works??? Thanks – Rana Mar 28 '13 at 03:27
  • Right click on the page and do a `view source` after it's rendered in your browser and add the HTML of the form to your question. – clav Mar 28 '13 at 12:26
0

Yepeeee I FIXED IT Only one tiny small thing i needed to change

date to .date (in the )

id="date" to styleclass="date" (in the ) Thanks all

Community
  • 1
  • 1
Rana
  • 11
  • 1
  • 6