Processing...
Description & Source Code

ZK datebox and timebox support Java Date format. The Input series components support "rounded" mold, this mold provides elegant and rounded controls.
ZK Datebox and timebox allows different format and locales, more details please refer to our Developer's Reference

date_and_time_picker.zul
<grid hflex="1">
	<columns>
		<column width="100px" label="Format" />
		<column hflex="1" label="Datebox" />
		<column hflex="1" label="Timebox " />
		<column width="140px" label="Locale" />
	</columns>
	<rows>
		<row>
			Short : 
			<datebox id="db0" cols="12" format="short " onCreate="self.value = new Date()" />
			<timebox id="tb0" cols="12" format="short" onCreate="self.value = new Date()" />
			System
		</row>
		<row>
			Short :
		    <datebox id="db1" cols="12" format="short" onCreate="self.value = new Date()" locale="de" />
			<timebox id="tb1" cols="12" format="short" onCreate="self.value = new Date()" locale="th"/>			
			<html>
				<attribute name="content"><![CDATA[
					Date: Germany <b>(de)</b><br />
					Time: Thailand <b>(th)</b>
				]]></attribute>
			</html>
		</row>
		<row>
			Medium : 
			<datebox id="db2" cols="12" format="medium" onCreate="self.value = new Date()" />
			<timebox id="tb2" cols="12" format="medium" onCreate="self.value = new Date()" />
			System
		</row>
		<row>
			Long : 
			<cell colspan="2">
				<datebox id="db3" cols="12" format="long" onCreate="self.value = new Date()" width="230px" />
			</cell>
			System
		</row>
		<row>
			Long+Medium :
			<cell colspan="2">
				<datebox id="db4" cols="12" format="long+medium" onCreate="self.value = new Date()" width="230px" />
			</cell>
			System
		</row>
		<row>
			Custom : 
			<vlayout>
			<datebox id="db5" cols="12" format="yyyy/MM/dd" onCreate="self.value = new Date()" />
			( yyyy/MM/dd )
			</vlayout>
			<vlayout>
			<timebox id="tb3" cols="12" format="a hh:mm:ss" onCreate="self.value = new Date()" />
			( a hh:mm:ss )
			</vlayout>
			System
		</row>
	</rows>
</grid>