Oct 10 2006

Date and time server control - part 2

Posted by admin under Controls

This is a part of an article serie where we create a ASP.NET 2.0 server control providing date (and time) selection popup . Please start from the beginning.

Ok, in part 1 we looked at the requirements. Now lets take a look at how the Javascript works:



  <!-- calendar stylesheet -->
  <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />

  <!-- main calendar program -->
  <script type="text/javascript" src="calendar.js"></script>

  <!-- language for the calendar -->
  <script type="text/javascript" src="lang/calendar-en.js"></script>

  <!-- the following script defines the Calendar.setup helper function, which makes
       adding a calendar a matter of 1 or 2 lines of code. -->
  <script type="text/javascript" src="calendar-setup.js"></script>



<hr />

<p><b>Input field with a trigger image.</b> Note that the Calendar.setup
function doesn't care if the trigger is a button, image, or anything else.
Also in this example we setup a different alignment, just to show how it's
done.  The input field is read-only (that is set from HTML).</p>

<form action="#" method="get">
<table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
 <td><input type="text" name="date" id="f_date_c" readonly="true" /></td>
 <td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
      onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td>
</table>
</form>

<script type="text/javascript">
    Calendar.setup({
        inputField     :    "f_date_c",     // id of the input field
        ifFormat       :    "%B %e, %Y",      // format of the input field
        button         :    "f_trigger_c",  // trigger for the calendar (button ID)
        align          :    "Tl",           // alignment (defaults to "Bl")
        singleClick    :    true
    });
</script>

So, in short: to use the Javascript in our own page we are supposed to add those external references to css and js, and basically call a function called Calendar.setup specifying  inputfields, trigger buttons etc.

No too hard - however as we are indeed ASP.NET developers - lets wrap this all up in a ASP.NET server control.

 

Links