38 lines
1.4 KiB
HTML
38 lines
1.4 KiB
HTML
<!DOCTYPE html PUBLIC
|
|
"-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Dynarch Calendar -- Single calendar for multiple fields</title>
|
|
<script src="../src/js/jscal2.js"></script>
|
|
<script src="../src/js/lang/en.js"></script>
|
|
<link rel="stylesheet" href="../src/css/jscal2.css" />
|
|
<link rel="stylesheet" href="../src/css/border-radius.css" />
|
|
<link rel="stylesheet" href="../src/css/steel/steel.css" />
|
|
</head>
|
|
<body>
|
|
<p>
|
|
To save memory, you can use a single (popup) calendar object to manage
|
|
multiple input fields. The following sample shows you how to do it.
|
|
</p>
|
|
|
|
<input size="30" id="f_date1" /><button id="f_btn1">...</button><br />
|
|
<input size="30" id="f_date2" /><button id="f_btn2">...</button><br />
|
|
<input size="30" id="f_date3" /><button id="f_btn3">...</button><br />
|
|
<input size="30" id="f_date4" /><button id="f_btn4">...</button>
|
|
|
|
<script>//<![CDATA[
|
|
|
|
var cal = Calendar.setup({
|
|
onSelect: function(cal) { cal.hide() },
|
|
showTime: true
|
|
});
|
|
cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d %I:%M %p");
|
|
cal.manageFields("f_btn2", "f_date2", "%b %e, %Y %I:%M %p");
|
|
cal.manageFields("f_btn3", "f_date3", "%e %B %Y %I:%M %p");
|
|
cal.manageFields("f_btn4", "f_date4", "%A, %e %B, %Y %I:%M %p");
|
|
|
|
//]]></script>
|
|
</body>
|
|
</html>
|