# DateChooser Examples

(View source for javascript help, or go to http://yellow5.us/projects/datechooser/ for more information.)

Example 1

## DateChooser structure (for CSS support)

    <div class="calendar">
    	<table summary="DateChooser">
    		<thead>
    			<tr>
    				<th><a class="previousyear" href="#" title="Previous Year">&laquo;</a></th>
    				<th><a class="previousmonth" href="#" title="Previous Month">&lt;</a></th>
    				<th colspan="3"><a class="currentdate" href="#" title="Current Date">May 2006</a></th>
    				<th><a class="nextmonth" href="#" title="Next Month">&gt;</a></th>
    				<th><a class="nextyear" href="#" title="Next Year">&raquo;</a></th>
    			</tr>
    			<tr>
    				<td>S</td>
    				<td>M</td>
    				<td>T</td>
    				<td>W</td>
    				<td>T</td>
    				<td>F</td>
    				<td>S</td>
    			</tr>
    		</thead>
    		<tbody>
    			<!-- Notice the "selectedday" class for the date picked -->
    			<!-- Today's date will have class "today" -->
    			<!-- Dates out of range will have class "invalidday" -->
    			<tr>
    				<td></td>
    				<td><a href="#">1</a></td>
    				<td><a href="#">2</a></td>
    				<td><a class="selectedday" href="#">3</a></td>
    				<td><a href="#">4</a></td>
    				<td><a href="#">5</a></td>
    				<td><a href="#">6</a></td>
    			</tr>
    			<!-- ...and on through the rest of the month -->
    		</tbody>
    	</table>
    </div>

The link created by the setLink() property has class 'calendarlink', and the icon created by the setIcon() property has class 'calendaricon'.