+ Start a Discussion
Prema -Prema - 

I want to create a VF page with a field for Date picker and another field for time picker but I dont want to hardcode anything. Could anyone please help? I want the date/time picker same as Lightning UI datetime picker

Raj VakatiRaj Vakati
Use this page  like below and create two fields on object one with the date and other is time data type

 
<apex:page standardController="Delivery__c" lightningStylesheets="true">
    <apex:slds />
    <body class="slds-scope">
        
        <apex:form>
            <apex:pageBlock>
                <apex:pageBlockSection>
                    <apex:inputField  value="{!delivery__c.Date__c}" />
                    <apex:inputField  value="{!delivery__c.Time__c}"/>
                    
                </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:form>
    </body>
</apex:page>

 
Prema -Prema -
I want the input fields on UI  , if i will create another field for time then i need to make it as a picklists type and i would need to hardcode the timings. Please hele me with something like this.
User-added image
Ramesh DepaiahRamesh Depaiah
Hi Prema,
Create a lightning component with type datetime and render the component on VF page.Then you can get the selected datetime from VF page using Events
<lightning:input type="datetime" name="input1" label="Enter a date/time value" />
This is what i have acheived(it's lightning component rendered on VF page)
 User-added image
VF Page:
<apex:page showHeader="false" sidebar="false" id="pg1" >
    <apex:includeLightning />
    <apex:form >
        <div id="datetime">            
        </div>
        <div id="lightning" style="float:left"></div>       
        
    </apex:form>
    
    <script>        
    $Lightning.use("c:RD_DateTimeAPP", function() {
        $Lightning.createComponent("c:ShowContacts", {}, "lightning", function(){
            $A.eventService.addHandler({ "event": "c:lightningAppExternalEvent", "handler" : VFEventHandler});
            
        });
    });
    
    function VFEventHandler(event){
        console.log('event is handled by VF page function');
        var myEventData = event.getParam("selectedDatetime");
        document.getElementById("datetime").value =myEventData;
    }
    </script>
</apex:page>

Component:
<aura:component
                access="global">  
     <aura:attribute name="selectedDT" type="datetime"/>    
    <aura:registerEvent name="lightningAppExternalEvent" type="c:lightningAppExternalEvent" />
    
    <div class="row">
        <h2 class="header">Shot date and time</h2>
        <lightning:input type="datetime" name="input1" 
                         onchange="{! c.callExternalFunction }" value="{!v.selectedDT}" />
    </div>
</aura:component>
Controller:
callExternalFunction : function(component, event, helper){    
            var mydatetime = component.get("v.selectedDT");
            console.log('Inside lightning controller function-->callExternalFunction');
            var lightningAppExternalEvent = $A.get("e.c:lightningAppExternalEvent");
            lightningAppExternalEvent.setParams({
            'selectedDatetime':mydatetime
            });
            lightningAppExternalEvent.fire();
    }
APP:
<aura:application extends="ltng:outApp">
//Refer your component
     <c:RD_DateTime />
</aura:application>
Event:
<aura:event type="APPLICATION"  >
       <aura:attribute name="selectedDatetime" type="datetime"/>
</aura:event>


I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D

 
Deepali KulshresthaDeepali Kulshrestha
Hi Prema,

You can create a datetime  picker in VF Page as follows:
<apex:page standardController="Event" extensions="ControlleurEvent" showHeader="true">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.css')}"/>
<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.js')}"></script>
  <apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.css')}"/>
<script>
j$= jQuery.noConflict();
    j$(function(){
       j$("[id$='startDateHour']").timepicker({ 'timeFormat': 'H:i' });
       j$("[id$='endDateHour']").timepicker({ 'timeFormat': 'H:i' });
                
        j$('#setHour').click(function(){
        j$("[id$='startDateHour']").val('{!startHour}');
        sd = j$("[id$='startDateHour']").val();
        sds = sd.split(":");
        var d = new Date();
        d.setHours(sds[0]);
        d.setMinutes(sds[1]);
        d.setHours(d.getHours() + 1);
        var h = d.getHours();
        h = ("0" + h).slice(-2);
        var m = d.getMinutes();
        m = ("0" + m).slice(-2);
        end = h+":"+m;  
        j$("[id$='endDateHour']").val(end);              
        });
        
        j$("[id$='startDateHour']").change(function(){
        sd = j$("[id$='startDateHour']").val();
        sds = sd.split(":");
        var d = new Date();
        d.setHours(sds[0]);
        d.setMinutes(sds[1]);
        d.setHours(d.getHours() + 1);
        var h = d.getHours();
        h = ("0" + h).slice(-2);
        var m = d.getMinutes();
        m = ("0" + m).slice(-2);
        end = h+":"+m;  
        j$("[id$='endDateHour']").val(end);                     
        });    
        
        j$("[id$='dateField']").focus(function(){ 
            DatePicker.pickDate(false,this, false);
            var newd = j$("[id$='dateField']").val();
            j$("[id$='enddate']").val(newd);          
        });    
        
        j$("[id$='enddate']").focus(function(){ 
            DatePicker.pickDate(false,this, false);    
        });
                
        j$('#setendHour').click(function(){
        j$("[id$='endDateHour']").val('{!startHour}');                  
        });    
});
</script>
<apex:form >
<apex:sectionHeader title="Calendrier" subtitle="Nouvel événement" /> 
        <apex:pageBlock title="Création de l'événement" mode="edit" tabStyle="event">
            <apex:pageBlockButtons >
                <apex:commandButton value="Enregistrer" action="{!saving}"/>
                <apex:commandButton value="Annuler" action="{!cancel}" immediate="true"/>
            </apex:pageBlockButtons>    
            <div style="margin-left: 300px;"><b><font color ="red"><apex:messages /></font></b></div>
            <br />
            <apex:pageBlockSection collapsible="false" columns="2" title="Détails du calendrier">   
                <apex:pageBlockSectionItem id="debut" >
                <apex:outputLabel value="Début" for="debut" />
                <apex:outputPanel >
                    <apex:inputText value="{!startDate}" id="dateField"  style="width:80px; height:20px;" required="true"/>
                    <apex:inputText value="{!startHour}" id="startDateHour" style="width:75px; height:20px;" />
                    [&nbsp;<a id="setHour" style="text-decoration: underline; cursor:pointer;" >{!startHour}</a>&nbsp;]
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem id="fin" >
                <apex:outputLabel value="Fin" for="fin"/>
                <apex:outputPanel >
                    <apex:inputText value="{!endDate}" id="enddate" style="width:80px; height:20px;" required="true"/>
                    <apex:inputText value="{!endHour}" id="endDateHour" style="width:75px; height:20px;" />
                    [&nbsp;<a id="setendHour" style="text-decoration: underline; cursor:pointer;" >{!startHour}</a>&nbsp;]
                </apex:outputPanel>    
                </apex:pageBlockSectionItem>                
            </apex:pageBlockSection>              
        </apex:pageBlock> 
    </apex:form>     
</apex:page>

And the controller goes like:
public class ControlleurEvent {
    
    private ApexPages.StandardController controller;
    public String eventId{get;set;}
    public Event event{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 ControlleurEvent(ApexPages.StandardController stdController) {
        this.controller = stdController;
        event = (Event)stdController.getrecord();
        startDate = system.today().format();
        endDate = startDate;
        String hour = '0'+Datetime.now().time().hour();
        String minute = '0'+Datetime.now().time().minute();
        startHour = hour.right(2)+':'+minute.right(2);
        endHour = getEnd();
        retURL = ApexPages.currentPage().getParameters().get('retURL');
        event.recordTypeId = ApexPages.currentPage().getParameters().get('RecordType');
        event.WhatId = ApexPages.currentPage().getParameters().get('what_Id');
                    
    }
     public String getEnd(){
         String[] hm = startHour.split(':');         
         Time t = Time.newInstance(Integer.valueOf(hm[0]), Integer.valueOf(hm[1]), 0, 0) ;
         Datetime dt = Datetime.newInstance(system.today(), t);
         String hourend = '0'+dt.addHours(1).time().hour().format();
        String minuteend = '0'+dt.addHours(1).time().minute().format();
        return hourend.right(2)+':'+minuteend.right(2);
     }
    
    public PageReference saving(){
        try{
            String[] d = startDate.split('/');
            Date myDate = Date.newInstance(Integer.valueOf(d[2]), Integer.valueOf(d[1]), Integer.valueOf(d[0]));
            String[] hm = startHour.split(':');     
            Time myTime = Time.newInstance(Integer.valueOf(hm[0]), Integer.valueOf(hm[1]), 0, 0);
            event.StartDateTime = DateTime.newInstance(myDate, myTime);
            
            d = endDate.split('/');
            myDate = Date.newInstance(Integer.valueOf(d[2]), Integer.valueOf(d[1]), Integer.valueOf(d[0]));
            hm = endHour.split(':');     
            myTime = Time.newInstance(Integer.valueOf(hm[0]), Integer.valueOf(hm[1]), 0, 0);
            event.EndDateTime = DateTime.newInstance(myDate, myTime);
            
        }
        catch(Exception e)
        {
            
        }
        
        PageReference eventPage = new ApexPages.StandardController(controller.getRecord()).view();
        eventPage.setRedirect(true);
        return eventPage;
    }
    
    public PageReference cancel(){
        return controller.cancel();
    }
}

I hope you find the above solution helpful. If it does please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha