Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BCalendar and BFormDatepicker should have date format option #4797



Copy link

@saulens22 saulens22 commented Feb 19, 2020

Is your feature request related to a problem? Please describe...

Currently, BCalendar shows formated date variant. It is not possible to customize it

Describe the solution you'd like

It should be possible to change format (or at least use BCalendar's context event formats - YMD, Date or Formated).
Some suggestions:

  • format="YYYY-MM-DD" - you pass format string (not very ECMA)
  • format="YMD" / "Formatted" - same as Context event
  • format="someFunc()" - custom formatter

Describe alternatives you've considered

Previously I used HTML native date inputs, then I switched to tempus-dominus (using moment.js). Both options allows custom formatting. It would be nice to have it in bootstrap-vue, too.

Additional context

  • In some locales (lt-LT, in my case) long date format is not widely used, therefore harder to read
  • Standart ISO YYYY-MM-DD format is shorter and (in some cases) easier to read
Copy link

@tmorehouse tmorehouse commented Feb 19, 2020

One thing to keep in mind, is that the formatted date is also an aria-live region which speaks the value out to non sighted users, so it must be in a human readable format.

However, we might be able to provide an optional formatter-fn prop to show a different value (and sr-only hide the Intl.DateTimeFormat human readable format.

The other option, might be to allow passing of optional options to control Intl.DateTimeFormat (i.e. short, long, etc).

Copy link

@tmorehouse tmorehouse commented Feb 19, 2020

There are options in Intl.DateTimeFormat for controlling the style of each part of the formatted date (we could add a prop that accepts an object with the following properties/values)

weekday The representation of the weekday. Possible values are:

  • "long" (e.g., Thursday)
  • "short" (e.g., Thu)
  • "narrow" (e.g., T). Two weekdays may have the same narrow style for some locales (e.g. Tuesday's narrow style is also T).

year The representation of the year. Possible values are:

  • "numeric" (e.g., 2012)
  • "2-digit" (e.g., 12)

month The representation of the month. Possible values are:

  • "numeric" (e.g., 2)
  • "2-digit" (e.g., 02)
  • "long" (e.g., March)
  • "short" (e.g., Mar)
  • "narrow" (e.g., M). Two months may have the same narrow style for some locales (e.g. May's narrow style is also M).

day The representation of the day. Possible values are:

  • "numeric" (e.g., 1)
  • "2-digit" (e.g., 01)

And the following, which is not supported on all browsers (i.e. Edge, IE 11, Firefox, Safari):

dateStyle The date formatting style to use when calling format(). Possible values include:

  • "full" (i.e. 2020 m. vasario 19 d., trečiadienis)
  • "long" (i.e. 2020 m. vasario 19 d.)
  • "medium" (i.e. 2020-02-19)
  • "short" (i.e. 2020-02-19)

This is basically a shortcut the the above settings.

@tmorehouse tmorehouse added this to Features in Roadmap Feb 19, 2020
jacobmllr95 added a commit that referenced this issue Feb 26, 2020
…ent 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

* Update

* Update calendar.js

* Update

* Update

* Update

* Update

* Update

* Update

* Update

* Update

* Update

* Minor tweaks

* Enhance docs

Co-authored-by: Troy Morehouse <>
Co-authored-by: Jacob Müller <>
@jacobmllr95 jacobmllr95 removed this from Features in Roadmap Mar 12, 2020
@tmorehouse tmorehouse added the Status: Fixed / Implemented label May 10, 2020
Copy link

@clarkestephen clarkestephen commented Sep 3, 2020

@tmorehouse I am using v2.10.0 and dateStyle formatter suddenly stopped working. Kept getting this error (Invalid option : dateStyle)

Copy link

@exikyut exikyut commented Sep 13, 2020

@clarkestephen: This may be due to a browser upgrade. Try in ~Chrome 83.

Ref: tc39/ecma402#347 (comment)

Copy link

@yondkoo yondkoo commented Dec 8, 2020

How do I change MM-DD-YYYY to YYYY-DD-MM?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment