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>
nice post.