Opened 9 years ago
Last modified 9 years ago
#9775 open bug
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
Change History (8)
comment:1 Changed 9 years ago by
Owner: | set to Stratak |
---|---|
Status: | new → pending |
comment:2 Changed 9 years ago by
Status: | pending → new |
---|
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).
comment:3 Changed 9 years ago by
Status: | new → pending |
---|
What about the beforeShowDay
option? I'd rather remove the weekend marking than add more configuration options.
comment:4 Changed 9 years ago by
Status: | pending → new |
---|
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)
comment:5 Changed 9 years ago by
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.
comment:6 Changed 9 years ago by
Status: | new → open |
---|---|
Summary: | Missing weekend configuration → Datepicker: 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.
comment:7 follow-up: 8 Changed 9 years ago by
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.
comment:8 Changed 9 years ago by
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.
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.