jquery.datePicker example: simple datePicker today selected

< date picker home

The following example displays simple use of the datePicker component to select a date for input fields. Today's date is set as the default by putting it into the input field (see here for an example without putting the value in the input field).

Test date picker form

Page sourcecode

	$('.date-pick').datePicker().val(new Date().asString()).trigger('change');

Page CSS

/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat; 
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
input.dp-applied {
	width: 140px;
	float: left;