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

Bootstrap Calendar zh. Option to remove extra words #5171

Closed
Dean-Christian-Armada opened this issue Apr 17, 2020 · 20 comments · Fixed by #5175 or #5179 · May be fixed by leonyork/cognito-oauth2-demo#1
Closed

Bootstrap Calendar zh. Option to remove extra words #5171

Dean-Christian-Armada opened this issue Apr 17, 2020 · 20 comments · Fixed by #5175 or #5179 · May be fixed by leonyork/cognito-oauth2-demo#1
Labels
Status: Fixed / Implemented

Comments

@Dean-Christian-Armada
Copy link

Dean-Christian-Armada commented Apr 17, 2020

周日
周一
周二
周三
周四
周五
周六

  • Above is the current words for the day names like Monday, Tuesday and so on but can also be written shorter like below







Then the days are written as 1日, 2日, 3日 and so on but can be written as simply as 1, 2, 3.

These can also be important at some point save and texts and spaces

@tmorehouse
Copy link
Member

tmorehouse commented Apr 17, 2020

We use Intl.dateTimeFormat to generate the translations for the weekday names and for the dates (i.e. 1, 2, 3, 4). The Intl implementation can vary slightly from browser to browser. We do not use a translation table/object.

@Dean-Christian-Armada
Copy link
Author

Dean-Christian-Armada commented Apr 17, 2020

I hope we can have options to also use narrows on days. I can see in the code that there are many static values for Intl.DateTimeFormat

@Dean-Christian-Armada
Copy link
Author

Dean-Christian-Armada commented Apr 17, 2020

We use Intl.dateTimeFormat to generate the translations for the weekday names and for the dates (i.e. 1, 2, 3, 4). The Intl implementation can vary slightly from browser to browser. We do not use a translation table/object.

I think one possible solution here is to have a props of another locale for a certain part of the calendar

tmorehouse added a commit that referenced this issue Apr 17, 2020
@tmorehouse
Copy link
Member

tmorehouse commented Apr 17, 2020

For the calendar weekday headers we will be adding the prop weekday-header-format which will accept one of three values: 'long', 'short' (current default), and 'narrow'.

For the date numbers (eg. 1, 2, 3, etc), there are only two options for Intl, of which we use numeric (the other is 2-digit). So there wont be a way to change 1日 to just 1 unfortunately.

@Dean-Christian-Armada
Copy link
Author

Dean-Christian-Armada commented Apr 18, 2020

Can we add like a prop to be used as the locale for like the days only?

When I first checked through the code I thought there was a prop for calendarLocale since the context shows that there is a separated data for locale and calendarLocale. But upon checking carefully it is a computed property. I thought can be used to change the days format

I believe this issue of mine can be solved with my suggestion above

@tmorehouse
Copy link
Member

tmorehouse commented Apr 18, 2020

Intl.dateTimeFormat when formatting the date (day value only) for zh, only has two options: numeric and 2-digit. The numeric option formats as 1日 and 2-digit option formats as 01日

@tmorehouse
Copy link
Member

tmorehouse commented Apr 18, 2020

calendarLocale is used to enforce the gergorian calendar for IE, otherwise it is identical to computedLocale. Both values may differ from the prop locale, as we first resolve the requested locale(s) to see if they are supported, or it falls back to the browser default locale.

@Dean-Christian-Armada
Copy link
Author

Dean-Christian-Armada commented Apr 18, 2020

I meant in calendar.js.. Instead of plainly this.calendarLocale which only points in locale prop.. There will be a new prop like calendarDayLocale then we can put en there

formatDay: function formatDay() {
      return createDateFormatter(this.calendarLocale, {
        day: 'numeric',
        calendar: 'gregory'
      });
    },

E.g. of my suggestion

<b-calendar
        v-model="calendarDate"
        locale="zh"
        calendarDayLocale="en"
        hideHeader
        id="zone-calendar"
        @context="onContext"
        :date-info-fn="calendarClass"
        block
      >

@tmorehouse
Copy link
Member

tmorehouse commented Apr 18, 2020

The only other option, is that we could use Intl.NumberFormat to format the day number instead of `Intl.DateTimeFormat", which is probably a better solution that introducing a new prop that requires the locale to be re-resolved

@Dean-Christian-Armada
Copy link
Author

Dean-Christian-Armada commented Apr 18, 2020

The only other option, is that we could use Intl.NumberFormat to format the day number instead of `Intl.DateTimeFormat", which is probably a better solution that introducing a new prop

Oh ok possible. So maybe in the next version this approach will be released?

Can you give a brief example? I think I get the idea but not completely

@tmorehouse
Copy link
Member

tmorehouse commented Apr 18, 2020

Intl.DateTimeFormat formatter expects a date object to be formatted (and the format will relate to date presentation), where as Intl.NumberFormat is just for formatting numbers in a locale (and appropriate script... i.e. ar-EG uses Arabic numerals instead of regular en numerals, correct thousands separator, decimal symbol, etc)

We would have to get the date number from the date object and then pass to the number formatter... instead of just directly passing the date value to DateTime formatter.

@Dean-Christian-Armada
Copy link
Author

Dean-Christian-Armada commented Apr 18, 2020

Ok, I understand now. So I can like pass zh-EN in locale correct?

@tmorehouse
Copy link
Member

tmorehouse commented Apr 18, 2020

No....

You would still pass in a standard locale (the value after the - is a country/region code, not a language code), i.e. zh.

Internally we would create the number formatter to use the resolved computedLocale, but since number formatter doesn't have a "date" association, it wont stick after the number.

@Dean-Christian-Armada
Copy link
Author

Dean-Christian-Armada commented Apr 18, 2020

Hmm, I think I will just wait for the actual release of that feature and see the actual procedure. Thanks tmorehouse

@tmorehouse
Copy link
Member

tmorehouse commented Apr 18, 2020

There wont be anything special you will need to do... except set the weekday-header-format prop to 'narrow' to adjust the weekday headings to get just a single weekday name symbol

@tmorehouse
Copy link
Member

tmorehouse commented Apr 18, 2020

@Dean-Christian-Armada
Copy link
Author

Dean-Christian-Armada commented Apr 18, 2020

Oh this document.. How can I use this?? I am currently using npm.. Sorry but I am kinda new in frontend

@tmorehouse
Copy link
Member

tmorehouse commented Apr 18, 2020

This isn't released yet. It will be available in v2.12.0 (which will be available on NPM)

@Dean-Christian-Armada
Copy link
Author

Dean-Christian-Armada commented Apr 18, 2020

This isn't released yet. It will be available in v2.12.0 (which will be available on NPM)

Ok, I will just wait for the release but it is very good to know that my issue can be done on the next release. I am really thankful for your assistance

@tmorehouse
Copy link
Member

tmorehouse commented Apr 18, 2020

We are hoping to have v2.12.0 released on Sunday.

jacobmllr95 added a commit that referenced this issue Apr 18, 2020
… the date buttons (closes #5171) (#5179)

* fix(b-calendar): use Intl.NumberFormat for formatting the date buttons (closes #5171)

* Update calendar.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
@tmorehouse tmorehouse added the Status: Fixed / Implemented label May 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment