Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Terry411Terry411 

jQuery Datepicker

First, my apologize for all of you who feel like you've answered this question a 100 times.  I've read all your responses but am still not able to get my DatePicker to appear.

 

I have a custom controller and an InputText field id="cDate".  Here's what I've done:

 

  • I've downloaded the jQuery library and uploaded the zip file as a Static Recource called "jQueryUI"
  • I've added the following code to the top of my VF page:
<apex:page Controller="conAttendanceTaking">
<apex:form >
<head> 
    <apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/js/jquery-1.4.2.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/js/jquery-ui-1.8.10.custom.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryUI, 'css/ui-lightness/jquery-ui-1.8.10.custom.css')}"/>


    <script type="text/javascript">
        var j$ = jQuery.noConflict();
        j$(document).ready(function(){
        
            j$("#cDate").datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true});
        });
     </script>
</head>
// VF code continues from here....
  •  Added my text field to the body of my VF page:
            <apex:outputLabel value="Class Date (yyyy-mm-dd)" for="ClassDate"/>
            <apex:inputText disabled="false" id="cDate" value="{!ClassDate}"/>

 

In my controller class is written and my page works fine with the exception of this date.  I'd like to have the datepicker appear when the inputText receives focus.  What am I doing wrong?

 

Thanks!

 

 

conAttendanceTaking
jhugjhug

Have you verified that the jquery library is being loaded properly?

 

A quick way is to view the page's source and find the <script> tag that is including the JQuery lib by searching for "jquery-1.4.2.min.js".  

 

It should look something like this: 

 

<script src="/resource/1297268385000/jQuery" type="text/javascript">

 

Take the src element, "/resource/1297268385000/jQuery" in this case, and paste it into your browser after your instance region url (eg. https://c.na7.visual.force.com).

 

Also you may want to verify your ready method is firing by putting an "alert('alerted');" inside of it before your datepicker call.

 

 

 
Ralph CallawayRalph Callaway

Hi Home Team Enterprises,

 

Your issue is that your <apex:inputText id="cDate"> won't actually have an id of "cDate", instead it will have an id that is a hierarchical list that includes all component ids before it, e.g. "page:pageBlock:pageBlockSection:0:cDate".  Take a look at the this page of the documentation for more details.  So your call j$('#cDate') won't return anything.

 

To get the actual id you'll need to use the $Component global variable, however the presence of colons in the id has been reported to cause problems with jquery.  Instead you can select the date input with the following jquery selector which returns any input fields with an id that ends with cDate.

 

j$('input[id$="cDate"]')

Edit: Updated per jHug's comments about jquery having issues with colons.
Terry411Terry411

Thanks for the replies.  jQuery is starting up as it should so I'm good on that front. 

 

Ralph, I'm not clear on the correct syntax to use for the $Component.  I get what you're saying but not sure how to implement it.  Here's what I did but it doesn't appear to work. 

 

    <script type="text/javascript">
        var j$ = jQuery.noConflict();
        j$(document).ready(function(){
        
<!--            j$('#cDate').datepicker({
            j$('input(id$="cDate")').datepicker({
-->         
            j$('$Component.pbTakeAttendance.secDetails.cDate').datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true});
        });
     </script>

 I've also noticed I'm getting a IE status of "Done, but with errors on page.".  I'm assuming this because of the above.

 

Thanks,

Terry

 
jhugjhug

Additional information, I was burned on this one originally, using a $Component reference won't work due to the usage of colons in the Id name, jQuery doesn't like colons.
Terry411Terry411

What's the alternative then?
jhugjhug

The solution posted by Ralph.  The id$ (specifically the $) tells jQuery to start from the end of the id instead of the front.  Which means jQuery never parses the colons created by the Visualforce page.
Ralph CallawayRalph Callaway

Good point jhug.  I updated the solution to discuss the issue with colons.
Terry411Terry411

Sorry to ask again but I really want to get this to work.  I've setup the code on my developer edition so I could have more freedom to play.  However, it's still not working.  I'm am questioning if the resource is loading as I'm not seeing a <script> tag for my "jquery-1.4.4.min.js".  If indeed this is the problem then I'm not clear on how to correct it.  Can anyone tell me what I'm missing in my code?

 

Here's my updated code within the developer edition.

 

public class ctljQuery {
	public String tText {get; set;}
	public Date dDate {get; set;}

    public ctljQuery() {
    	date dftDate = system.today();
    	
    	settText('');
    	setdDate(dftDate);
    }

	public PageReference cancel() { 
		PageReference ReturnPage = new PageReference('/');
		ReturnPage.setRedirect(true);
        return ReturnPage;       
    }

	public date getdDate() {
		return this.dDate ;
	}

	public void setdDate(Date dDate) {
		this.dDate = dDate;
	}

	public string gettText() {
		return this.tText ;
	}

	public void settText(String tText) {
		this.tText = tText;
	}

}

 My visualforce test page:

 

<apex:page Controller="ctljQuery">
<apex:form id="frmjQueryTest" title="My jQuery Test">
    <head> 
        <apex:includeScript value="{!URLFOR($Resource.JQueryUI, '/js/jquery-1.4.4.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.JQueryUI, '/js/jquery-ui-1.8.10.custom.min.js')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.JQueryUI, 'css/ui-lightness/jquery-ui-1.8.10.custom.css')}"/>
    
		<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js">
            $j('input(id$="dDate")').datepicker({
                dateFormat: 'mm-dd-yy',
                changeMonth: true,
                changeYear: true});
            });
         </script>
    </head>

    <apex:pageBlock id="pgbjQueryTest" title="jQuery Test">
        <apex:pageBlockButtons id="pgbButton">
            <apex:commandButton action="{!cancel}" value="Close"/>
        </apex:pageBlockButtons>

        <apex:pageBlockSection id="pgsDetails" title="Details" columns="4">
            <apex:panelGrid columns="2">
                <apex:outputLabel value="Text Field" for="tText"/>
                <apex:inputText id="tText" value="{!tText}"/>
                
                <apex:outputLabel value="Date Field" for="dDate"/>
                <apex:inputText id="dDate" value="{!dDate}"/>
            </apex:panelGrid>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

 

I've downloaded a new copy of jQuery and uploaded it to my develop org's Static Resources as jQueryUI

 

 
calvin_nrcalvin_nr

Did u ever find a solution to this problem.
Thys MichelsThys Michels

Your Visualforce page will look like this:

 

<head>
<apex:includeScript value="{!URLFOR($Resource.JQuery1_8, '/js/jquery-1.8.0.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.JQuery1_8, '/js/jquery-ui-1.8.23.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.JQuery1_8, '/css/ui-lightness/jquery-ui-1.8.23.custom.css')}" />
<script>

$(function() {
$('[id$=datepicker]').datepicker({dateFormat: 'yy-mm-dd'})
});
</script>

 

And your apex:inputText will look like this:

<apex:inputText value="{!FromDate}" id="datepicker"/>

 

Make sure that the id specified in your apex:inputText is the same as the [id$=] specified in your JQuery expression