function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AgentDealerXAgentDealerX 

I need a Date Time component for visualforce page?

I want to display and allow the users to edit the event records fields Start Date Time and End Date Time on visualforce.  It will not allow editing of these fields similar to the edit button on the event records.   Does anyone have a visualforce component to handle the date time similar to salesforce?

 

 Salesforce - Why isn't this a standard component for handling any date time field?

 

Event UI Handler for Date Time:

 

 

Visual Force Handler for Date time:

 

Navatar_DbSupNavatar_DbSup

Hi,


You can use <apex:inputfield> tag for this. It will automatically take the property of that field which you have bind with this. Try the below code as reference(Pass the id of event in URL):
<apex:page standardController="Event">
<apex:form >
<apex:inputField value="{!event.startdatetime}"/>
</apex:form>

</apex:page>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 
AgentDealerXAgentDealerX

This is not the same date time ui handler when creating or editing new events in salesforce.  In salesforce events they have a separate input area for time with a drop down.

 

Event UI Handler for Date Time:

 

 

Visual Force Handler for Date time:

 

You code provided the second graphic (Visualforce Handler)

 
cwall_sfdccwall_sfdc

Develop a custom component datetime UI implementation and share it on AppExchange.  ;-)
AgentDealerXAgentDealerX

Since Salesforce already has it in the events edit, so why doesn't Salesforce share the existing one right here?  We are all trying to keep the UI consistent with Salesforce for the benefit of all users.   

 

Even better, it should be made standard for date time fields!
Meryem FRQMeryem FRQ
Hi,
I've been strugling to find a solution for this and I finally did, so here it is, feel free to reuse it :)

1- So first of all you have to download this JQuery Lib : http://jonthornton.github.io/jquery-timepicker/ (http://jonthornton.github.io/jquery-timepicker/" target="_blank) (Click the "Download (Zip)" on the top right).
2- So if you open the zip, you'll find the jquery files inside a folder. So what I did is that I selected the add files and ziped them directly so there're not inside a file. that help with the referencing inside the visualforce page.
3- Go to your salesforce and under configuration type "Static Resources" > New > then upload your zip file that you created (I uploaded it under the name "TimePicker").
4- Make sure when you are creating the visualforce page to choose the apiVersion = 27.0 !!
5- The visualforce page should look like this : 
<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>

6 - The controller looks like this :
  
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();
	}
}

7 - and you'll be good to go.

I hope this helps. Good Luck.