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'.