Salesforce Developer Community

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
2

Questions
1

Replies

Using Datepicker

Hi everyone

I have a screen which uses TabPanel & Tabs to enter user data. I have put the Datapicker component using <c:DatePickerExtend startYear="1970" endYear="2030"/> and it just disabled my tabs... Let me know if anyone have knows abt it...

Vishal Gaddi
August 18, 2011
Like
0

1 replies

Using Datepicker

Hi everyone

Vishal Gaddi
August 18, 2011
Like
0

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.

VarunC
December 03, 2008
Like
0