Quasar: [v1] QDate - Chinese display of dates

[QQ34205037]

Sorry, I can't provide a reproduction，because this JS（https://cdn.jsdelivr.net/npm/[email protected]/lang/zh-hans.js） always reports errors：‘Uncaught SyntaxError: Unexpected token export’.
But maybe one picture is enough, I hope you can understand what I said in my poor English.

It is not easy for Chinese to understand the meaning of this date（四, 三 4）, It just means 'four,three four'.
In Chinese, ‘一, 二, 三, 四, 五‘ is just the meaning of one, two, three, four, five.
For example, ’三‘ means only three, not Wednesday or March.
’星期三‘ or ’周三‘ must be used if it is Wednesday.
If it is March, you must use ’三月‘.
So this date must be expressed as follows: ’星期四,三月四日‘ or '星期四,3月4日'

[rstoenescu]

Hi,

This comes from Quasar language packs. So relying on the community (which PRed zh-hans and zh-hant). Can you PR https://github.com/quasarframework/quasar/blob/dev/quasar/lang/zh-hans.js and this https://github.com/quasarframework/quasar/blob/dev/quasar/lang/zh-hant.js with the correct translation pls? I don't know Chinese.

[QQ34205037]

@rstoenescu
hi, Quasar language packs doesn't fix it perfectly, as follows:

Modify the Chinese language package code(lang/zh-hans.js)

date: {
    days: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
    // daysShort: '日_一_二_三_四_五_六'.split('_'),
    daysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
    // monthsShort: '一_二_三_四_五_六_七_八_九_十_十一_十二'.split('_'),
    monthsShort: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
    firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
    format24h: false
  }

This is the best result of modifying lang packages.

"周六, 十一月" is good, but "十一月 3" is not good.There are two problems:
1.there should be a suffix - ’日’，like this: '十一月3日', instead of '十一月 3'
2.Here, Chinese and Arabic numbers should not appear at the same time, It should be ’十一月三日' or '11月3日'

At present, I have only two ways to solve this problem, but neither seems to be very good. Maybe you have a better way.

quasar/src/components/datetime/QDate.js

if (this.$q.lang.isoName === 'zh-hans')...

headerTitle () {
      const model = this.extModel
      if (model.value === null) { return ' --- ' }

      const date = new Date(model.year, model.month - 1, model.day)
      if (isNaN(date.valueOf())) { return ' --- ' }
      // :(
      if (this.$q.lang.isoName === 'zh-hans') {
        return this.$q.lang.date.daysShort[ date.getDay() ] + ', ' +
        model.month + '月 ' +
        model.day + '日'
      }
      return this.$q.lang.date.daysShort[ date.getDay() ] + ', ' +
        this.$q.lang.date.monthsShort[ model.month - 1 ] + ' ' +
        model.day
    }
````
The result is good - 周六, 11月 3日

### add an option(intlDateFormat) to use another formatter

headerTitle () {
const model = this.extModel
if (model.value === null) { return ' --- ' }

  // const date = new Date(model.year, model.month - 1, model.day)
  const date = new Date(Date.UTC(model.year, model.month - 1, model.day, 0, 0, 0))
  if (isNaN(date.valueOf())) { return ' --- ' }

  if (this.intlDateFormat === true) {
    return new Intl.DateTimeFormat(this.$q.lang.isoName, {
      weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC'
    }).format(date)
  }
  return this.$q.lang.date.daysShort[ date.getDay() ] + ', ' +
    this.$q.lang.date.monthsShort[ model.month - 1 ] + ' ' +
    model.day
}

```
The result is good - 11月 3日周六

[rstoenescu]

Thank you for the detailed explanations. Fix will be available in beta.3.
Any chance to get zh-hant reviewed as well?

[QQ34205037]

@rstoenescu

zh-hant.js

days: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
    daysShort: '週日_週一_週二_週三_週四_週五_週六'.split('_'),
    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
      '_'
    ),
    monthsShort: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
      '_'
    )

QDate.js

if (
        this.$q.lang.isoName === 'zh-hans' ||
        this.$q.lang.isoName === 'zh-hant'
      ) {
        return (
          this.$q.lang.date.daysShort[date.getDay()] +
          ', ' +
          model.month +
          '月 ' +
          model.day +
          '日'
        )
      }

[rstoenescu]

@QQ34205037 thanks so much!

[QQ34205037]

@rstoenescu you're welcome.I think it's probably just a temporary quick fix and perhaps providing a header-formatter is also an option（If you don't want to use Intl. DateTimeFormat).
I like many Quasar design details, but the date picker is not very good, please keep up the good work,I hope it gets better and better.

[rstoenescu]

@QQ34205037 I was under the impression that both options are good. Wasn't aware that one option was better than the other... Ok, will see how to best apply second option then.

[rstoenescu]

Using the second option now. Thanks for helping make this better!

[QQ34205037]

:) Because if you have a lot of languages that need to do this, it might be a little bad. This is just a suggestion of mine, I believe you can make the best decision.
By the way, my English is so poor that I may not be able to say exactly what I want to say. A big sorry.

[rstoenescu]

I actually don't see any other languages needing this, so it's ok as is -- and the computed property runs faster this way.

No worries on your English. It's really ok. We got this done at the end and it's all that matters!