Datepicker: Localizing month and day names

demo/components/date-picker-demo.tsx

@@ -4,12 +4,14 @@ import {DatePicker, DatePickerProps} from '../../src';
 export interface DatePickerDemoState {
     value: Date;
     startingDay?: number;
+    locale?: string;
 }
 
 export class DatePickerDemo extends React.Component<DatePickerProps, Partial<DatePickerDemoState>> {
     public state: DatePickerDemoState = {
         value: this.props.value ? this.props.value : new Date(),
-        startingDay: 0
+        startingDay: 0,
+        locale: 'en-US'
     };
 
     public render() {
@@ -30,13 +32,25 @@ export class DatePickerDemo extends React.Component<DatePickerProps, Partial<Dat
                         <option value="6">Saturday</option>
                     </select>
                 </span>
+                <h2>Try changing the locale!</h2>
+                <span>
+                    <select
+                        value={this.state.locale}
+                        onChange={this.setLocale}
+                    >
+                        <option value="en-CA">English</option>
+                        <option value="he-IL">עברית</option>
+                        <option value="it-IT">Italiano</option>
+                    </select>
+                </span>
                 <span style={{marginBottom: '1em'}} data-automation-id="CURRENT_DATE">
                     {this.state.value!.toDateString()}
                 </span>
                 <DatePicker
                     data-automation-id="DATE_PICKER"
                     placeholder="mm/dd/yyyy"
                     startingDay={this.state.startingDay!}
+                    locale={this.state.locale}
                     value={this.state.value!}
                     onChange={this.onChange}
                     {...this.props}
@@ -50,6 +64,11 @@ export class DatePickerDemo extends React.Component<DatePickerProps, Partial<Dat
         this.setState({startingDay: parseInt(target.value, 10)});
     }
 
+    private setLocale = (event: React.SyntheticEvent<HTMLSelectElement>): void => {
+        const target = event.target as HTMLSelectElement;
+        this.setState({locale: target.value});
+    }
+
     private onChange = (e: {value: Date}): void => {
         this.setState({value: e.value});
     }

src/components/date-picker/calendar.tsx

@@ -20,12 +20,11 @@ export interface CalendarProps {
     startingDay?: number;
     highlightSelectedDate?: boolean;
     highlightFocusedDate?: boolean;
+    locale?: string;
     onChange(date: Date): void;
     updateDropdownDate(date: Date): void;
 }
 
-const monthNames = getMonthNames();
-
 @stylable(styles)
 @observer
 export class Calendar extends React.Component<CalendarProps, {}> {
@@ -75,7 +74,7 @@ export class Calendar extends React.Component<CalendarProps, {}> {
 
     @computed
     get monthName(): string {
-        return monthNames[this.props.value.getMonth()];
+        return getMonthNames(this.props.locale)[this.props.value.getMonth()];
     }
 
     @computed
@@ -107,12 +106,12 @@ export class Calendar extends React.Component<CalendarProps, {}> {
 
     @computed
     get dayNames(): JSX.Element[] {
-        return getDayNames(this.props.startingDay).map((name: string, index: number) => {
+        return getDayNames(this.props.startingDay, this.props.locale).map((name: string, index: number) => {
             return (
                 <span
                     className="calendarItem dayName"
                     key={'DAY_NAME_' + index}
-                    data-automation-id={'DAY_NAME_' + name.toUpperCase()}
+                    data-automation-id={'DAY_NAME_' + index}
                 >
                     {name}
                 </span>

src/components/date-picker/date-picker.tsx

@@ -19,6 +19,7 @@ export interface DatePickerProps extends FormInputProps<Date>, properties.Props
     showDropdownOnInit?: boolean;
     startingDay?: number;
     calendarIcon?: React.ComponentType;
+    locale?: string;
 }
 
 export interface DatePickerState {
@@ -79,6 +80,7 @@ export class DatePicker extends React.PureComponent<DatePickerProps, DatePickerS
                         startingDay={this.props.startingDay}
                         highlightSelectedDate={this.state.highlightSelectedDate}
                         highlightFocusedDate={this.state.highlightFocusedDate}
+                        locale={this.props.locale}
                     />
                 </Popup>
             </div>

src/utils/date-helpers.ts

@@ -1,12 +1,11 @@
-const monthNames = [
-    'January', 'February', 'March',
-    'April', 'May', 'June',
-    'July', 'August', 'September',
-    'October', 'November', 'December'
-];
+export function getDayNames(startingDay: number = 0, locale: string = 'en-US', nameLength: string = 'short'): string[] {
+    const dayNames: string[] = [];
 
-export function getDayNames(startingDay: number = 0): string[] {
-    const dayNames: string[] = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    // For each of the seven days of the week
+    for (let day = 0; day < 7; day++) {
+        const dayName = new Date(1970, 5, day).toLocaleString(locale, {weekday: nameLength});
+        dayNames.push(dayName);
+    }
 
     // Days start from Sunday (Sunday = 0, Monday = 1, etc.)
     for (let i = startingDay; i > 0; i--) {
@@ -16,8 +15,16 @@ export function getDayNames(startingDay: number = 0): string[] {
     return dayNames;
 }
 
-export function getMonthNames(): string[] {
-    return monthNames;
+export function getMonthNames(locale: string = 'en-US', nameLength: string = 'long'): string[] {
+    const listOfMonthNames: string[] = [];
+
+    // For each of the twelve months of the year
+    for (let month = 0; month < 12; month++) {
+        const monthName = new Date(1970, month, 1).toLocaleString(locale, {month: nameLength});
+        listOfMonthNames.push(monthName);
+    }
+
+    return listOfMonthNames;
 }
 
 export function getMonthFromOffset(date: Date, offset: number): Date {

test-kit/components/date-picker-driver.ts

@@ -1,6 +1,5 @@
 import {DriverBase, selectDom, simulate, trigger} from 'test-drive-react';
 import {DatePicker} from '../../src';
-import {getDayNames} from '../../src/utils';
 
 const bodySelect = selectDom(document.body);
 const datePickerDropdown = 'DATE_PICKER_DROPDOWN';
@@ -81,8 +80,8 @@ export class DatePickerTestDriver extends DriverBase {
         if (dayName < 0 || dayName > 6) {
             return null;
         }
-        const dayNames: string[] = getDayNames();
-        return bodySelect(datePickerDropdown, `DAY_NAME_${dayNames[dayName].toUpperCase()}`);
+
+        return bodySelect(datePickerDropdown, `DAY_NAME_${dayName}`);
     }
 
     public get yearLabel(): HTMLSpanElement | null {

test/components/date-picker.spec.tsx

@@ -7,6 +7,7 @@ import {
     getDayNames,
     getDaysInMonth,
     getMonthFromOffset,
+    getMonthNames,
     getNumOfFollowingDays,
     getNumOfPreviousDays
 } from '../../src/utils';
@@ -189,6 +190,27 @@ describe('The DatePicker Component', () => {
             });
         });
 
+        it('should support localization', async () => {
+            const testLocale = 'he-IL';
+            const {driver: datePicker, waitForDom} = clientRenderer.render(
+                <DatePicker
+                    showDropdownOnInit={true}
+                    value={FEBRUARY_FIRST}
+                    locale={testLocale}
+                />
+            ).withDriver(DatePickerTestDriver);
+
+            const localizedDayNames = getDayNames(0, testLocale);
+            const monthName = getMonthNames(testLocale)[FEBRUARY_FIRST.getMonth()];
+
+            await waitForDom(() => {
+                localizedDayNames.forEach((dayName, index) => {
+                    expect(datePicker.getDayName(index), 'day name did not have the proper text').to.have.text(dayName);
+                });
+                expect(datePicker.monthLabel, 'Month Label did not have the proper text').to.have.text(monthName);
+            });
+        });
+
         it('should show the next and previous month buttons horizontally aligned with the month and year', async () => {
             const {driver: datePicker, waitForDom} = clientRenderer.render(
                 <DatePicker showDropdownOnInit value={JANUARY_FIRST}/>