Salesforce | Different ways to use datepicker on visualforce page

| By Webner

1. Apex:inputfield:

We can simply use apex:inputfield and bind the field with date type field and it will automatically use the Salesforce Calander:

<apex:page standardcontroller=Contact>
<apex:inputfield value=”{!Contact.Birthdate}”>

2. Apex:inputtext:

<apex:page standardcontroller="testcontroller" id="vfPage">
<apex:inputText label="Birth Date" value="{!birthdateVariable}" onfocus="DatePicker.pickDate(false, this, false);"/>

Here birthdateVariable is a variable being referred from controller.

3. Using jQueryUI Date Picker:

<apex:page standardController="Contact">
        <apex:stylesheet value=""  />
        <apex:includeScript value="" />
        <apex:includeScript value="" />
        <script type="text/javascript">
        j$ = jQuery.noConflict();
          j$( "#event_start_date" ).datepicker(
             defaultDate: "+1w",
             changeMonth: true,
             changeYear: true,
             numberOfMonths: 1,
             altField: "#event_start_date_alternate",
             altFormat: "yy-mm-dd",
             showAnim: "slide"
<apex:form >
<apex:pageMessages id="errors" />
<apex:pageBlock title="Date Picker Demo 1" mode="edit">
<input type="text" name="event_start_date" id="event_start_date" />

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *