🌐 AI搜索 & 代理 主页
Skip to content

Commit 85c7e75

Browse files
naletupstmorehousejacobmllr95
authored
feat(b-calendar, b-form-datepicker): allow customization of in-component displayed date format (closes #4797) (#4835)
* feat(b-calendar): made date format to be configurable * Added new prop `formatLong` that defaults to current layout * Allows for better control on display (e.g. in combination with layouts defined in other components like vue-i18n) * feat(b-form-datepicker): Added format option for display of formatted date string * docs(b-calendar): Updated prop list * docs(b-form-datepicker): Updated prop list * Fixed prop default value * fix(b-form-datepicker): prop default value * docs(b-calendar): change prop name and referenced default format * docs(b-form-datepicker): change prop name and referenced default format * fix(b-calendar): rename prop and enforce gregorian calendar * fix(b-form-datepicker): rename prop in component and in forwarding to b-calendar * chore(b-calendar): file formating * docs(b-calendar): add styling subsection on new prop * Fixed referenced filename * docs(b-form-datepicker): add styling subsection on new prop * Removed fixed calendar type from prop dateFormatOptions * Removed fixed calendar type from prop dateFormatOptions * Update package.json * Update package.json * Update README.md * Update README.md * Update calendar.js * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Minor tweaks * Enhance docs Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca> Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
1 parent 14f7ea1 commit 85c7e75

File tree

6 files changed

+138
-7
lines changed

6 files changed

+138
-7
lines changed

‎src/components/calendar/README.md‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -230,12 +230,56 @@ fit the width of the parent element. The `width` prop has no effect when `block`
230230
Note it is _not recommended_ to set a width below `260px`, otherwise truncation and layout issues
231231
with the component may occur.
232232

233+
### Date string format
234+
235+
<span class="badge badge-info small">v2.6.0+</span>
236+
237+
To change format options of the displayed date text inside the component, e.g. in the header, set
238+
the `dateFormatOptions` prop to an object containing the requested format properties for the
239+
`Intl.DateTimeFormat` object (see also [Internationalization](#internationalization)).
240+
241+
```html
242+
<template>
243+
<div>
244+
<p>Custom date format:</p>
245+
<b-calendar
246+
:dateFormatOptions="{ year: 'numeric', month: 'short', day: '2-digit', weekday: 'short' }"
247+
locale="en"
248+
></b-calendar>
249+
<p class="mt-3">Short date format:</p>
250+
<b-calendar
251+
:dateFormatOptions="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
252+
locale="en"
253+
></b-calendar>
254+
</div>
255+
</template>
256+
257+
<!-- b-calendar-dateformat.vue -->
258+
```
259+
260+
The following table summarizes the valid options for each format property:
261+
262+
| Property | Possible values |
263+
| --------- | ------------------------------------------------------------ |
264+
| `year` | `'numeric'`, or `'2-digit'` |
265+
| `month` | `'numeric'`, `'2-digit'`, `'long'`, `'short'`, or `'narrow'` |
266+
| `day` | `'numeric'`, or `'2-digit'` |
267+
| `weekday` | `'long'`, `'short'`, or `'narrow'` |
268+
269+
Notes:
270+
271+
- Leaving out certain options may affect the formatted text string, e.g. the `weekday`
272+
- The formatted value will vary according to the resolved locale. Some locales may not support the
273+
`'narrow'` format and will fall back to `'short'` or `long'` (if `'short'` is not available)
274+
- `year`, `month` and `day` will always be shown. If you need to leave out a value, set the property
275+
to `undefined`, although this is highly discouraged for accessibility reasons
276+
233277
### Hiding the top selected date header
234278

235279
By default, the current selected date will be displayed at the top of the calendar component,
236280
formatted in the locale's language.
237281

238-
You can hide this header via the `hide-header` prop. Note this only visually hides the selected
282+
You can hide this header via the `hide-header` prop. Note this only _visually hides_ the selected
239283
date, while keeping it available to screen reader users as an `aria-live` region.
240284

241285
### Border and padding
@@ -400,7 +444,7 @@ properties:
400444
| `selectedFormatted` | The selected date formatted in the current locale. If no date is selected, this will be the value of the `label-no-date-selected` prop |
401445
| `activeYMD` | The current date of the calendar day button that can receive focus as a string (`YYYY-MM-DD` format) |
402446
| `activeDate` | The current date of the calendar day button that can receive focus as a `Date` object |
403-
| `activeFormated` | The active date formatted in the current locale |
447+
| `activeFormatted` | The active date formatted in the current locale |
404448
| `disabled` | Will be `true` if active date is disabled, `false` otherwise |
405449
| `locale` | The resolved locale (may not be the same as the requested locale) |
406450
| `calendarLocale` | The resolved locale used by the calendar, optionally including the calendar type (i.e. 'gregory'). Usually this will be the same as `locale`, but may include the calendar type used, such as `fa-u-ca-gregory` when selecting the Persian locale (`'fa'`) |

‎src/components/calendar/calendar.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,16 @@ export const BCalendar = Vue.extend({
224224
labelHelp: {
225225
type: String,
226226
default: () => getComponentConfig(NAME, 'labelHelp')
227+
},
228+
dateFormatOptions: {
229+
// `Intl.DateTimeFormat` object
230+
type: Object,
231+
default: () => ({
232+
year: 'numeric',
233+
month: 'long',
234+
day: 'numeric',
235+
weekday: 'long'
236+
})
227237
}
228238
},
229239
data() {
@@ -372,10 +382,19 @@ export const BCalendar = Vue.extend({
372382
formatDateString() {
373383
// Returns a date formatter function
374384
return createDateFormatter(this.calendarLocale, {
385+
// Ensure we have year, month, day shown for screen readers/ARIA
386+
// If users really want to leave one of these out, they can
387+
// pass `undefined` for the property value
375388
year: 'numeric',
376-
month: 'long',
377-
day: 'numeric',
378-
weekday: 'long',
389+
month: '2-digit',
390+
day: '2-digit',
391+
// Merge in user supplied options
392+
...this.dateFormatOptions,
393+
// Ensure hours/minutes/seconds are not shown
394+
hour: undefined,
395+
minute: undefined,
396+
second: undefined,
397+
// Ensure calendar is gregorian
379398
calendar: 'gregory'
380399
})
381400
},

‎src/components/calendar/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,11 @@
135135
{
136136
"prop": "labelHelp",
137137
"description": "Help text that appears at the bottom of the calendar grid"
138+
},
139+
{
140+
"prop": "dateFormatOptions",
141+
"version": "2.6.0",
142+
"description": "Format object for displayed text string that is passed to `Intl.DateTimeFormat`"
138143
}
139144
],
140145
"events": [

‎src/components/form-datepicker/README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,53 @@ and usage of these props.
301301
Want a fancy popup with a dark background instead of a light background? Set the `dark` prop to
302302
`true` to enable the dark background.
303303

304+
### Date string format
305+
306+
<span class="badge badge-info small">v2.6.0+</span>
307+
308+
To change format options of the displayed date text inside the component, e.g. in the header or
309+
placeholder, set the `date-format-options` prop to an object containing the requested format
310+
properties for the `Intl.DateTimeFormat` object (see also
311+
[Internationalization](#internationalization)).
312+
313+
```html
314+
<template>
315+
<div>
316+
<label for="datepicker-dateformat1">Custom date format</label>
317+
<b-form-datepicker
318+
id="datepicker-dateformat1"
319+
:dateFormatOptions="{ year: 'numeric', month: 'short', day: '2-digit', weekday: 'short' }"
320+
locale="en"
321+
></b-form-datepicker>
322+
<label for="datepicker-dateformat2">Short date format</label>
323+
<b-form-datepicker
324+
id="datepicker-dateformat2"
325+
:dateFormatOptions="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
326+
locale="en"
327+
></b-form-datepicker>
328+
</div>
329+
</template>
330+
331+
<!-- b-form-datepicker-dateformat.vue -->
332+
```
333+
334+
The following table summarizes the valid options for each format property:
335+
336+
| Property | Possible values |
337+
| --------- | ------------------------------------------------------------ |
338+
| `year` | `'numeric'`, or `'2-digit'` |
339+
| `month` | `'numeric'`, `'2-digit'`, `'long'`, `'short'`, or `'narrow'` |
340+
| `day` | `'numeric'`, or `'2-digit'` |
341+
| `weekday` | `'long'`, `'short'`, or `'narrow'` |
342+
343+
Notes:
344+
345+
- Leaving out certain options may affect the formatted text string, e.g. the `weekday`
346+
- The formatted value will vary according to the resolved locale. Some locales may not support the
347+
`'narrow'` format and will fall back to `'short'` or `long'` (if `'short'` is not available)
348+
- `year`, `month` and `day` will always be shown. If you need to leave out a value, set the property
349+
to `undefined`, although this is highly discouraged for accessibility reasons
350+
304351
## Internationalization
305352

306353
Internationalization of the date picker's calendar is provided via

‎src/components/form-datepicker/form-datepicker.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,16 @@ const propsMixin = {
208208
dark: {
209209
type: Boolean,
210210
default: false
211+
},
212+
dateFormatOptions: {
213+
// `Intl.DateTimeFormat` object
214+
type: Object,
215+
default: () => ({
216+
year: 'numeric',
217+
month: 'long',
218+
day: 'numeric',
219+
weekday: 'long'
220+
})
211221
}
212222
}
213223
}
@@ -248,7 +258,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
248258
return this.activeYMD.slice(0, -3)
249259
},
250260
calendarProps() {
251-
// We alis `this` to `self` for better minification
261+
// We alias `this` to `self` for better minification
252262
const self = this
253263
// TODO: Make the ID's computed props
254264
const idLabel = self.safeId('_value_')
@@ -280,7 +290,8 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
280290
labelNoDateSelected: self.labelNoDateSelected,
281291
labelCalendar: self.labelCalendar,
282292
labelNav: self.labelNav,
283-
labelHelp: self.labelHelp
293+
labelHelp: self.labelHelp,
294+
dateFormatOptions: self.dateFormatOptions
284295
}
285296
},
286297
computedResetValue() {

‎src/components/form-datepicker/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,11 @@
208208
{
209209
"prop": "labelCloseButton",
210210
"description": "Content for the optional `Close` button"
211+
},
212+
{
213+
"prop": "dateFormatOptions",
214+
"version": "2.6.0",
215+
"description": "Format object for displayed text string that is passed to `Intl.DateTimeFormat`"
211216
}
212217
],
213218
"events": [

0 commit comments

Comments
 (0)