Overwrite TicmePicker defaults

50819 · 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):

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

Oleg · 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.

50819 · 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

50819 · 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!

Oleg · 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

50819 · 06 Aug 2012, 14:28

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

Thanks in advance!
mala

Overwrite TicmePicker defaults

Who is online