Overwrite TicmePicker defaults

Community Driven Extensions Project
Post Reply
50819
Posts: 33
Joined: 16 Dec 2011, 16:54
Location: Switzerland

27 Jul 2012, 08:46

Hi,

we use PF 3.3 with PF Ext 0.4 - especially because of the genious timepicker component (from-to):

Code: Select all

pe:timePicker id="eventTimeFrom1" value="#{scheduleController.eventTimeFrom1}" onHourShow="tpStartOnHourShowCallback" mode="spinner" 
								 rendered="#{scheduleController.activityOrNonAvailabilityEventType}" onMinuteShow="tpStartOnMinuteShowCallback" widgetVar="startTimeWidget"
								 intervalMinutes="15" disabled="#{!scheduleController.eventEditable}" showCloseButton="true">
						<p:ajax event="blur" update="eventTimeFrom1Msg" />
					</pe:timePicker>
We have the problem, that if the pe_tickepicker is the first active component, it gets the focus (what's correct!) and so the popup is displayed automatically. But we do not want that (only on click into the input field)!
I thout, perhaps we can overwrite the "showOn" (0-jquery.ui.timepicker.js: "showOn: 'focus', // 'focus' for popup on focus,") - how can I do that? Or is there another solution

Thanks in advance!
mala
PF 4.0, Tomcat, Mojarra 2.1, Spring 3.2, Hibernate 4.2

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

27 Jul 2012, 10:23

There is only one possibility which is not yet implemented in the current release. TimePicker widget supports two trigger options "showOn" and "button".

Code: Select all

// trigger options
showOn: 'focus',        // Define when the timepicker is shown.
                        // 'focus': when the input gets focus, 'button' when the button trigger element is clicked,
                        // 'both': when the input gets focus and when the button is clicked.
button: null,           // jQuery selector that acts as button trigger. ex: '#trigger_button'
You can place some icon / button close to TimePicker and configure it as trigger:

Code: Select all

$('#timepicker').timepicker({
        showOn: 'button',
        button: '.timepicker_button_trigger'
});
The TimePicker will be only shown now when you click on icon / button (like PrimeFaces Calendar with Popup Button). But as I said, we don't support this feature in the component (JS widget supports, but JSF component not). Feel free to create an issue if you need it.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

50819
Posts: 33
Joined: 16 Dec 2011, 16:54
Location: Switzerland

27 Jul 2012, 11:31

Hi Oleg,

thanks for your quick reply - I'll try that!

Thank you very much for your great work!
mala
PF 4.0, Tomcat, Mojarra 2.1, Spring 3.2, Hibernate 4.2

50819
Posts: 33
Joined: 16 Dec 2011, 16:54
Location: Switzerland

31 Jul 2012, 12:00

Hi Oleg,

did not work as expected. Focus is in component --> OK, but the icon/button to get the "popup" is not rendered,:

here is a short test page - anything wrong with it?

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions" 
	xmlns:f="http://java.sun.com/jsf/core">

	<h:head>
		<script type="text/javascript">
			$('#timepicker').timepicker({
		        showOn: 'button',
		        button: '.timepicker_button_trigger'
		});
		</script>
	</h:head>
	
	<h:body>
		<br/>
		<p:focus id="focus" for="form:time" />
	
		<h:form id="form">
			<pe:timePicker id="time" />
		</h:form>
	</h:body>
</html>
(relevant?) rendered HTML:

Code: Select all

<span id="form:time" class="pe-timepicker ui-widget ui-corner-all"><input id="form:time_input" name="form:time_input" type="text" autocomplete="off" class="ui-inputfield pe-timepicker-input ui-state-default ui-corner-all" /><a class="pe-timepicker-button pe-timepicker-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n"></span></span></a><a class="pe-timepicker-button pe-timepicker-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s"></span></span></a></span><script id="form:time_s" type="text/javascript">$(function(){PrimeFacesExt.cw('TimePicker', 'widget_form_time',{id:'form:time',timeSeparator:':',myPosition:'left top',atPosition:'left bottom',showPeriod:false,showPeriodLabels:false,modeInline:false,modeSpinner:true,hours:{starts:0,ends:23},minutes:{starts:0,ends:55,interval:5},rows:4,showHours:true,showMinutes:true,showCloseButton:false,showNowButton:false,showDeselectButton:false,locale:'de',disabled:false,defaultTime:''},true);});</script>
Thank you for your support!
PF 4.0, Tomcat, Mojarra 2.1, Spring 3.2, Hibernate 4.2

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

31 Jul 2012, 13:53

but the icon/button to get the "popup" is not rendered
Sure, you should render it self. button: '.timepicker_button_trigger' is just a selector to an *existing* element which will act as button.

And you have $('#timepicker'), but it should be $('#time') according to <pe:timeRicker id="time" ..>.

Edit:
I would not try to fix it with external <script> block. Better to create a feature request http://code.google.com/p/primefaces-ext ... ssues/list
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

50819
Posts: 33
Joined: 16 Dec 2011, 16:54
Location: Switzerland

06 Aug 2012, 14:28

Issue created: http://code.google.com/p/primefaces-ext ... ail?id=233

Thanks in advance!
mala
PF 4.0, Tomcat, Mojarra 2.1, Spring 3.2, Hibernate 4.2

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest