Sign Up ›
  • Indeevar
  • NEWBIE
  • 0 Points
  • Member since 2008
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 6
    Questions
  • 8
    Replies
16 replies

custom datepicker component

Hi,

here is my code for a Custom Component which i'm creating for inserting a DatePicker Control in VF page:
Code:
<apex:component >
 <apex:attribute name="pickDateLabel" description="This is the value for the label to display before pickdate component." type="String" required="true"/>
 <apex:attribute name="pickDateField" description="This is ID value of the Field to be used for component." type="String" required="true"/>
 <apex:attribute name="defaultValue" description="This is value of the Field." type="String" required="false"/>
 
 <SCRIPT src="{!URLFOR($Resource.jQuery_UI_DatePicker,'/ui.datepicker/jquery-1.2.6.min.js')}" type="text/javascript" />
 <apex:stylesheet value="{!URLFOR($Resource.jQuery_UI_DatePicker,'/ui.datepicker/smoothness/ui.datepicker.css')}" />
 <SCRIPT src="{!URLFOR($Resource.jQuery_UI_DatePicker,'/ui.datepicker/ui.datepicker.js')}" type="text/javascript" />

 <span style="font-weight:bold;text-align:right;">{!pickDateLabel}:&nbsp;</span>
 <input name="{!pickDateField}" id="{!pickDateField}" value="{!defaultValue}" style="font-size:12px;width:80px;" />
 <apex:inputText id="datePicker" value="{!defaultValue}" style="font-size:12px;width:80px;"></apex:inputText>

 <script type="text/javascript">
  $(document).ready(function(){
   $("#{!pickDateField}").datepicker({ 
       showOn: "both", 
       buttonImage: "{!URLFOR($Resource.jQuery_UI_DatePicker,'/calendar.dp.png')}", 
       buttonImageOnly: true,
       buttonText: "Pick date",
       dateFormat: 'mm/dd/yy'
   });
   $("#{!$Component.datePicker}").datepicker({ 
       showOn: "both", 
       buttonImage: "{!URLFOR($Resource.jQuery_UI_DatePicker,'/calendar.dp.png')}", 
       buttonImageOnly: true,
       buttonText: "Pick date",
       dateFormat: 'mm/dd/yy'
   });
  });
 </script>
 
</apex:component>

 
I use it in VF page using this:
Code:
<c:jQueryPickDate pickDateLabel="From" pickDateField="frmDate" defaultValue="{!frmDate}" />

 
Now, there are 2 textboxes shown on VF page where i use the Component, 1st One is Simple HTMl control, and is very nicely parsed by jQuery and a Date pick Calendar is shown on the Image lying adjacent to first textbox.

The 2nd one is Apex:InpuetTExt control, and is Not parsed by jQuery, and the Calendar is not shown for this control.

This is the HTML shown in Firefox on VF page load:
Code:
<span id="thePage:theForm:pageBlockFilter:j_id8">
 <script type="text/javascript" src="/resource/1228293028000/jQuery_UI_DatePicker/ui.datepicker/jquery-1.2.6.min.js"/>
 <script type="text/javascript" src="/resource/1228293028000/jQuery_UI_DatePicker/ui.datepicker/ui.datepicker.js"/>

 <span style="font-weight: bold; text-align: right;">From: </span>
 <input value="" style="font-size: 12px; width: 80px;" name="frmDate" id="frmDate" class="hasDatepicker"/><img align="absbottom" class="ui-datepicker-trigger" src="/resource/1228293028000/jQuery_UI_DatePicker/calendar.dp.png" alt="Pick date" title="Pick date"/>
 <input type="text" style="font-size: 12px; width: 80px;" name="thePage:theForm:pageBlockFilter:j_id8:j_id9:datePicker" id="thePage:theForm:pageBlockFilter:j_id8:j_id9:datePicker"/>

 <script type="text/javascript">
  $(document).ready(function(){
   $("#frmDate").datepicker({ 
       showOn: "both", 
       buttonImage: "/resource/1228293028000/jQuery_UI_DatePicker/calendar.dp.png", 
       buttonImageOnly: true,
       buttonText: "Pick date",
       dateFormat: 'mm/dd/yy'
   });
   $("#thePage:theForm:pageBlockFilter:j_id8:j_id9:datePicker").datepicker({ 
       showOn: "both", 
       buttonImage: "/resource/1228293028000/jQuery_UI_DatePicker/calendar.dp.png", 
       buttonImageOnly: true,
       buttonText: "Pick date",
       dateFormat: 'mm/dd/yy'
   });
  });
 </script>
 
</span>

 
Just check that ID passed in jQuery Javascript function is CORRECT one and still no Calendar associated with i2nd textbox :(.

please help.
3 replies

Apex webservice as per predefined XSD.

Can we write an apex webservice as per the pre defined XSD given by webservice consumer?

The XSD will have multiple complex Types and the input parameters are at different levels (nodes)

within XSD?
 
SOLVED
17 replies

DatePicker does not show for date fields...

Hello,

I am having issue with DatePicker not popping up automatically. In fact, it does not pop up at all. My input field is definitely a date field. Firebug reports problem like this :-

Error:
this.div is null
https://na3.salesforce.com/dJS/en/1219782666000/library.js
Line 22568

this.div is null
iframeShim(null)library.js (line 22568)
DatePicker()library.js (line 7537)
pickDate()(true, "j_id0:j_id1:j_id134:j_id135:j_id215:j_id216:j_id220:0:j_id224", false, undefined)library.js (line 7795)
onfocus(focus )IPPage—i...FLg%3D%3D (line 2)
[Break on this error] if (this.div.currentStyle) {

 Could anyone help me?

Thanks