Visualforce JQuery DatePicker
Below is the code to implement a JQuery DateTime Picker in your Visualforce page:
<apex:page controller="PipelineV6_1" sidebar="true" showChat="true" >
<head>
<apex:includeScript value="{!URLFOR($Resource.JQuery1_8, '/js/jquery-1.8.0.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.JQuery1_8, '/js/jquery-ui-1.8.23.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.JQuery1_8, '/css/ui-lightness/jquery-ui-1.8.23.custom.css')}" />
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function($) {
j$('[id$=datepickerFrom]').datepicker("hide")
j$('[id$=datepickerTo]').datepicker("hide")
});
function callDatePickerFrom()
{
j$('[id$=datepickerFrom]').datepicker({dateFormat: 'yy-mm-dd'})
}
function callDatePickerTo()
{
j$('[id$=datepickerTo]').datepicker({dateFormat: 'yy-mm-dd'})
}
</script>
The body of my code looked like follows:
<apex:form id="theForm">
<apex:sectionHeader title="Pipeline Page for {!$User.FirstName}"/>
<apex:pageBlock id="innerblock" mode="edit">
<!-- The action function which calles the Apex function 'autosave' -->
<apex:toolbar id="theToolbar" style="background-color:#8d8d8d;background-image:none" rendered="true">
<apex:outputText style="color:#f8f8ff;font-weight:bold" value="Records to Display"/>
<apex:toolbarGroup itemSeparator="line" location="left" id="toobarGroupForm">
<apex:selectList label="Record Amount" value="{!ShowAmountOfRecords}" size="1" required="false" >
<apex:actionSupport event="onchange" action="{!AmountOfRecordsAction}" status="recordamountchange" reRender="innerblock" />
<apex:outputPanel style="color:#f8f8ff;font-weight:bold">
<apex:actionStatus id="recordamountchange" startText="Showing more records..." stopText=""/>
</apex:outputPanel>
<apex:selectOptions value="{!AmountOfRecordsList}"/>
</apex:selectList>
</apex:toolbarGroup>
<apex:outputText style="color:#f8f8ff;font-weight:bold" value="Filter By Document Type"/>
<apex:toolbarGroup itemSeparator="line" location="left" id="toobarGroupForm2">
<apex:selectList label="Filter by Record Type" value="{!FilterByRecordType}" size="1" required="false" >
<apex:actionSupport event="onchange" action="{!FilterByRecordTypeAction}" status="filterByRecordType" reRender="innerblock"/>
<apex:outputPanel style="color:#f8f8ff;font-weight:bold">
<apex:actionStatus id="filterByRecordType" startText="Filtering your records..." stopText=""/>
</apex:outputPanel>
<apex:selectOptions value="{!FilterByRecordTypeList}"/>
</apex:selectList>
</apex:toolbarGroup>
<apex:outputText style="color:#f8f8ff;font-weight:bold" value="From Date (YYYY-MM-DD) " />
<apex:inputText value="{!FromDate}" id="datepickerFrom"/>
<apex:outputText style="color:#f8f8ff;font-weight:bold" value="To Date (YYYY-MM-DD) " />
<apex:inputText value="{!ToDate}" id="datepickerTo"/>
</apex:toolbar>
</apex:pageBlock>
</apex:form>
</apex:page>
It will looks like follows:
Thys Michels Blog 
Can you post the controller page for this visual force page
Pingback: Links to download the jquery files – GrindSkills