Simple example

In the first example, we will create a form, and initialise the datepicker widget. It should be noted that you can do many more things than just form widgets and validation with PAX, but this makes a fine first example.
We start with a simple form:

<form name='valForm' method='post'>

    <label for='name'>Name</label><input name='name' id='name' type='text' value=''/><br/>

    <label for='dob'>Date of birth</label><input name='dob' id='dob' type='text' size='30' value=''/><br/>

    <label for='city'>City of birth</label><input name='city' id='city' type='text' value=''/><br/>

</form>

As you can see, it is a standard form, with no special markup. One of the key concepts of developing with PAX is unobtrusiveness. In order to make the date of birth field use the date picker, we need some javascript (assuming we have included PAX as described in the introduction).
You should note the use of a conditional y offset for the button, (for Internet Explorer), this feature is in recognition that CSS is often not standard across browsers, and in our case, IE's interpretation of it is a bit different to other browsers. This is an easy way to get around such issues:

pax.load.onloaded( function() {

    pax.widget.datePick.init( pax.$('dob'), { 

        dateFormat: 'd-m-Y',

        buttonOffset: { y: (pax.isIe)? -9: 0 }

    } );

} );

And BAM! You now have a datepicker! The example above is rendered here:

Click on the little icon in the "Date of birth" field, or type 'next friday' into the box ;o) The date picker can do all sorts of things, such as calculating dates by offsets, by day name, and so on, see the date picker demo for more details.
Now you're probably wondering: what the heck is "pax.load.onloaded"? Well, when you load a HTML page into a browser, you must wait till the DOM has loaded, before executing DOM based scripting. As such, PAX has a small function to do this for us.
Well, that example wasn't too hard, was it!? Read on for a more substancial example!