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:form>
<apex:inputfield value=”{!Contact.Birthdate}”>
</apex:form>
</apex:page>

2. Apex:inputtext:

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

Here birthdateVariable is a variable being referred from controller.

3. Using jQueryUI Date Picker:

<apex:page standardController="Contact">
   <head>
        <apex:stylesheet value="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"  />
        <apex:includeScript value="https://code.jquery.com/jquery-1.9.1.js" />
        <apex:includeScript value="https://code.jquery.com/ui/1.10.3/jquery-ui.js" />
   </head>
 
   <body>
        <script type="text/javascript">
 
        j$ = jQuery.noConflict();
 
        j$(document).ready(function() 
        {
          j$( "#event_start_date" ).datepicker(
           {
             defaultDate: "+1w",
             changeMonth: true,
             changeYear: true,
             numberOfMonths: 1,
             dateFormat:"mm-dd-yy",
             altField: "#event_start_date_alternate",
             altFormat: "yy-mm-dd",
             showAnim: "slide"
           })
        });
</script>
 
<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" />
</apex:pageBlock>
</apex:form>
</body>
</apex:page>
</apex:form>
</apex:page>

One comment

Leave a Reply

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