Skip to main content

Search and Top Navigation

#9775 open bug ()

Opened January 28, 2014 12:56PM UTC

Last modified January 30, 2014 02:01PM UTC

Datepicker: Determine weekend days based on locale

Reported by: Stratak Owned by: Stratak
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.10.4
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (8)

Changed January 28, 2014 01:18PM UTC by tj.vantoll comment:1

owner: → Stratak
status: newpending

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.

Changed January 28, 2014 02:31PM UTC by Stratak comment:2

status: pendingnew

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).

Changed January 28, 2014 02:35PM UTC by scottgonzalez comment:3

status: newpending

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

Changed January 28, 2014 04:23PM UTC by Stratak comment:4

status: pendingnew

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)

Changed January 28, 2014 05:36PM UTC by tj.vantoll comment:5

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.

Changed January 29, 2014 05:35PM UTC by scottgonzalez comment:6

status: newopen
summary: Missing weekend configurationDatepicker: Determine weekend days based on locale

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.

Changed January 30, 2014 10:06AM UTC by Stratak comment:7

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.

Changed January 30, 2014 02:01PM UTC by scottgonzalez comment:8

Replying to [comment:7 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.