Sign Up ›

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

View Calendar picker in Visual force Page

Hi all,

 

I want to ask is it possible to view a calendar picker in visual force page? Maybe it looks like the default calendar picker in salesforce.com when we want to create new event, when we click a textbox, it would show a calendar. Or are there some possible ways to do what I want?

Any suggestions would be great.

 

Thanks.

 

 

Edwin

_Prasu__Prasu_

if you bind that field with the visualforce standard component <apex:inputfield > it will be shown as the date picker.
heiriticheiritic

Thanks, it works. But I have different situation from solution you gave. Is there any way to set the date format in the apex:inputfield? I don't want to change in company information. Maybe you have soklutions about this matter.

Please advise and suggestions would be great.

 

Thanks
heiriticheiritic

Another question, is there any possible way If I don't use apex:inputfield for viewing calendar? Because the calendar control in apex page just want to be for searching and not related to any salesforce object. Is it possible?

Any suggestions would be great

 

Edwin
Pradeep_NavatarPradeep_Navatar

You can create a calender picker by using jquery. Try out the sampe code given below :

 

<apex:page showHeader="false" controller="cls_jquery">

<apex:form >

<head>

<link href="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/themes/base/ui.all.css')}" rel="stylesheet" />

<script src="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/jquery-1.3.2.js')}"></script>

<script src="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/ui/ui.core.js')}"></script>

<script src="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/ui/ui.datepicker.js')}"></script>

<link href="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/demos/demos.css')}" rel="stylesheet" />

<link href="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/css/redmond/jquery-ui-1.7.2.custom.css')}" rel="stylesheet" />

<style>

.clsstyle{

font-size:18px;   

}

.clslabel{

font-size:12px;

}

</style>

<script>

$(function()

 {

 //Datepicker is the ID of the textbox whick we have to use as date picker.

//just pass the parameter to datepicker function which is already defined in datepicker.js libery as per your requiment

$("#datepicker").datepicker({showOn: 'button', buttonImage: "{!$Resource.datepic}", buttonImageOnly: true, dateFormat: 'mm/dd/yy',changeMonth: true,

changeYear: true,showButtonPanel: true});

 });

 </script>

 <body>

 <input/></td>

 </body>

 </apex:form>

</apex:page>

 

Download the datepicker.js from the link: http://jqueryui.com/ and put into the static resource.

 

Hope this helps.
APathakAPathak
Hi pradeep, is it possible to make the datepicker work on VF pages without making showHeader= false?