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 meth
Solution 1:
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);
});
Solution 2:
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);
});
});
});
Post a Comment for "JQuery DatePicker - Selecting A Whole Week"