diff --git a/README.md b/README.md index 939c0bb..8fc7e6c 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,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', @@ -198,6 +212,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'} diff --git a/src/date-dropdown.component.tsx b/src/date-dropdown.component.tsx index a48fbb8..e8b266b 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,8 +144,10 @@ 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 = (localizedMonths && Object.entries(localizedMonths).length > 0) ? localizedMonths : monthByNumber; + let months = []; if (selectedYear === startYear && selectedYear === endYear) { @@ -158,21 +161,21 @@ export class DropdownDate extends React.Component { 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] }); } } diff --git a/src/month-picker.component.tsx b/src/month-picker.component.tsx index a90b6cd..f94e2d9 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 = (localizedMonths && Object.entries(localizedMonths).length > 0) ? localizedMonths : monthByNumber; 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(); });