HI Vishal

We are having issues in loading the DatePicker. Couiple of queries here.

We just used used your component and contoller class AS-IS and updated the resource locations for JS and CSS files. Copied all the  3 JS files and 1 CSS file into static resource.

--> In theVF page we are just calling controller as per you mentioned. Are we missing something here?

--> Also will this DatePicker Component work only for HTML text control Or for both HTML and <Apex:inputtext> as well?

Please help on this.

One Correction .. its Varun not Vishal :)

and please check back here .. this is the working set, it includes sample code too:

http://wiki.developerforce.com/index.php/Code_Samples#jQuery_DatePicker_Component_for_Selecting_Date_in_VisualForce_Page

here is the transcript from the above link:

jQuery DatePicker Component for Selecting Date in VisualForce Page This Component When used will place a TextInput with a calendar icon adjacent to the input control, so as to Popup a Calendar and have selected Date inserted in the input control, just like the Date Control of Salesforce, which is currently Bounded to be Used only with Data Bounded Fields. So this way, you simple place a call like: <c:jQueryPickDate pickDateLabel="Pick Date:" pickDateField="selectDate" value="{!selectedDate}" /> And you will have a Date Control on you VisualForce page. This control is created using jQuery's DatePicker plugin. Click Here For Component Code -Varun Chaddha, Advologix.com

This thread is for the Error I was facing so the CODE posted in first message at TOP is Not working at all .. so you might not be able to get it working ...

Please check the code at the Link I just provided you .. and check the attached sample in the link works for you ro not ....

Hi Varun

 Thanks for the response Varun ( this time I got it right)..

Actually I have downlaoded from that link only. So u mean to say if we want to make this component work

we dont have to change anything except for Resource locations in component is it?

You can change the code .. if you are familiar with jQuery customizations .. but if your requirement is fullfilled with this code then I would suggest not to make changes as this was a working set i uploaded :) ...

there were issues with inputtext control and html controls .. though If I'm not wrong then I do use Inputtext control ... in the component ...

just to Clarify where you MIGHT end up stuck .. if you are refering any INPUTTEXT control using jQuery then you Might not be able to do so .. because Salesforce creates ID values for All Controles in this patern:

parentid:childid:anotherchildid: ... etc ... NOTE the ":" in the id values ...

Now issues I faced was jQuery was NOT able to get the Object using the salesforce generated id values ... contain colon in the control id values.

Appreciate your help Varun. But somehow your working copy is not working for us.

--> Could you please send calendar.dp.png image file?

--> Also in the component code

<apex:inputText styleClass="{!pickDateField}_dtClass" id="datePicker" value="{!value}" style="font-size:12px;width:80px;"></apex:inputText>

what does value for the attribute styleClass="{!pickDateField}_dtClass" refer to?

Can u send us the screen shot of your component and controller code? Also a screen shot of the browser page where this is being used. Sorry for bugging you. Your help would be highly appreciated. Really getting frustrated for the last 3 days in exploring this functioanlity.

here is how I use the compoenent in VF page ...

<c:jQueryPickDate pickDateLabel="From:" pickDateField="frmDate" value="{!frmDate}" /> <c:jQueryPickDate pickDateLabel="To:" pickDateField="ToDate" value="{!toDate}" />

---

Indeevar wrote:

what does value for the attribute styleClass="{!pickDateField}_dtClass" refer to?

---

As i told you i was not able to reference Control using ID value in jQuery .. in visualforce page so I used the jQuery's method to refer controls using StyleClasses ... using CSS ... {!pickDateField} = ID value for the control to be passed as Component Attrobute ....

here i the calendar.dp image:

Here is the Component Code:

<apex:component controller="cmp_jQueryPickDateController"> <apex:attribute name="pickDateLabel" description="This is the value for the label to display before pickdate component." type="String" required="true"></apex:attribute> <apex:attribute name="pickDateField" description="This is ID value of the Field to be used for component." type="String" required="true"></apex:attribute> <apex:attribute name="value" description="" type="String" required="true"></apex:attribute> <script src="{!URLFOR($Resource.jQuery_UI_DatePicker,'/ui.datepicker/jquery-1.2.6.min.js')}" type="text/javascript"></script> <apex:stylesheet value="{!URLFOR($Resource.jQuery_UI_DatePicker,'/ui.datepicker/smoothness/ui.datepicker.css')}"></apex:stylesheet> <script src="{!URLFOR($Resource.jQuery_UI_DatePicker,'/ui.datepicker/ui.datepicker.js')}" type="text/javascript"></script> <span style="font-weight:bold;text-align:right;">{!pickDateLabel}&nbsp;</span> <apex:inputText styleClass="{!pickDateField}_dtClass" id="datePicker" value="{!value}" style="font-size:12px;width:90px;"></apex:inputText> <script type="text/javascript"> $(document).ready(function(){ $(".{!pickDateField}_dtClass").datepicker({ showOn: 'button', buttonImage: "{!URLFOR($Resource.jQuery_UI_DatePicker,'/calendar.dp.png')}", buttonImageOnly: true, buttonText: 'Pick date', dateFormat: 'yy-mm-dd' //'mm/dd/yy' }); }); </script> <style> .{!pickDateField}_dtClass + img { left:-17px; position:relative; top:-1px; } </style> </apex:component>

public class cmp_jQueryPickDateController {

}