Datepicker: Determine weekend days based on locale

[Stratak]

Current implementation of datepicker enforces Saturday and Sunday as weekend days, without any thought about countries where this is not the case. See here: ​http://en.wikipedia.org/wiki/Workweek_and_weekend

A configuration option to be able to set weekend days is sorely lacking at the moment, and can be achieved with a simple patch like this:

@@ -4352,12 +4352,13 @@
 		dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], // For formatting
 		dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], // For formatting
 		dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"], // Column headings for days starting at Sunday
 		weekHeader: "Wk", // Column header for week of the year
 		dateFormat: "mm/dd/yy", // See format options on parseDate
 		firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
+		weekendDays: [0, 6], //List of days considered as weekend, Sun = 0, Mon = 1, ...
 		isRTL: false, // True if right-to-left language, false if left-to-right
 		showMonthAfterYear: false, // True if the year select precedes month, false for month then year
 		yearSuffix: "" // Additional text to append to the year in the month headers
 	};
 	this._defaults = { // Global defaults for all the date picker instances
 		showOn: "focus", // "focus" for popup on focus,
@@ -5880,13 +5881,13 @@
 		});
 	},
 
 	/* Generate the HTML for the current state of the date picker. */
 	_generateHTML: function(inst) {
 		var maxDraw, prevText, prev, nextText, next, currentText, gotoDate,
-			controls, buttonPanel, firstDay, showWeek, dayNames, dayNamesMin,
+			controls, buttonPanel, firstDay, weekendDays, showWeek, dayNames, dayNamesMin,
 			monthNames, monthNamesShort, beforeShowDay, showOtherMonths,
 			selectOtherMonths, defaultDate, html, dow, row, group, col, selectedDate,
 			cornerClass, calender, thead, day, daysInMonth, leadDays, curRows, numRows,
 			printDate, dRow, tbody, daySettings, otherMonth, unselectable,
 			tempDate = new Date(),
 			today = this._daylightSavingAdjust(
@@ -5957,12 +5958,13 @@
 			(this._isInRange(inst, gotoDate) ? "<button type='button' class='ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all' data-handler='today' data-event='click'" +
 			">" + currentText + "</button>" : "") + (isRTL ? "" : controls) + "</div>" : "";
 
 		firstDay = parseInt(this._get(inst, "firstDay"),10);
 		firstDay = (isNaN(firstDay) ? 0 : firstDay);
 
+		weekendDays = this._get(inst, "weekendDays");
 		showWeek = this._get(inst, "showWeek");
 		dayNames = this._get(inst, "dayNames");
 		dayNamesMin = this._get(inst, "dayNamesMin");
 		monthNames = this._get(inst, "monthNames");
 		monthNamesShort = this._get(inst, "monthNamesShort");
 		beforeShowDay = this._get(inst, "beforeShowDay");
@@ -5998,13 +6000,13 @@
 					row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
 					"</div><table class='ui-datepicker-calendar'><thead>" +
 					"<tr>";
 				thead = (showWeek ? "<th class='ui-datepicker-week-col'>" + this._get(inst, "weekHeader") + "</th>" : "");
 				for (dow = 0; dow < 7; dow++) { // days of the week
 					day = (dow + firstDay) % 7;
-					thead += "<th" + ((dow + firstDay + 6) % 7 >= 5 ? " class='ui-datepicker-week-end'" : "") + ">" +
+					thead += "<th" + (weekendDays.indexOf(day)!=-1 ? " class='ui-datepicker-week-end'" : "") + ">" +
 						"<span title='" + dayNames[day] + "'>" + dayNamesMin[day] + "</span></th>";
 				}
 				calender += thead + "</tr></thead><tbody>";
 				daysInMonth = this._getDaysInMonth(drawYear, drawMonth);
 				if (drawYear === inst.selectedYear && drawMonth === inst.selectedMonth) {
 					inst.selectedDay = Math.min(inst.selectedDay, daysInMonth);
@@ -6022,13 +6024,13 @@
 						daySettings = (beforeShowDay ?
 							beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, ""]);
 						otherMonth = (printDate.getMonth() !== drawMonth);
 						unselectable = (otherMonth && !selectOtherMonths) || !daySettings[0] ||
 							(minDate && printDate < minDate) || (maxDate && printDate > maxDate);
 						tbody += "<td class='" +
-							((dow + firstDay + 6) % 7 >= 5 ? " ui-datepicker-week-end" : "") + // highlight weekends
+							(weekendDays.indexOf((dow + firstDay) % 7)!=-1 ? " ui-datepicker-week-end" : "") + // highlight weekends
 							(otherMonth ? " ui-datepicker-other-month" : "") + // highlight days from other months
 							((printDate.getTime() === selectedDate.getTime() && drawMonth === inst.selectedMonth && inst._keyEvent) || // user pressed key
 							(defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime()) ?
 							// or defaultDate is current printedDate and defaultDate is selectedDate
 							" " + this._dayOverClass : "") + // highlight selected day
 							(unselectable ? " " + this._unselectableClass + " ui-state-disabled": "") +  // highlight unselectable days

[tj.vantoll]

Hi, Stratak,

Thanks for taking the time to contribute to jQuery UI.

You can set the firstDay: ​http://jsfiddle.net/tj_vantoll/9CCRs/. Is that what you're looking for? If not please give us a little more detail on what you're trying to accomplish.

[Stratak]

Hi,

Thanks for the answer, but firstDay is not what im looking for. I need a configuration option to let datepicker know what days are considered as part of weekend (aka non-working days).

In most countries of the world weekend consists of Saturday and Sunday. Thats fine, and those are exactly the days that datepicker marks as weekend days (it adds ui-datepicker-week-end class to them).

There are however many countries where this is not the case. For example Egypt and Israel, where weekend consists of Friday and Saturday, and working week begins on Sunday. Or Iran where they only have one weekend day, and that is Friday. Or even more extreme cases like Brunei Darussalam where weekend consists of two non-consecutive days Friday and Sunday.

What datepicker currently lacks is the option to set what days of week should datepicker mark as part of weekend (eg. what are the non-working days).

[Scott González]

What about the beforeShowDay option? I'd rather remove the weekend marking than add more configuration options.

[Stratak]

As far as I know, beforeShowDay option only allows me to add a new class to the date cells, it does not allow me to remove an already existing class.

Also, the datepicker header row cells containing days of the week abbreviations(Mo, Tu, etc...) receive the weekend marking, and beforeShowDay is never called on those (since they technically dont represent a specific date)

[tj.vantoll]

This seems like a reasonable candidate for an extension point of some sorts in the rewrite. Right now the rewrite isn't handling any "weekend" class names.

[Scott González]

We decided to utilize the information in CLDR to mark the proper days based on the locale. However, this won't be exposed as an option directly on datepicker. As such, this will need to wait for the rewrite.

[Stratak]

So, does this mean that its gonna work exactly like the firstDay option does now? That is, being part of the regional settings, but still customizable at will through $(".selector").datepicker({ firstDay: 1 }); ?

This is quite important since the users region and preferred system language can differ. Take our company for example, we work all over the world, but all our systems are in English.

[Scott González]

Replying to Stratak:

So, does this mean that its gonna work exactly like the firstDay option does now?

No, none of these options should exist. Everything should come from the locale. The user's region and system language are irrelevant, you need to tell the datepicker which locale to use, just like you do today.