[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zptime/zptime/demo/ [ Home ]
File: inputformat.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" inputFormat - defines the formats for Time in the INPUT element. Valid Time Input Formats: %H - Hour (00 .. 23) %I - Hour (01 .. 12) %k - Hour (0 .. 23) %l - Hour (1 .. 12) %m - Month (01 .. 12) %M - Minute (00 .. 59) %n - Newline character %p - 'PM' or 'AM' %P - 'pm' or 'am' %S - Second (00 .. 59) %s - Number of seconds since Epoch %t - A tab character %% - A literal % character &nbsp; ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Time Widget - Input Formats</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
	<script type="text/javascript" src="../src/zptime.js"></script>

	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>
	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	
	
<link rel="stylesheet" href="inputformat.css" type="text/css">
<script>
	var time = new Zapatec.TimeSelect.setup({
		parent : "55", 
		inputField : "sell", 
		inputFormat : "%H : %M",
		theme:"winxp"
	});
	var time1 = new Zapatec.TimeSelect.setup({
		parent : "56", 
		inputField : "sell1", 
		inputFormat : "%I : %M%P", 
		timeFormat : "24",
    theme:"winxp"
	});
	var time2 = new Zapatec.TimeSelect.setup({
		parent : "57", 
		inputField : "sell2", 
		inputFormat : "%k : %M", 
		showSeconds : true,
    theme:"winxp"
	});
	var time3 = new Zapatec.TimeSelect.setup({
		parent : "58", 
		inputField : "sell3", 
		inputFormat : "%l", 
		showMinutes : false,
    theme:"winxp"
	});
	var myDate=new Date()
	myDate.setHours(10,10,10,0)
	var time4 = new Zapatec.TimeSelect.setup({
		parent : "59", 
		inputField : "sell4", 
		inputFormat : "%H : %M", 
		date : myDate, 
		separator : "<span style='color:red'>-</span>",
    theme:"winxp"
	});
</script>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Input Formats</div>

		<div class='zpCalDemoText'>
		<ul>
		
		
<li><b>inputFormat</b> - defines the formats for Time in the INPUT element.</li>
<li>Valid Time Input Formats:
	<table border=2>
	<tr>
	<td>%H - Hour (00 .. 23)</td>
	<td>%I - Hour (01 .. 12)</td>
	</tr>
	<tr>
	<td>%k - Hour (0 .. 23)</td>
	<td>%l - Hour (1 .. 12)</td>
	</tr>
	<tr>
	<td>%m - Month (01 .. 12)</td>
	<td>%M - Minute (00 .. 59)</td>
	</tr>
	<tr>
	<td>%n - Newline character</td>
	<td>%p - "PM" or "AM"</td>
	</tr>
	<tr>
	<td>%P - "pm" or "am"</td>
	<td>%S - Second (00 .. 59)</td>
	</tr>
	<tr>
	<td>%s - Number of seconds since Epoch</td>
	<td>%t - A tab character</td>
	</tr>
	<tr>
	<td>%% - A literal % character</td>
	<td>&nbsp;</td>
	</tr>
	</table>
</li>

		</ul>
		</div>



<div align="center" class="theDemo">
	<div class="theTime" id="55"></div>
	<div style="" class="theDescription">
		Input for Time: <input class="theInput" type="text" name="date1" id="sell" size="30" value="">
		<br/>
		<b>Time Features: inputFormat = "%H : %M"</b>
	</div>
</div>

<div align="center" class="theDemo">
	<div class="theTime" id="56"></div>
	<div style="" class="theDescription">
		Input for Time: <input class="theInput" type="text" name="date1" id="sell1" size="30" value="">
		<br/>
		<b>Time Features: inputFormat = "%I : %M%P", timeFormat = "24"</b>
	</div>
</div>

<div align="center" class="theDemo">
	<div class="theTime" id="57"></div>
	<div style="" class="theDescription">
		Input for Time: <input class="theInput" type="text" name="date1" id="sell2" size="30" value="">
		<br/>
		<b>Time Features: inputFormat = "%k : %M", showSeconds = true</b>
	</div>
</div>

<div align="center" class="theDemo">
	<div class="theTime" id="58"></div>
	<div style="" class="theDescription">
		Input for Time: <input class="theInput" type="text" name="date1" id="sell3" size="30" value="">
		<br/>
		<b>Time Features: inputFormat = "%l, show Hours ONLY"</b>
	</div>
</div>

<div align="center" class="theDemo">
	<div class="theTime" id="59"></div>
	<div style="" class="theDescription">
		Input for Time: <input class="theInput" type="text" name="date1" id="sell4" size="30" value="">
		<br/>
		<b>Time Features: inputFormat = "%H : %M", timeFormat = "24", Initial time is set to 10:10, separator is red</b>
	</div>
</div>


	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Time Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>