Example Data Picker with zapatec calendar

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 13,

Example Data Picker with zapatec calendar

See also:

Search

New Data Grid

Version 2