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.

Sign up for GitHub

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

Jump to bottom

BCalendar and BFormDatepicker should have date format option #4797

Closed
saulens22 opened this issue Feb 19, 2020 · 5 comments · Fixed by #4835, tghelere/CL#18, mariazevedo88/hash-generator-js#39, mariazevedo88/hash-generator-js#40 or tghelere/CL#20
Closed

BCalendar and BFormDatepicker should have date format option #4797

saulens22 opened this issue Feb 19, 2020 · 5 comments · Fixed by #4835, tghelere/CL#18, mariazevedo88/hash-generator-js#39, mariazevedo88/hash-generator-js#40 or tghelere/CL#20
Labels
Status: Fixed / Implemented Issue fixed by a new release Type: Feature request

Comments

@saulens22
Copy link

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
@tmorehouse
Copy link
Member

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).

@tmorehouse
Copy link
Member

tmorehouse commented Feb 19, 2020 •
edited
Loading

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.

@naletups naletups mentioned this issue Feb 26, 2020
Merged
20 tasks
jacobmllr95 added a commit that referenced this issue Feb 26, 2020
@naletups @tmorehouse @jacobmllr95
feat(b-calendar, b-form-datepicker): allow customization of in-compon…
85c7e75 
…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 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>
@tmorehouse tmorehouse mentioned this issue Feb 26, 2020
Merged
@shimikano shimikano mentioned this issue Mar 8, 2020
Open
This was referenced Mar 27, 2020
Merged
Merged
Merged
Merged
@snyk-bot snyk-bot mentioned this issue Apr 7, 2020
Open
This was referenced Apr 15, 2020
Open
Open
@snyk-bot snyk-bot mentioned this issue Apr 30, 2020
Open
@tmorehouse tmorehouse added the Status: Fixed / Implemented Issue fixed by a new release label May 10, 2020
@clarkestephen
Copy link

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

@exikyut
Copy link

exikyut commented Sep 13, 2020

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

Ref: tc39/ecma402#347 (comment)

@yondkoo
Copy link

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
Assignees
No one assigned
Labels
Status: Fixed / Implemented Issue fixed by a new release Type: Feature request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(b-calendar, b-form-datepicker): allow customization of in-component displayed date format (closes #4797) naletups/bootstrap-vue
[Snyk] Upgrade bootstrap-vue from 2.5.0 to 2.6.0 tghelere/CL
[Snyk] Upgrade bootstrap-vue from 2.5.0 to 2.6.0 mariazevedo88/hash-generator-js
[Snyk] Upgrade bootstrap-vue from 2.6.0 to 2.6.1 mariazevedo88/hash-generator-js
[Snyk] Upgrade bootstrap-vue from 2.6.0 to 2.6.1 tghelere/CL
[Snyk] Upgrade bootstrap-vue from 2.3.0 to 2.7.0 JuroOravec/powerjinja
[Snyk] Upgrade bootstrap-vue from 2.0.0-rc.24 to 2.8.0 mc-ireiser/coreui-free-vue-admin-template
[Snyk] Upgrade bootstrap-vue from 2.0.0-rc.27 to 2.8.0 mc-ireiser/termodaq_app
[Snyk] Upgrade bootstrap-vue from 2.0.0-rc.15 to 2.13.0 leonyork/cognito-oauth2-demo
5 participants
@tmorehouse @saulens22 @clarkestephen @exikyut @yondkoo