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
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.
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)
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); });
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;}
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 This is what i have acheived(it's lightning component rendered on VF page)
VF Page:
Component: Controller: APP: Event:
I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D
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;" />
[ <a id="setHour" style="text-decoration: underline; cursor:pointer;" >{!startHour}</a> ]
</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;" />
[ <a id="setendHour" style="text-decoration: underline; cursor:pointer;" >{!startHour}</a> ]
</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