+117
-24
lines changedFilter options
+117
-24
lines changed Original file line number Diff line number Diff line change
@@ -282,6 +282,23 @@ Notes:
282 282
- `year`, `month` and `day` will always be shown. If you need to leave out a value, set the property
283 283
to `undefined`, although this is highly discouraged for accessibility reasons
284 284 285 +
### Weekday name header format
286 + 287 +
<span class="badge badge-info small">2.12.0+</span>
288 + 289 +
The calendar weekday name header format defaults to `'short'`, which is typically a three-character
290 +
abbreviation of the weekday, although some [locales](#internationalization) may override this. The
291 +
format can be controlled via the prop `weekday-header-format` and accepts one of three values:
292 + 293 +
- `'long'` the full weekday name (e.g. <samp>Tuesday</samp>). Handy when using a full width
294 +
calendar. Avoid using with the default calendar width.
295 +
- `'short'` typically is a 2 or 3 letter abbreviation of the weekday name, depending on the selected
296 +
locale (e.g. "Tue").
297 +
- `'narrow'` is typically a single character abbreviation (e.g., <samp>T</samp>). Two weekdays may
298 +
have the same narrow style for some locales (e.g. Tuesday and Thursday's narrow style are both
299 +
<samp>T</samp>). This can be handy for those locales that do not support the `'short'` format,
300 +
such as locales `'ar'` and `'fa'`.
301 + 285 302
### Hiding the top selected date header
286 303 287 304
By default, the current selected date will be displayed at the top of the calendar component,
@@ -592,6 +609,7 @@ the same locale as requested, depending on the supported locales of `Intl`).
592 609
labelHelp: 'Mit den Pfeiltasten durch den Kalender navigieren'
593 610
},
594 611
'ar-EG': {
612 +
weekdayHeaderFormat: 'narrow',
595 613
labelPrevDecade: 'العقد السابق',
596 614
labelPrevYear: 'العام السابق',
597 615
labelPrevMonth: 'الشهر السابق',
@@ -607,6 +625,7 @@ the same locale as requested, depending on the supported locales of `Intl`).
607 625
labelHelp: 'استخدم مفاتيح المؤشر للتنقل في التواريخ'
608 626
},
609 627
zh: {
628 +
weekdayHeaderFormat: 'narrow',
610 629
labelPrevDecade: '过去十年',
611 630
labelPrevYear: '上一年',
612 631
labelPrevMonth: '上个月',
@@ -42,6 +42,14 @@ const NAME = 'BCalendar'
42 42
// Key Codes
43 43
const { UP, DOWN, LEFT, RIGHT, PAGEUP, PAGEDOWN, HOME, END, ENTER, SPACE } = KeyCodes
44 44 45 +
// Common calendar option value strings
46 +
export const STR_GREGORY = 'gregory'
47 +
export const STR_NUMERIC = 'numeric'
48 +
export const STR_2_DIGIT = '2-digit'
49 +
export const STR_LONG = 'long'
50 +
export const STR_SHORT = 'short'
51 +
export const STR_NARROW = 'narrow'
52 + 45 53
// --- BCalendar component ---
46 54 47 55
// @vue/component
@@ -224,13 +232,25 @@ export const BCalendar = Vue.extend({
224 232
},
225 233
dateFormatOptions: {
226 234
// `Intl.DateTimeFormat` object
235 +
// Note: This value is *not* to be placed in the global config
227 236
type: Object,
228 237
default: () => ({
229 -
year: 'numeric',
230 -
month: 'long',
231 -
day: 'numeric',
232 -
weekday: 'long'
238 +
year: STR_NUMERIC,
239 +
month: STR_LONG,
240 +
day: STR_NUMERIC,
241 +
weekday: STR_LONG
233 242
})
243 +
},
244 +
weekdayHeaderFormat: {
245 +
// Format of the weekday names at the top of the calendar
246 +
// Note: This value is *not* to be placed in the global config
247 +
type: String,
248 +
// `short` is typically a 3 letter abbreviation,
249 +
// `narrow` is typically a single letter
250 +
// `long` is the full week day name
251 +
// Although some locales may override this (i.e `ar`, etc)
252 +
default: STR_SHORT,
253 +
validator: value => arrayIncludes([STR_LONG, STR_SHORT, STR_NARROW], value)
234 254
}
235 255
},
236 256
data() {
@@ -271,18 +291,18 @@ export const BCalendar = Vue.extend({
271 291
},
272 292
computedLocale() {
273 293
// Returns the resolved locale used by the calendar
274 -
return resolveLocale(concat(this.locale).filter(identity), 'gregory')
294 +
return resolveLocale(concat(this.locale).filter(identity), STR_GREGORY)
275 295
},
276 296
calendarLocale() {
277 297
// This locale enforces the gregorian calendar (for use in formatter functions)
278 298
// Needed because IE 11 resolves `ar-IR` as islamic-civil calendar
279 299
// and IE 11 (and some other browsers) do not support the `calendar` option
280 300
// And we currently only support the gregorian calendar
281 -
const fmt = new Intl.DateTimeFormat(this.computedLocale, { calendar: 'gregory' })
301 +
const fmt = new Intl.DateTimeFormat(this.computedLocale, { calendar: STR_GREGORY })
282 302
const calendar = fmt.resolvedOptions().calendar
283 303
let locale = fmt.resolvedOptions().locale
284 304
/* istanbul ignore if: mainly for IE 11 and a few other browsers, hard to test in JSDOM */
285 -
if (calendar !== 'gregory') {
305 +
if (calendar !== STR_GREGORY) {
286 306
// Ensure the locale requests the gregorian calendar
287 307
// Mainly for IE 11, and currently we can't handle non-gregorian calendars
288 308
// TODO: Should we always return this value?
@@ -384,9 +404,9 @@ export const BCalendar = Vue.extend({
384 404
// Ensure we have year, month, day shown for screen readers/ARIA
385 405
// If users really want to leave one of these out, they can
386 406
// pass `undefined` for the property value
387 -
year: 'numeric',
388 -
month: '2-digit',
389 -
day: '2-digit',
407 +
year: STR_NUMERIC,
408 +
month: STR_2_DIGIT,
409 +
day: STR_2_DIGIT,
390 410
// Merge in user supplied options
391 411
...this.dateFormatOptions,
392 412
// Ensure hours/minutes/seconds are not shown
@@ -395,26 +415,37 @@ export const BCalendar = Vue.extend({
395 415
minute: undefined,
396 416
second: undefined,
397 417
// Ensure calendar is gregorian
398 -
calendar: 'gregory'
418 +
calendar: STR_GREGORY
399 419
})
400 420
},
401 421
formatYearMonth() {
402 422
// Returns a date formatter function
403 423
return createDateFormatter(this.calendarLocale, {
404 -
year: 'numeric',
405 -
month: 'long',
406 -
calendar: 'gregory'
424 +
year: STR_NUMERIC,
425 +
month: STR_LONG,
426 +
calendar: STR_GREGORY
407 427
})
408 428
},
409 429
formatWeekdayName() {
410 -
return createDateFormatter(this.calendarLocale, { weekday: 'long', calendar: 'gregory' })
430 +
// Long weekday name for weekday header aria-label
431 +
return createDateFormatter(this.calendarLocale, {
432 +
weekday: STR_LONG,
433 +
calendar: STR_GREGORY
434 +
})
411 435
},
412 436
formatWeekdayNameShort() {
413 -
// Used as the header cells
414 -
return createDateFormatter(this.calendarLocale, { weekday: 'short', calendar: 'gregory' })
437 +
// Weekday header cell format
438 +
// defaults to 'short' 3 letter days, where possible
439 +
return createDateFormatter(this.calendarLocale, {
440 +
weekday: this.weekdayHeaderFormat || STR_SHORT,
441 +
calendar: STR_GREGORY
442 +
})
415 443
},
416 444
formatDay() {
417 -
return createDateFormatter(this.calendarLocale, { day: 'numeric', calendar: 'gregory' })
445 +
return createDateFormatter(this.calendarLocale, {
446 +
day: STR_NUMERIC,
447 +
calendar: STR_GREGORY
448 +
})
418 449
},
419 450
// Disabled states for the nav buttons
420 451
prevDecadeDisabled() {
@@ -172,6 +172,11 @@
172 172
"prop": "dateFormatOptions",
173 173
"version": "2.6.0",
174 174
"description": "Format object for displayed text string that is passed to `Intl.DateTimeFormat`"
175 +
},
176 +
{
177 +
"prop": "weekdayHeaderFormat",
178 +
"version": "2.12.0",
179 +
"description": "Format to use for the calendar weekday headings. Possible values are `long`, `short` (default), or `narrow`"
175 180
}
176 181
],
177 182
"events": [
@@ -439,6 +439,23 @@ Notes:
439 439
- `year`, `month` and `day` will always be shown. If you need to leave out a value, set the property
440 440
to `undefined`, although this is highly discouraged for accessibility reasons
441 441 442 +
### Weekday name header format
443 + 444 +
<span class="badge badge-info small">2.12.0+</span>
445 + 446 +
The calendar weekday name header format defaults to `'short'`, which is typically a three-character
447 +
abbreviation of the weekday, although some [locales](#internationalization) may override this. The
448 +
format can be controlled via the prop `weekday-header-format` and accepts one of three values:
449 + 450 +
- `'long'` the full weekday name (e.g. <samp>Tuesday</samp>). Handy when using a full width
451 +
calendar. Avoid using with the default calendar width.
452 +
- `'short'` typically is a 2 or 3 letter abbreviation of the weekday name, depending on the selected
453 +
locale (e.g. "Tue").
454 +
- `'narrow'` is typically a single character abbreviation (e.g., <samp>T</samp>). Two weekdays may
455 +
have the same narrow style for some locales (e.g. Tuesday and Thursday's narrow style are both
456 +
<samp>T</samp>). This can be handy for those locales that do not support the `'short'` format,
457 +
such as locales `'ar'` and `'fa'`.
458 + 442 459
### Date navigation button slots
443 460 444 461
<span class="badge badge-info small">2.12.0+</span>
@@ -551,6 +568,7 @@ Saturday.
551 568
labelHelp: 'Mit den Pfeiltasten durch den Kalender navigieren'
552 569
},
553 570
'ar-EG': {
571 +
weekdayHeaderFormat: 'narrow',
554 572
labelPrevDecade: 'العقد السابق',
555 573
labelPrevYear: 'العام السابق',
556 574
labelPrevMonth: 'الشهر السابق',
@@ -566,6 +584,7 @@ Saturday.
566 584
labelHelp: 'استخدم مفاتيح المؤشر للتنقل في التواريخ'
567 585
},
568 586
zh: {
587 +
weekdayHeaderFormat: 'narrow',
569 588
labelPrevDecade: '过去十年',
570 589
labelPrevYear: '上一年',
571 590
labelPrevMonth: '上个月',
@@ -1,12 +1,13 @@
1 1
import Vue from '../../utils/vue'
2 +
import { arrayIncludes } from '../../utils/array'
2 3
import { BVFormBtnLabelControl, dropdownProps } from '../../utils/bv-form-btn-label-control'
3 4
import { getComponentConfig } from '../../utils/config'
4 5
import { createDate, constrainDate, formatYMD, parseYMD } from '../../utils/date'
5 6
import { isUndefinedOrNull } from '../../utils/inspect'
6 7
import { pick } from '../../utils/object'
7 8
import idMixin from '../../mixins/id'
8 9
import { BButton } from '../button/button'
9 -
import { BCalendar } from '../calendar/calendar'
10 +
import { BCalendar, STR_LONG, STR_NARROW, STR_NUMERIC, STR_SHORT } from '../calendar/calendar'
10 11
import { BIconCalendar, BIconCalendarFill } from '../../icons/icons'
11 12 12 13
const NAME = 'BFormDatepicker'
@@ -240,14 +241,26 @@ const propsMixin = {
240 241
},
241 242
dateFormatOptions: {
242 243
// `Intl.DateTimeFormat` object
244 +
// Note: This value is *not* to be placed in the global config
243 245
type: Object,
244 246
default: () => ({
245 -
year: 'numeric',
246 -
month: 'long',
247 -
day: 'numeric',
248 -
weekday: 'long'
247 +
year: STR_NUMERIC,
248 +
month: STR_LONG,
249 +
day: STR_NUMERIC,
250 +
weekday: STR_LONG
249 251
})
250 252
},
253 +
weekdayHeaderFormat: {
254 +
// Format of the weekday names at the top of the calendar
255 +
// Note: This value is *not* to be placed in the global config
256 +
type: String,
257 +
// `short` is typically a 3 letter abbreviation,
258 +
// `narrow` is typically a single letter
259 +
// `long` is the full week day name
260 +
// Although some locales may override this (i.e `ar`, etc)
261 +
default: STR_SHORT,
262 +
validator: value => arrayIncludes([STR_LONG, STR_SHORT, STR_NARROW], value)
263 +
},
251 264
// Dark mode
252 265
dark: {
253 266
type: Boolean,
@@ -328,7 +341,8 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
328 341
labelCalendar: self.labelCalendar,
329 342
labelNav: self.labelNav,
330 343
labelHelp: self.labelHelp,
331 -
dateFormatOptions: self.dateFormatOptions
344 +
dateFormatOptions: self.dateFormatOptions,
345 +
weekdayHeaderFormat: self.weekdayHeaderFormat
332 346
}
333 347
},
334 348
computedLang() {
@@ -268,6 +268,11 @@
268 268
"prop": "dateFormatOptions",
269 269
"version": "2.6.0",
270 270
"description": "Format object for displayed text string that is passed to `Intl.DateTimeFormat`"
271 +
},
272 +
{
273 +
"prop": "weekdayHeaderFormat",
274 +
"version": "2.12.0",
275 +
"description": "Format to use for the calendar weekday headings. Possible values are `long`, `short` (default), or `narrow`"
271 276
}
272 277
],
273 278
"events": [
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4