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
Forum search
