jquery.datePicker example: selectWeek

< date picker home

This example shows the behaviour of a date picker when you set selectWeek to true. As you hover over or select dates on the calendar an entire week appears to be selected instead of a day. In fact, the first day of the week is selected but the calendar display makes it appear that the whole week is selected.

You can use Date.firstDayOfWeek to define where the week starts and so what day is selected when you click on a week.

Test date picker form

1. Date 1:
2. Date 2:
3. Test select: Test SELECT Doesn't shine through Even in IE Yay!

Page sourcecode

$(function()
{
	$('.date-pick').datePicker({selectWeek:true,closeOnSelect:false});
});

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;
}