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:

jquerypicklist

Advertisements

One Comment on “Visualforce JQuery DatePicker

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: