+ Start a Discussion

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.







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


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.




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




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 >


<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" />












 //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});









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


Hope this helps.

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