:: Forum >> Version 2 >>
How to do a Data Picker
Hi every one,
I think many have problem for build a data picker.
I'm putting bellow a code to build data picker using zapatec calendar
it works very well for me. for more configuration details please look at http://www.zapatec.com/website/ajax/zpcal/doc/index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Data Picker Exemple</title>
<link href="http://www.activewidgets.com/runtime/2.0/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="http://www.activewidgets.com/runtime/2.0/lib/aw.js"></script>
<!-- Loading Theme file(s) -->
<link rel="stylesheet" href="http://www.zapatec.com/website/ajax/zpcal/themes/winxp.css" />
<link rel="stylesheet" href="http://www.zapatec.com/website/ajax/zpcal/themes/layouts/small.css" />
<!-- Loading Calendar JavaScript files -->
<script type="text/javascript" src="http://www.zapatec.com/website/ajax/zpcal/utils/zapatec.js"></script>
<script type="text/javascript" src="http://www.zapatec.com/website/ajax/zpcal/src/calendar.js"></script>
<!-- Loading language definition file -->
<script type="text/javascript" src="http://www.zapatec.com/website/ajax/zpcal/lang/calendar-en.js"></script>
</head>
<body>
<table width="749" height="49" border="0" cellpadding="0" cellspacing="0">
<td><div align="right">Date from </div></td>
<td><div align="left"><span id="txtDtFrom"></span><span id="btDtFrom"></span> to <span id="txtDtTo"></span><span id="btDtTo"></span></div></td>
</tr>
</table>
</body>
<script type="text/javascript" language="JavaScript">
var otxtDtFrom = new AW.UI.Input;
otxtDtFrom.setId("txtDtFrom");
otxtDtFrom.setControlText("");
otxtDtFrom.refresh();
var otxtDtTo = new AW.UI.Input;
otxtDtTo.setId("txtDtTo");
otxtDtTo.setControlText("");
otxtDtTo.refresh();
var obtDtFrom = new AW.UI.Button;
obtDtFrom.setId("btDtFrom");
obtDtFrom.setControlText("...");
obtDtFrom.refresh();
var obtDtTo = new AW.UI.Button;
obtDtTo.setId("btDtTo");
obtDtTo.setControlText("...");
obtDtTo.refresh();
//--></script>
<script type="text/javascript">//<![CDATA[
function setFocusDtFrom(cal, date) {
if (!cal.dateClicked) {
return; //date was not clicked do nothing
}
//replace this with the id of the field that has the input for the calendar
otxtDtFrom.setControlText(date);
cal.callCloseHandler(); // this closes the calendar
}
function setFocusDtTo(cal, date) {
if (!cal.dateClicked) {
return; //date was not clicked do nothing
}
//replace this with the id of the field that has the input for the calendar
otxtDtTo.setControlText(date);
cal.callCloseHandler(); // this closes the calendar
}
Zapatec.Calendar.setup({
firstDay : 1,
weekNumbers : false,
showOthers : true,
electric : false,
inputField : "txtHDtFrom",
button : "btDtFrom",
ifFormat : "%Y-%m-%d",
daFormat : "%Y/%m/%d",
onSelect : setFocusDtFrom,
showsTime :false
});
Zapatec.Calendar.setup({
firstDay : 1,
weekNumbers : false,
showOthers : true,
electric : false,
inputField : "txtHDtTo",
button : "btDtTo",
ifFormat : "%Y-%m-%d",
daFormat : "%Y/%m/%d",
onSelect : setFocusDtTo,
showsTime :false
});
//]]>
</script>
</html>
Example:
http://i.1asphost.com/tomazeli/examples/DataPicker.html
Odimar Tomazeli
Thursday, April 12, 2007
This topic is archived.
Back to support forum
Forum search
