Home » forums » Development » XForms

problem with displaying datePicker (calendar control)

Submitted by somegeek on Sat, 2007-12-08 04:14.

I have the following piece of code which is supposed to display a datePicker, but something is wrong with my code and I am not able to display the calendar:

------------
<?xml version="1.0" encoding="UTF-8"?>
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:f="http://orbeon.org/oxf/xml/formatting"
xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:fe="http://localhost/simple/xform"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms">

<xhtml:head>
<xhtml:style type="text/css" id="intalio-fe-xforms" xml:space="preserve">
[!CDATA[@namespace xforms url("http://www.w3.org/2002/xforms");
#hiddenInput .xf-value {display:none;}
/*#LastName {position : absolute; top : 45; left : 45; width : 540; height : 32; margin : 0; padding : 0;}*/
#LastName input {width : 358; height : 24;background-color: yellow;}

#_First_Name {width : 358; height : 24;background-color: yellow;}
#_Suffix {width : 358; height : 24;background-color: yellow;}
#_Middle_Name {width : 358; height : 24;background-color: yellow;}

#Incident_Date_To {background-color: yellow;}
#Incident_Date_From {background-color: yellow;}

#intalio-bpms-form {background: #FF9933;}]]
</xhtml:style>

<xforms:model schema="simple.xform.xsd">
<!-- Task Input -->
<xforms:instance id="taskinput">
<fe:input>
<LastName xmlns="http://localhost/simple/xform"/>
<_First_Name xmlns="http://localhost/simple/xform"/>
<_Middle_Name xmlns="http://localhost/simple/xform"/>
<_Suffix xmlns="http://localhost/simple/xform"/>
<Incident_Date_To xmlns="http://localhost/simple/xform" date="2007-01-01"/>
<!--<d:Incident_Date_From date="2007-01-01"/>-->
<!--
<Incident_Date_From xmlns="http://localhost/simple/xform" date="2007-01-01"/>
-->
</fe:input>
</xforms:instance>

<!-- Task metadata - used only for People Initiating Processes Task forms -->
<xforms:instance id="taskmetadata">
<taskmetadata/>
</xforms:instance>

<!-- Task Output -->
<xforms:instance id="taskoutput">
<fe:output>
<LastName xmlns="http://localhost/simple/xform"/>
<_First_Name xmlns="http://localhost/simple/xform"/>
<_Middle_Name xmlns="http://localhost/simple/xform"/>
<_Suffix xmlns="http://localhost/simple/xform"/>
<!--<Incident_Date_To xmlns="http://localhost/simple/xform"/>-->
<Incident_Date_To xmlns="http://localhost/simple/xform" date="2007-01-01"/>
<!--<xforms:output value="concat(substring(instance('taskoutput')/fe:Incident_Date_To/@date,6,2),'/',substring(instance('taskoutput')/fe:Incident_Date_To/@date,9,2),'/',substring(instance('taskoutput')/fe:Incident_Date_To/@date,1,4))"/>-->
</fe:output>
</xforms:instance>

<xforms:action ev:event="xforms-ready">
<xforms:action xforms:if="string(instance('taskoutput')/@saved) != 'true'">
<xforms:setvalue ref="instance('taskoutput')/fe:LastName" value="instance('taskinput')/fe:LastName"/>
<xforms:setvalue ref="instance('taskoutput')/fe:_First_Name" value="instance('taskinput')/fe:_First_Name"/>
<xforms:setvalue ref="instance('taskoutput')/fe:_Suffix" value="instance('taskinput')/fe:_Suffix"/>
<xforms:setvalue ref="instance('taskoutput')/fe:_Middle_Name" value="instance('taskinput')/fe:_Middle_Name"/>
<!--
<xforms:setvalue ref="instance('taskoutput')/fe:Incident_Date_To" value="instance('taskinput')/fe:Incident_Date_To"/>
<xforms:setvalue ref="instance('taskoutput')/fe:Incident_Date_From" value="instance('taskinput')/fe:Incident_Date_From"/>
-->
<xforms:setvalue ref="instance('taskoutput')/fe:Incident_Date_To" value="normalize-space(instance('taskinput')/fe:Incident_Date_To)"/>
<xforms:setvalue ref="instance('taskoutput')/fe:Incident_Date_From" value="normalize-space(instance('taskinput')/fe:Incident_Date_From)"/>
</xforms:action>
</xforms:action>

<xforms:bind nodeset="instance('taskoutput')/fe:LastName" relevant="true()" type="xs:string"/>
<xforms:bind nodeset="instance('taskinput')/fe:_First_Name" relevant="true()" type="xs:string"/>
<xforms:bind nodeset="instance('taskinput')/fe:_Suffix" relevant="true()" type="xs:string"/>
<xforms:bind nodeset="instance('taskinput')/fe:_Middle_Name" relevant="true()" type="xs:string"/>
<xforms:bind nodeset="instance('taskoutput')/fe:Incident_Date_To/@date" required="true()" type="xs:gYearMonth"/>
<xforms:bind nodeset="instance('taskoutput')/fe:Incident_Date_From/@date" required="true()" type="xs:gYearMonth"/>
</xforms:model>

</xhtml:head>

<xhtml:body class="bodyBackground">
<xhtml:div id="intalio-bpms-form">
<xhtml:div id="LastName">

<!-- Type in Last Name here -->
<xforms:input ref="instance('taskoutput')/fe:LastName">
<xforms:label> Last Name: </xforms:label>
</xforms:input>

</xhtml:div>

<xhtml:div id="_First_Name">

<!-- Type in First Name here -->
<xforms:input ref="instance('taskoutput')/fe:_First_Name">
<xforms:label> First Name: </xforms:label>
</xforms:input>

</xhtml:div>

<xhtml:div id="_Suffix">

<!-- Type in Suffix here -->
<xforms:input ref="instance('taskoutput')/fe:_Suffix">
<xforms:label> Suffix: </xforms:label>
</xforms:input>

</xhtml:div>

<xhtml:div id="_Middle_Name">

<!-- Type in Middle Name here -->
<xforms:input ref="instance('taskoutput')/fe:_Middle_Name">
<xforms:label> Middle Name: </xforms:label>
</xforms:input>

</xhtml:div>

<xhtml:div id="Incident_Date_To">

<!-- Calendar control here -->
<xforms:input ref="instance('taskoutput')/fe:Incident_Date_To/@date" incremental="true" id="hiddenInput">
<xforms:label> Incident Date To: </xforms:label>
</xforms:input>
<xforms:output value="concat(substring(instance('taskoutput')/fe:Incident_Date_To/@date,6,2),'/',substring(instance('taskoutput')/fe:Incident_Date_To/@date,9,2),'/',substring(instance('taskoutput')/fe:Incident_Date_To/@date,1,4))"/>
</xhtml:div>

<!-- Calendar control here -->
<xhtml:div id="Incident_Date_From">
<xforms:input ref="instance('taskoutput')/fe:Incident_Date_From">
<xforms:label> Incident Date From: </xforms:label>
</xforms:input>

</xhtml:div>

</xhtml:div>
</xhtml:body>

</xhtml:html>
-------------------------------------------------------------------------------------------------------------

Any suggestions are appreciated. I am missing some XPath expression or some namespace declaration somewhere, I think.

regards

‹ Reusable components e.g Address, Name. xforms:setvalue is not setting more than one value with <xforms:action ev:event="xforms-value-changed"> ›
»

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Hi, Please see the form

Submitted by alexsansom on Mon, 2007-12-10 14:30.

Hi,

Please see the form below for an example of a date picker control. Basically, the xf:bind/@type attribute for the instance data that the control references should have a value of 'xsd:date'. There were some other issues with your form too which are solved in the attached form.

Thanks.

<html 
	xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:xf="http://www.w3.org/2002/xforms"
	xmlns:xsd="http://www.w3.org/2001/XMLSchema"
	xmlns:ev="http://www.w3.org/2001/xml-events" 
	xmlns:fp="urn:formsplayer.com"
	xmlns:fe="http://localhost/simple/xform"
	>
	<head>
		<!-- 
			This for was tested with formsPlayer 1.5.7.1003.
		-->
		
		<!-- 
			<object> tag is required to use formsPlayer
		-->
		<object id="formsPlayer" classid="CLSID:4D0ABA11-C5F0-4478-991A-375C4B648F58">
			<strong>formsPlayer has not loaded. Please check your installation.</strong>
		</object>
		<?import namespace="xf" implementation="#formsPlayer" ?>
		
		<!-- 
			Style the form controls
		-->
		<style type="text/css">
			xf\:label
			{
				width				: 200px;
			}
			
			xf\:input,
			xf\:output
			{
				display				: block;
				margin-bottom		: 5px;
				background-color	: yellow;
			}
			
			.required
			{
				background-color	: red;
			}
		</style>
		
		<!--
			XForms model
		-->
		<xf:model id="mdl-task" functions="fp:HTMLSerialise">
			<!-- 
				Instance for Task Input 
			-->
			<xf:instance id="taskinput">
				<input xmlns="http://localhost/simple/xform">
					<LastName>Bloggs</LastName>
					<_First_Name>Joe</_First_Name>
					<_Middle_Name>Jack</_Middle_Name>
					<_Suffix />
					<Incident_Date_To date="2007-01-01" />
					<Incident_Date_From date="2007-01-02" />
				</input>
			</xf:instance>
			<!-- 
				Instance for Task Output 
			-->
			<xf:instance id="taskoutput">
				<output xmlns="http://localhost/simple/xform">
					<LastName />
					<_First_Name />
					<_Middle_Name />
					<_Suffix />
					<Incident_Date_To date="" />
					<Incident_Date_From date="" />
				</output>
			</xf:instance>
			<!-- 
				@type="xsd:date" casues the xf:input to be displayed as a date picker.
			-->
			<xf:bind nodeset="instance('taskoutput')">
				<xf:bind 
					nodeset="fe:Incident_Date_To/@date"
					required="true()" 
					type="xsd:date"
				/>
				<xf:bind 
					nodeset="fe:Incident_Date_From/@date" 
					required="true()" 
					type="xsd:date"
				/>
			</xf:bind>
			
			<!-- 
				Set values when form is ready to be used
			-->
			<xf:action ev:event="xforms-ready">
				<xf:setvalue 
					ref="instance('taskoutput')/fe:LastName" 
					value="instance('taskinput')/fe:LastName"
				/>
				<xf:setvalue 
					ref="instance('taskoutput')/fe:_First_Name" 
					value="instance('taskinput')/fe:_First_Name"
				/>
				<xf:setvalue 
					ref="instance('taskoutput')/fe:_Suffix" 
					value="instance('taskinput')/fe:_Suffix"
				/>
				<xf:setvalue 
					ref="instance('taskoutput')/fe:_Middle_Name" 
					value="instance('taskinput')/fe:_Middle_Name"
				/>
				<xf:setvalue 
					ref="instance('taskoutput')/fe:Incident_Date_To/@date" 
					value="instance('taskinput')/fe:Incident_Date_To/@date"
				/>
				<xf:setvalue 
					ref="instance('taskoutput')/fe:Incident_Date_From/@date" 
					value="instance('taskinput')/fe:Incident_Date_From/@date"
				/>
			</xf:action>
		</xf:model>
	</head>
	<body>
		<xf:group ref="instance('taskoutput')">
			<xf:input ref="fe:LastName">
				<xf:label> Last Name: </xf:label>
			</xf:input>
			
			<xf:input ref="fe:_First_Name">
				<xf:label> First Name: </xf:label>
			</xf:input>
			
			<xf:input ref="fe:_Suffix">
				<xf:label> Suffix: </xf:label>
			</xf:input>
			
			<xf:input ref="fe:_Middle_Name">
				<xf:label> Middle Name: </xf:label>
			</xf:input>
			
			<xf:input ref="fe:Incident_Date_To/@date">
				<xf:label> Incident Date To: </xf:label>
			</xf:input>
			
			<xf:output value="concat(substring(instance('taskoutput')/fe:Incident_Date_To/@date, 6, 2), '/', substring(instance('taskoutput')/fe:Incident_Date_To/@date, 9, 2), '/', substring(instance('taskoutput')/fe:Incident_Date_To/@date, 1, 4))">
				<xf:label>Reformatted date: </xf:label>
			</xf:output>
			
			<xf:input ref="fe:Incident_Date_From/@date">
				<xf:label> Incident Date From: </xf:label>
			</xf:input>
		</xf:group>
	</body>
</html>
»

datepicker now works!

Submitted by somegeek on Thu, 2008-01-17 18:19.

I have not had a chance to thank you. It now works. Is it possible to reformat the date picked by the date picker to do just what the following does in your code:

"<xf:output value="concat(substring(instance('taskoutput')/fe:Incident_Date_To/@date, 6, 2), '/', substring(instance('taskoutput')/fe:Incident_Date_To/@date, 9, 2), '/', substring(instance('taskoutput')/fe:Incident_Date_To/@date, 1, 4))">
<xf:label>Reformatted date: </xf:label>
</xf:output>"

Thanks a lot again.

»

input field not visible

Submitted by somegeek on Wed, 2008-01-23 23:08.

Your code seemed not to work in Orbeon in the beginning. But it now works. But the problem I have is, I am working with Orbeon forms and the date picker displays the date in the space beside the calendar control, instead of writing it into a input (text) control.

Is there any workaround for this. Any suggestions are appreciated.

»

Not without using a temporary value

Submitted by alexsansom on Fri, 2008-01-18 12:01.

The following form uses two instance data nodes, one for the date picker and the other to hold the formatted value. The value is formatted using xf:bind/@calculate attribute.

<html 
	xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:xf="http://www.w3.org/2002/xforms"
	xmlns:xsd="http://www.w3.org/2001/XMLSchema"
	xmlns:ev="http://www.w3.org/2001/xml-events" 
	xmlns:fp="urn:formsplayer.com"
>
	<head>
		<object id="formsPlayer" classid="CLSID:4D0ABA11-C5F0-4478-991A-375C4B648F58">
			<strong>formsPlayer has not loaded. Please check your installation.</strong>
		</object>
		<?import namespace="xf" implementation="#formsPlayer" ?>
		
		<style type="text/css">
			xf\:label
			{
				width				: 200px;
			}
			
			xf\:input,
			xf\:output
			{
				display				: block;
				margin-bottom		: 5px;
			}
		</style>
		
		<xf:model id="mdl-date-format" functions="fp:HTMLSerialise">

			<xf:instance id="inst-date-format">
				<root xmlns="">
					<temp_date />
					<submission_date />
				</root>
			</xf:instance>

			<xf:bind nodeset="instance('inst-date-format')">
				<xf:bind 
					nodeset="temp_date" 
					type="xsd:date"
				/>
				<xf:bind 
					nodeset="submission_date" 
					calculate="
								if(
									not(../temp_date = ''), 
									concat(substring(../temp_date, 6, 2), '/', substring(../temp_date, 9, 2), '/', substring(../temp_date, 1, 4)),
									''
								)
					"
				/>
			</xf:bind>
		</xf:model>
	</head>
	<body>
		<xf:group ref="instance('inst-date-format')">
			
			<xf:input ref="temp_date">
				<xf:label>Select date: </xf:label>
			</xf:input>
			
			<xf:output ref="submission_date">
				Calculated date: </xf:label>
			</xf:output>
			
		</xf:group>
	</body>
</html>
»

rephrasing my earlier question

Submitted by somegeek on Wed, 2008-01-23 23:16.

The only output of the date picker in Orbeon is to say for example "Wednesday November 13, 2007" . How would I be able to format such a date so as to read mm-dd-yyyy for example. I solved the problem of Orbeon not displaying an input control beside the date picker and I am still trying how to format the "long date" as above.

Thanks in advance. I appreciate your help very much

»

Sorry.

Submitted by alexsansom on Thu, 2008-01-24 11:05.

I do not know much about Xforms use with Orbeon. My examples are tested to work with the formsPlayer processor only. However, a quick look at the Orbeon documentation says:

"The input field is complemented by a pop-up calendar. The user can enter a date manually, or use the calendar to select a date in the past or in the future. You can customize the calendar by copying the files in orbeon-resources-public.jar under ops/javascript/jscalendar to your resources directory. Your modified files in the resources will have a precedence over those found in orbeon-resources-public.jar."

Saying that the calendar is customisable may mean that the value produced from it is too. Maybe this'll point you in the right direction.

Text is from the 'Validation' section of the model item property docs at http://www.orbeon.com/ops/doc/reference-xforms-ng#d12e406.

»

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.