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:
Can you post the controller page for this visual force page