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

firstDayOfWeek in DatePicker doesn't respect i18n #2073

Closed
outofrange opened this issue Aug 30, 2018 · 6 comments · Fixed by #2822
Closed

firstDayOfWeek in DatePicker doesn't respect i18n #2073

outofrange opened this issue Aug 30, 2018 · 6 comments · Fixed by #2822
Assignees
@wilsoncook
Labels
Component: DatePicker 💪 Enhancement

Comments

@outofrange
Copy link

Version

1.4.0

Environment

Windows 10, Chrome

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start-3higab

Steps to reproduce

Open any date picker showing days

What is expected?

Since the locale (i.e. "de") has effect on nearly all elements in a date picker component, I would expect it to handle the start of the week correctly, which should be 'Monday' ('Montag')

What is actually happening?

The week is starting at Sunday

Other?

The problem is in the following line:

ng-zorro-antd/components/date-picker/lib/candy-date/util.ts

Line 7 in 69e1f5f

return locale && [ 'zh-cn', 'zh-tw' ].indexOf(locale.toLowerCase()) > -1 ? 1 : 0;

This should be refactored to handle more locales than 'zh-cn' and 'zh-tw'
@vthinkxie
Copy link
Member

Hi, @outofrange it will be great if you can create a pr for this issue.

@cosmodesantnik
Copy link

Temporary solution:

import { CandyDate } from 'ng-zorro-antd';
CandyDate.prototype.firstDayOfWeek = () => 1;

@wilsoncook
Copy link
Member

Likely reference to https://github.com/date-fns/date-fns/blob/a5420d69a3f1e8f4533d02c09b6ce91cd1db78c6/src/locale/de/index.js#L26 as the default solution for all locales.
Additional, provide a option to support customize "firstDayOfWeek".

@wilsoncook wilsoncook mentioned this issue Nov 7, 2018
Closed
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Jan 24, 2019
@wilsoncook
refactor(module:date-picker, time-picker, calendar):
47bfd58 
  1. get rid of DatePipe and Angular locales
  2. add DateHelperService to support date localization requirements
  3. add NZ_DATE_LOCALE token to let user specify the date localization
  4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)

docs(showcase): update all docs which related to date operations and Angular locales

close NG-ZORRO#2819 NG-ZORRO#2406 NG-ZORRO#2293 NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Jan 24, 2019
@wilsoncook
refactor(module:date-picker, time-picker, calendar):
c0ae064 
  1. get rid of DatePipe and Angular locales
  2. add DateHelperService to support date localization requirements
  3. add NZ_DATE_LOCALE token to let user specify the date localization
  4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)

refactor(schematics): replace angular locales with date-fns locales for project startup

docs(showcase): update all docs which related to date operations and Angular locales

close NG-ZORRO#2819 NG-ZORRO#2406 NG-ZORRO#2293 NG-ZORRO#2073

ddd
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Jan 24, 2019
@wilsoncook
refactor(module:date-picker, time-picker, calendar, i18n):
d2f09a8 
  1. get rid of DatePipe and Angular locales
  2. add DateHelperService to support date localization requirements
  3. add NZ_DATE_LOCALE token to let user specify the date localization
  4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)

refactor(schematics): replace angular locales with date-fns locales for project startup

docs(showcase): update all docs which related to date operations and Angular locales

close NG-ZORRO#2819 NG-ZORRO#2406 NG-ZORRO#2293 NG-ZORRO#2073

ddd
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Jan 24, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
deca69d 
…ule:i18n, schematics): replace angular locales with a better solution

Following changes are made:
1. get rid of DatePipe and Angular locales
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. replace angular locales with date-fns locales for project startup
6. update all docs which related to date operations and Angular locales

BREAKING CHANGE: removing angular locales introduce many changes below.

1. the format of DatePipe is not available, use [Date-fns format](https://date-fns.org/v1.30.1/docs/format#description) instead.
2. the firstDayOfWeek is 1 by default for nz-calendar and nz-date-picker.
3. "registerLocaleData" and "@angular/common/locales/*" are no longer used or imported by default.

close NG-ZORRO#2819 NG-ZORRO#2406 NG-ZORRO#2293 NG-ZORRO#2073
@wilsoncook wilsoncook mentioned this issue Jan 24, 2019
Merged
3 tasks
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Jan 24, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
f907d3e 
…ule:i18n, schematics): replace angular locales with a better solution

Following changes are made:
1. get rid of DatePipe and Angular locales
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. replace angular locales with date-fns locales for project startup
6. update all docs which related to date operations and Angular locales

BREAKING CHANGE: removing angular locales introduce many changes below.

1. the format of DatePipe is not available, use [Date-fns format](https://date-fns.org/v1.30.1/docs/format#description) instead.
2. the firstDayOfWeek is 1 by default for nz-calendar and nz-date-picker.
3. "registerLocaleData" and "@angular/common/locales/*" are no longer used or imported by default.

close NG-ZORRO#2819 NG-ZORRO#2406 NG-ZORRO#2293 NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Jan 24, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
81fc689 
…ule:i18n, schematics): replace angular locales with a better solution

Following changes are made:
1. get rid of DatePipe and Angular locales
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. replace angular locales with date-fns locales for project startup
6. update all docs which related to date operations and Angular locales

BREAKING CHANGE: removing angular locales introduce many changes below.

1. the format of DatePipe is not available, use [Date-fns format](https://date-fns.org/v1.30.1/docs/format#description) instead.
2. the firstDayOfWeek is 1 by default for nz-calendar and nz-date-picker.
3. "registerLocaleData" and "@angular/common/locales/*" are no longer used or imported by default.

close NG-ZORRO#2819 NG-ZORRO#2406 NG-ZORRO#2293 NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Jan 25, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
79aad54 
…ule:i18n, schematics): replace angular locales with a better solution

Following changes are made:
1. get rid of DatePipe and Angular locales
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. replace angular locales with date-fns locales for project startup
6. update all docs which related to date operations and Angular locales

BREAKING CHANGE: removing angular locales introduce many changes below.

1. the format of DatePipe is not available, use [Date-fns format](https://date-fns.org/v1.30.1/docs/format#description) instead.
2. the firstDayOfWeek is 1 by default for nz-calendar and nz-date-picker.
3. "registerLocaleData" and "@angular/common/locales/*" are no longer used or imported by default.

close NG-ZORRO#2819 NG-ZORRO#2406 NG-ZORRO#2293 NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Jan 30, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
39e13ad 
…ule:i18n, schematics): replace angular locales with a better solution

Following changes are made:
1. get rid of DatePipe and Angular locales
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. replace angular locales with date-fns locales for project startup
6. update all docs which related to date operations and Angular locales

BREAKING CHANGE: removing angular locales introduce many changes below.

1. the format of DatePipe is not available, use [Date-fns format](https://date-fns.org/v1.30.1/docs/format#description) instead.
2. the firstDayOfWeek is 1 by default for nz-calendar and nz-date-picker.
3. "registerLocaleData" and "@angular/common/locales/*" are no longer used or imported by default.

close NG-ZORRO#2819 NG-ZORRO#2406 NG-ZORRO#2293 NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 11, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
a70d3a4 
…ule:i18n, schematics): replace angular locales with a better solution

Following changes are made:
1. get rid of DatePipe and Angular locales
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. replace angular locales with date-fns locales for project startup
6. update all docs which related to date operations and Angular locales

BREAKING CHANGE: removing angular locales introduce many changes below.

1. the format of DatePipe is not available, use [Date-fns format](https://date-fns.org/v1.30.1/docs/format#description) instead.
2. the firstDayOfWeek is 1 by default for nz-calendar and nz-date-picker.
3. "registerLocaleData" and "@angular/common/locales/*" are no longer used or imported by default.

close NG-ZORRO#2819 NG-ZORRO#2406 NG-ZORRO#2293 NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 15, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
76d567d 
…ule:i18n): support a new solution for date formatting

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 15, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
9cc5d2b 
…ule:i18n): support a new solution for date formatting

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 18, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
3edb2cc 
…ule:i18n): support a new solution for date formatting

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 18, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
247cf57 
…ule:i18n): support a new solution for date formatting

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 18, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
809ba5f 
…ule:i18n): support a new solution for date formatting

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 18, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
a99ac2f 
…ule:i18n): support a new solution for date formatting

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 20, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
9443997 
…ule:i18n): support a new solution for date formatting

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 20, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
a168c6d 
…ule:i18n): support a new solution for date formatting

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
wilsoncook added a commit to wilsoncook/ng-zorro-antd that referenced this issue Feb 20, 2019
@wilsoncook
refactor(module:date-picker, module:time-picker, module:calendar, mod…
e1bce41 
…ule:i18n): support a new solution for date formatting

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
vthinkxie pushed a commit that referenced this issue Feb 21, 2019
@wilsoncook @vthinkxie
refactor(module:date-picker, module:time-picker, module:calendar, mod…
9fd7752 
…ule:i18n): support a new solution for date formatting (#2822)

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close #2819, close #2406, close #2293, close #2073
@Zacknero
Copy link

Hi i don't understand how set {
/** Specify which day is the beginning of the week (null for default, 0 for Sunday, 1 for Monday, and so on) */
firstDayOfWeek: null
}

To be set on app module?? or into component?? Thanks!!

@nclandrei
Copy link

@Zacknero - inside app.module.ts, you add the following:

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [
    ...,
    {
      provide: NZ_DATE_CONFIG,
      useValue: {
        firstDayOfWeek: 1, // week starts on Monday (Sunday is 0)
      },
    },
  ],
  ...
})

Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this issue Apr 9, 2020
@wilsoncook @Ricbet
refactor(module:date-picker, module:time-picker, module:calendar, mod…
01f7eec 
…ule:i18n): support a new solution for date formatting (NG-ZORRO#2822)

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
@RoroTitiFR
Copy link

Thanks so much @nclandrei !! This should be documented in Ng-Zorro docs

hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this issue Aug 5, 2020
@wilsoncook @vthinkxie
refactor(module:date-picker, module:time-picker, module:calendar, mod…
7acb95e 
…ule:i18n): support a new solution for date formatting (NG-ZORRO#2822)

Following changes are made:
1. both support date-fns and DatePipe for date formatting
2. add DateHelperService to support date localization requirements
3. add NZ_DATE_LOCALE token to let user specify the date localization
4. add NZ_DATE_CONFIG token to customize date props(such as firstDayOfWeek)
5. update all docs which related to date operations and Angular locales

close NG-ZORRO#2819, close NG-ZORRO#2406, close NG-ZORRO#2293, close NG-ZORRO#2073
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wilsoncook wilsoncook

Labels
Component: DatePicker 💪 Enhancement
Projects
None yet
Milestone
No milestone
7 participants
@vthinkxie @wilsoncook @outofrange @cosmodesantnik @nclandrei @Zacknero @RoroTitiFR