3.2.0

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>&nbsp;to&nbsp;<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
April 12,

This topic is archived.

See also:


Back to support forum