jQuery DatePicker - selecting a whole week
I'm using two jQuery datepickers to select a dates range. Is there a way to select a whole week? This means that when opening the start datepicker, there will be two selection methods:
- Select a single start date (without affecting the end datepicker).
- Select a whole week (which would set the start datepicker to the first d开发者_运维技巧ay of the week and then end datepicker to the last).
In asp calendar something similar can be done by setting the SelectionMode property to "DayWeek", but I haven't a way to achieve that in jQuery datepicker. Can it be done?
Here is I how ended up implementing this:
// A click on a week number cell in the weeks column of the start datepicker
$("td.ui-datepicker-week-col").live("click", function()
{
// Simulate a click on the first day of the week
$(this).next().click();
// Grab the date, and set the end of the week in the end datepicker
var fromDate = $("#inputStartDate").datepicker("getDate");
var toDate = fromDate;
toDate.setDate(fromDate.getDate() + 6);
$("#inputEndDate").datepicker("setDate", toDate);
});
Here's an example when both input fields can be clicked:
$(document).ready(function(){
// date picker for Export part
$(".datePicker").datepicker(
{
dateFormat: 'yymmdd',
showWeek: true,
firstDay: 1,
weekHeader: "",
showOtherMonths: true,
selectOtherMonths: true
}
).focus(function(){
// prevent focus event firing twice
var $this = $(this);
var now = +new Date();
var lastClicked = $this.data("lastClicked");
if (lastClicked && (now - lastClicked) < 100) {
// Don't do anything
return;
}
$this.data("lastClicked", now);
var el = this;
// A click on a week number cell in the weeks column of the start datepicker
$("td.ui-datepicker-week-col").click(function(){
// Simulate a click on the first day of the week
$(this).next().click();
var selectedDate = $(el).datepicker("getDate");
$("#inputStartDate").datepicker("setDate", selectedDate);
var toDate = selectedDate;
toDate.setDate(toDate.getDate() + 6);
$("#inputEndDate").datepicker("setDate", toDate);
});
});
});
精彩评论