+ Start a Discussion

Separate Date and Time Picker.



Since modifying the time in DateTime Field each time,tried

to have a separate Time field


Something like this.


Date:2010-01-01  Time :15:00


Since there is no separate Time component in SF.

So just handle the above issue in a different way.


I need  to store the date time value in the field reportDateTime.

So created a dummy date type field in the custom object




1.reportDateTime. [Field to be updated/insert]

2.tempReportDate [used to display in the VF]


So in the VF I added only the tempReportDate Field and created a picklist list which holds the time [reportTime]


Coding for creating Time in a picklist



public List<SelectOption> getreportTime() {
String baseHour = '00:';
String baseMinutes = baseHour + '00';
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption(baseMinutes,baseMinutes));
for (Integer i =1; i <25 ; i++) {
    for (Integer j = 15; j <=60 ; j+=15) {
        if(j == 60 && i!=24){
            baseHour = '0' + i + ':';
            baseMinutes = baseHour + '00';
            options.add(new SelectOption(baseMinutes,baseMinutes));
            }else if (i>9){
            baseHour =  i + ':' ;
            baseMinutes = baseHour + '00';
            options.add(new SelectOption(baseMinutes,baseMinutes));
        if(j!=60 && i<25){
        baseMinutes = baseHour + String.valueof(j);
        options.add(new SelectOption(baseMinutes,baseMinutes));
return options;

VF Page


<apex:page standardController="Report__c" extensions="ReportInputController" >


<apex:outputLabel value="Report Date" />
<apex:inputField value="{!Report__c.tempReportDate__c}" />

<apex:outputLabel value="Report Time" />
<apex:selectList id="display" value="{!reportTimeValue}" size="1">
<apex:selectOptions value="{!reportTime}"/>



After getting  input for Report Date  and Report Time,

I create a date isntance using the above two  fields[ tempReportDate + reportTime].

Then I update /insert the newly created date instance  to the original DateTime Field ie  to reportDateTime.


Using the Jquery is also possible to have separate Date and Time but it takes lots

of time and effort.This you can easily do with Apex and VF,its quite easy.








You can handle this situation through jquery.This is very simple, you have to add some javascript and css for the jquery.

<apex:page showHeader="false" controller="cls_jquery">

<apex:form >


<link href="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/themes/base/ui.all.css')}" rel="stylesheet" />

<script src="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/jquery-1.3.2.js')}"></script>

<script src="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/ui/ui.core.js')}"></script>

<script src="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/ui/ui.datepicker.js')}"></script>

<link href="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/development-bundle/demos/demos.css')}" rel="stylesheet" />

<link href="{!URLFOR($Resource.NewDatePicker1,'NewDatepicker1/css/redmond/jquery-ui-1.7.2.custom.css')}" rel="stylesheet" />












 //Datepicker is the ID of the textbox whick we have to use as date picker.

//just pass the parameter to datepicker function which is already defined in datepicker.js libery as per your requiment

$("#datepicker").datepicker({showOn: 'button', buttonImage: "{!$Resource.datepic}", buttonImageOnly: true, dateFormat: 'mm/dd/yy',changeMonth: true,

changeYear: true,showButtonPanel: true});









Download the datepicker.js from the link: http://jqueryui.com/ and put into the static resource.


Hope this helps.


I was considering adding a datetime integration to my jQuery for Salesforce library. Please let me know if that's something you'd like by commenting on this thread.


Hi Suresh,
Thanks for sharing this code. Can you also provide how you concatenate date and reporttime to "datetime" field.