From 846ff0d2498b3ec5d154f1d6e65b6c4f5e87d107 Mon Sep 17 00:00:00 2001
From: DevChu <marchuqq@gmail.com>
Date: Wed, 29 Apr 2015 20:00:59 +0800
Subject: [PATCH] ZK-2707: Add a timepicker component

---
 zkthemedemo/src/main/webapp/demo/index.zul    |  1 +
 .../src/main/webapp/demo/timepicker.zul       | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 zkthemedemo/src/main/webapp/demo/timepicker.zul

diff --git a/zkthemedemo/src/main/webapp/demo/index.zul b/zkthemedemo/src/main/webapp/demo/index.zul
index 9c26c4237..169eaa195 100644
--- a/zkthemedemo/src/main/webapp/demo/index.zul
+++ b/zkthemedemo/src/main/webapp/demo/index.zul
@@ -85,6 +85,7 @@
 							<item label="Combobox"              topic="demo/inputs-combobox" />
 							<item label="Chosenbox"             topic="demo/chosenbox" />
 							<item label="Checkbox"             topic="demo/checkbox" />
+							<item label="Timepicker"             topic="demo/timepicker" />
 							
 						<category value="Miscellaneous" />
 							<item label="Button"        topic="demo/button" />
diff --git a/zkthemedemo/src/main/webapp/demo/timepicker.zul b/zkthemedemo/src/main/webapp/demo/timepicker.zul
new file mode 100644
index 000000000..168984ddb
--- /dev/null
+++ b/zkthemedemo/src/main/webapp/demo/timepicker.zul
@@ -0,0 +1,36 @@
+<zk>
+	<zscript><![CDATA[
+		import java.util.Calendar;
+		import java.util.Date;
+		
+		Date time = new Date();
+		Calendar calendar = Calendar.getInstance();
+		calendar.setTime(new Date());
+		calendar.set(0, 0, 0, 10, 10);
+		Date min = calendar.getTime();
+		calendar.set(0, 0, 0, 12, 10);
+		Date max = calendar.getTime();
+	]]></zscript>
+	<vlayout>
+		<hlayout>
+			<label value="HH:mm" />
+			<timepicker format="HH:mm" value="${time}" width="200px"/>
+		</hlayout>
+		<hlayout>
+			<label value="HH:mm a" />
+			<timepicker format="HH:mm a" value="${time}" min="${min}" width="200px" interval="3600" />
+		</hlayout>
+		<hlayout>
+			<label value="HH:mm:ss" />
+			<timepicker format="HH:mm:ss" value="${time}" min="${min}" max="${max}" width="200px" interval="3600" />
+		</hlayout>
+		<hlayout>
+			<label value="HH:mm:ss a" />
+			<timepicker format="HH:mm:ss a" value="${time}" width="200px"/>
+		</hlayout>
+		<hlayout>
+			<label value="hh:mm:ss a" />
+			<timepicker format="hh:mm:ss a" value="${time}" width="200px"/>
+		</hlayout>
+	</vlayout>
+</zk>
\ No newline at end of file