From 1ed2180f0ed116e2a209033a4a5f55629f3647d4 Mon Sep 17 00:00:00 2001 From: Rodrigo Souza Date: Tue, 13 Oct 2020 17:27:07 -0300 Subject: [PATCH 1/4] Adding a new prop for month translations --- src/month-picker.component.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/month-picker.component.tsx b/src/month-picker.component.tsx index a90b6cd..7afad37 100644 --- a/src/month-picker.component.tsx +++ b/src/month-picker.component.tsx @@ -16,6 +16,7 @@ interface IProps { name?: string; classes?: string; optionClasses?: string; + localizedMonths: Object; } interface IState { @@ -25,10 +26,11 @@ interface IState { export class MonthPicker extends React.Component { renderMonthOptions = () => { - const { endYearGiven, year, numeric, caps, short, optionClasses, defaultValue } = this.props; + const { endYearGiven, year, numeric, caps, short, optionClasses, defaultValue, localizedMonths } = this.props; const today = new Date(); let months = []; let month = 11; + let localizedMonthOptions = (Object.entries(localizedMonths).length === 0) ? monthByNumber : localizedMonths; if (!endYearGiven) { if (year && parseInt(year.toString()) === today.getFullYear()) { month = today.getMonth(); @@ -40,7 +42,7 @@ export class MonthPicker extends React.Component { } } else { for (let i = 0; i <= month; ++i) { - months.push(monthByNumber[i]); + months.push(localizedMonthOptions[i]); } if (caps) { months = months.map((month) => { return month.toUpperCase(); }); From 8cfcb500a3d865850353f27f4a5af3381ba7a96a Mon Sep 17 00:00:00 2001 From: Rodrigo Souza Date: Wed, 14 Oct 2020 18:50:18 -0300 Subject: [PATCH 2/4] Allowing localized months options for the main component --- src/date-dropdown.component.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/date-dropdown.component.tsx b/src/date-dropdown.component.tsx index 04a2f18..9891b6e 100644 --- a/src/date-dropdown.component.tsx +++ b/src/date-dropdown.component.tsx @@ -16,6 +16,7 @@ interface IProps { onDayChange?: Function; onYearChange?: Function; onDateChange?: Function; + localizedMonths: Object; ids?: { year?: string; month?: string; @@ -143,28 +144,30 @@ export class DropdownDate extends React.Component { } generateMonthOptions() { - const { classes, options, defaultValues } = this.props; + const { classes, options, defaultValues, localizedMonths } = this.props; const { startMonth, endMonth, startYear, endYear, selectedYear } = this.state; + let localizedMonthOptions = (Object.entries(localizedMonths).length === 0) ? monthByNumber : localizedMonths; + let months = []; if (selectedYear === startYear) { for (let i = startMonth; i <= 11; i++) { months.push({ value: i, - month: monthByNumber[i] + month: localizedMonthOptions[i] }); } } else if (selectedYear === endYear) { for (let i = 0; i <= endMonth; i++) { months.push({ value: i, - month: monthByNumber[i] + month: localizedMonthOptions[i] }); } } else { for (let i = 0; i <= 11; i++) { months.push({ value: i, - month: monthByNumber[i] + month: localizedMonthOptions[i] }); } } From dc128667d621149aa3fa2e299e93c7d7395c019f Mon Sep 17 00:00:00 2001 From: Rodrigo Souza Date: Wed, 14 Oct 2020 19:50:06 -0300 Subject: [PATCH 3/4] Turn localized months optional --- src/date-dropdown.component.tsx | 4 ++-- src/month-picker.component.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/date-dropdown.component.tsx b/src/date-dropdown.component.tsx index 9891b6e..84eae93 100644 --- a/src/date-dropdown.component.tsx +++ b/src/date-dropdown.component.tsx @@ -16,7 +16,7 @@ interface IProps { onDayChange?: Function; onYearChange?: Function; onDateChange?: Function; - localizedMonths: Object; + localizedMonths?: Object; ids?: { year?: string; month?: string; @@ -146,7 +146,7 @@ export class DropdownDate extends React.Component { generateMonthOptions() { const { classes, options, defaultValues, localizedMonths } = this.props; const { startMonth, endMonth, startYear, endYear, selectedYear } = this.state; - let localizedMonthOptions = (Object.entries(localizedMonths).length === 0) ? monthByNumber : localizedMonths; + let localizedMonthOptions = (localizedMonths && Object.entries(localizedMonths).length > 0) ? localizedMonths : monthByNumber; let months = []; if (selectedYear === startYear) { diff --git a/src/month-picker.component.tsx b/src/month-picker.component.tsx index 7afad37..f94e2d9 100644 --- a/src/month-picker.component.tsx +++ b/src/month-picker.component.tsx @@ -16,7 +16,7 @@ interface IProps { name?: string; classes?: string; optionClasses?: string; - localizedMonths: Object; + localizedMonths?: Object; } interface IState { @@ -30,7 +30,7 @@ export class MonthPicker extends React.Component { const today = new Date(); let months = []; let month = 11; - let localizedMonthOptions = (Object.entries(localizedMonths).length === 0) ? monthByNumber : localizedMonths; + let localizedMonthOptions = (localizedMonths && Object.entries(localizedMonths).length > 0) ? localizedMonths : monthByNumber; if (!endYearGiven) { if (year && parseInt(year.toString()) === today.getFullYear()) { month = today.getMonth(); From a4791ae3be8c978f9a6ab0bae4980bd7d4bdd3d2 Mon Sep 17 00:00:00 2001 From: Rodrigo Souza Date: Wed, 14 Oct 2020 19:58:33 -0300 Subject: [PATCH 4/4] Add docs --- README.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/README.md b/README.md index 499b5e5..002303b 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,20 @@ class App extends Component { console.log(date); this.setState({ date: date, selectedDate: formatDate(date) }); }} + localizedMonths={ // default is the english options + 0: 'January', + 1: 'February', + 2: 'March', + 3: 'April', + 4: 'May', + 5: 'June', + 6: 'July', + 7: 'August', + 8: 'September', + 9: 'October', + 10: 'November', + 11: 'December' + } ids={ // optional { year: 'select-year', @@ -194,6 +208,20 @@ class App extends Component { this.setState({ month }); console.log(month); }} + localizedMonths={ // default is the english options + 0: 'January', + 1: 'February', + 2: 'March', + 3: 'April', + 4: 'May', + 5: 'June', + 6: 'July', + 7: 'August', + 8: 'September', + 9: 'October', + 10: 'November', + 11: 'December' + } id={'month'} name={'month'} classes={'classes'}