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 comment:1
owner: | → Stratak |
---|---|
status: | new → pending |
Changed January 28, 2014 02:31PM UTC by comment:2
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).
Changed January 28, 2014 02:35PM UTC by comment:3
status: | new → pending |
---|
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 comment:4
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)
Changed January 28, 2014 05:36PM UTC by 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 comment:6
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.
Changed January 30, 2014 10:06AM UTC by 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 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.
Hi, Stratak,
Thanks for taking the time to contribute to jQuery UI.
You can set the
: 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.