function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Laxman VattamLaxman Vattam 

Handling date and time in seperate fields

I'm developing a custom VF page for events and want to show date and time in two different fields. I created a new date field (startdate__c) to capture the date and temporary variable to capture time (timevalue). I'm planning to merge both date and time before saving the final startdatetime field. I'm unable to capture the time properly. Time variable is returning null. Please suggest a way to fix this issue
 
<apex:page standardController="Event" extensions="DateTimeClass" showHeader="true">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <head>  
            <style>
                .ui-timepicker-wrapper {
                    overflow-y: auto;
                    height: 150px;
                    width:100%;
                    background: #fff;
                    border: 1px solid #ddd;
                    -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
                    -moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
                    box-shadow:0 5px 10px rgba(0,0,0,0.2);
                    outline: none;
                    z-index: 10001;
                    margin: 0;
                    -webkit-border-radius:5px;
                    -moz-border-radius:5px;
                    border-radius:5px;
                    margin:3px 0 0 0 ;
                    padding:5px 0;
                }
                
                .ui-timepicker-wrapper.ui-timepicker-with-duration {
                    width: 13em;
                }
                
                .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
                .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
                    width: 11em;
                }
                
                .ui-timepicker-list {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
                
                .ui-timepicker-duration {
                    margin-left: 5px; color: #888;
                }
                
                .ui-timepicker-list:hover .ui-timepicker-duration {
                    color: #888;
                }
                
                .ui-timepicker-list li {
                    padding: 5px 0 5px 5px;
                    cursor: pointer;
                    white-space: nowrap;
                    color: #000;
                    list-style: none;
                    margin: 0;
                }
                
                .ui-timepicker-list:hover .ui-timepicker-selected {
                    background: #fff; color: #000;
                }
                
                li.ui-timepicker-selected,
                .ui-timepicker-list li:hover,
                .ui-timepicker-list .ui-timepicker-selected:hover {
                    background: #1980EC; color: #fff;
                }
                
                li.ui-timepicker-selected .ui-timepicker-duration,
                .ui-timepicker-list li:hover .ui-timepicker-duration {
                    color: #ccc;
                }
                
                .ui-timepicker-list li.ui-timepicker-disabled,
                .ui-timepicker-list li.ui-timepicker-disabled:hover,
                .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
                    color: #888;
                    cursor: default;
                }
                
                .ui-timepicker-list li.ui-timepicker-disabled:hover,
                .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
                    background: #f2f2f2;
                }
            </style>
            <c:CustomUX />
            <c:jQuery />
            <script type="text/javascript">
                window.typeahead || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.9.0/jquery.timepicker.js"><\/script>');            
            </script>
            <apex:includeScript value="{!URLFOR($Resource.CustomActivity)}"/>
            
            <style>
                .slds-page-header.is-fixed + * {
                    margin-top: 46px;
                }
            </style>
            <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"/>
            <script>
                var j$ = jQuery.noConflict();
                j$(document).ready(function() {
                    bindData();
                    j$('#subject').click();
                });
                function bindData() {
                    j$('[id$=editTaskForm]').on('submit',function() {
                        j$('[id$=hiddenSubject]').val(j$('#subject').val());
                    });
                }
            </script>
            
        </head>
        <body>
            <apex:form id="createEventForm">
                <apex:pageMessages />
                <section class="slds">
                    <section class="body-content">
                        <div class="slds-page-header is-fixed" role="banner">
                            <div class="slds-media">
                                <div class="slds-media__body">
                                    <p class="slds-page-header__title slds-truncate slds-align-middle slds-float--left" title="Create Task">
                                       Add a Event
                                    </p>
                                    <apex:commandButton id="saveButton" styleClass="slds-button slds-button--neutral slds-float--right" action="{!CSave}" value="Save Event"/>  
                                   
                                    <a class="slds-button slds-button--neutral slds-float--right slds-m-right--small" onclick="history.go(-1); return false;">Cancel</a>
                                </div>
                            </div>
                        </div>     
      
                              <div class="slds-form-element is-required">
                                    <fieldset class="slds-form--compound">
                                        <div class="form-element__group">
                                            <label class="slds-form-element__label" for="start">
                                                <abbr class="slds-required" title="required">*</abbr>Start
                                            </label>
                                            <div class="slds-form-element__row">                                                
                                                <div class="slds-form-element slds-size--1-of-2">
                                                    <label class="slds-form-element__label" for="start-date">Date</label>                                                    
                                                    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
                                                        <a id="" href="#">
                                                            <svg aria-hidden="true" class="slds-input__icon input-text-default">
                                                                <use xlink:href="{!URLFOR($Resource.CustomUX, '/icons/utility-sprite/svg/symbols.svg#event')}"></use>
                                                            </svg>
                                                        </a>                                                          
                                                        <apex:inputfield value="{!eventObj.StartDate__c}" styleClass="slds-input js-datepicker" id="StartDate" />
                                                    </div>   
                                                </div>
                                                
                                                <div class="slds-form-element slds-size--1-of-2">
                                                    <label class="slds-form-element__label" for="start-time">Time</label>
                                                    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right has-timepicker">
                                                        <a id="" href="#">
                                                            <svg aria-hidden="true" class="slds-input__icon input-text-default">
                                                                <use xlink:href="{!URLFOR($Resource.CustomUX, '/icons/utility-sprite/svg/symbols.svg#clock')}"></use>
                                                            </svg>
                                                        </a>                                                           
                                                        <apex:inputText value="{!TimeValue}" styleClass="slds-input timepicker" id="StartTime" />
                                                        <!-- <apex:inputHidden id="startTime2" required="true"/> -->
                                                    </div> 
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                                
                              </section>
                              </section>
            </apex:form>
        </body>
    </html>       
</apex:page>
 
public class DateTimeClass {

    
    
    private ApexPages.StandardController controller;
    public String eventId{get;set;}
    public Event eventObj{get;set;}    
    private String retURL{get;set;}
    public String startDate{get;set;}
    public String startHour{get;set;}
    public String endDate{get;set;}
    public String endHour{get;set;}
    
    Public datetime ControllerValue = System.Now();
    public String TimeValue {
        get {        
              return TimeValue;
         }
         set {  
            Time tm = ControllerValue.time();
            string TimeValue = string.valueOf(tm);
            system.debug('place6a' + TimeValue );     
            // Return TimeValue;    
            
         }  
    }
        
    public DateTimeClass(ApexPages.StandardController stdController) {
        this.controller = stdController;
        eventObj = (Event)stdController.getrecord();
        
        //logic for handling datetime
        eventObj.StartDateTime = System.Now();
        eventObj.StartDate__c = eventObj.StartDateTime.date();
        ControllerValue = System.Now();
        
                    
    }
     
    
    public PageReference CSave(){
        try{
            
            eventObj.Subject = 'abcd';
            eventObj.DurationInMinutes = 5; 
            eventObj.ActivityDateTime = eventObj.StartDateTime;
            eventObj.WhoId = '00Q8A000001O0j3';
            eventObj.OwnerId = UserInfo.getUserId();
                   
            system.debug('Start Date:' + eventObj.StartDate__c + 'Start Time:' + TimeValue + 'End Date:' + eventObj.EndDateTime);
            
            insert eventObj;
            
        }
        catch(Exception e)
        {
            
        }
        
        PageReference eventPage = new ApexPages.StandardController(controller.getRecord()).view();
        eventPage.setRedirect(true);
        return eventPage;
    }
    
    public PageReference cancel(){
        return controller.cancel();
    }


}