pass locale via props. use js toLocaleDateString()

Author: misteinb

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## v3.0.3
 ### Fixed
 - screen reader support for calendar
+- take in props to override browser locale for calendar
 
 ## v3.0.2
 ### Fixed

lib/components/DateTime/Calendar.tsx

@@ -23,6 +23,8 @@ export interface CalendarAttributes {
 export interface CalendarProps extends React.Props<CalendarComponentType> {
     /** Current selected date */
     value?: Date | string;
+    /** i18n locale */
+    locale?: string;
 
     /** Year to display (otherwise shows the year from value) */
     year?: number;
@@ -84,7 +86,6 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
 
 
     constructor(props: CalendarProps) {
-        const locale = navigator['userLanguage'] || (navigator.language || 'en-us');
         super(props);
 
         if (typeof (this.props.value) === 'string') {
@@ -108,9 +109,9 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
             detached: false
         };
 
-        this.monthNames = getLocalMonths(locale);
+        this.monthNames = getLocalMonths(this.props.locale);
 
-        this.dayNames = getLocalWeekdays(locale);
+        this.dayNames = getLocalWeekdays(this.props.locale);
 
         this.onPrevMonth = this.onPrevMonth.bind(this);
         this.onNextMonth = this.onNextMonth.bind(this);
@@ -280,7 +281,6 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
 
         const curYear = this.state.currentDate.year;
         const curMonth = this.state.currentDate.month;
-        const locale = navigator['userLanguage'] || (navigator.language || 'en-us');
 
         const weekdays = this.dayNames.map(day => {
             return (
@@ -325,7 +325,7 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
                 const date = col.date;
                 const colMonth = col.month;
                 const key = `${colMonth}-${date}`;
-                const ariaLabel = `${date} ${this.monthNames[colMonth]} ${curYear}`;
+                const ariaLabel = new Date(`${curYear}-${colMonth + 1}-${date}`).toLocaleDateString(this.props.locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
 
                 /** Grayed out day from another month */
                 if (colMonth !== curMonth) {

lib/components/DateTime/DateField.tsx

@@ -24,6 +24,8 @@ export interface DateFieldProps extends React.Props<DateFieldType> {
      * Default: true
      */
     localTimezone?: boolean;
+    /** i18n locale */
+    locale?: string;
     /**
      * Show Calendar below date picker input
      */
@@ -114,6 +116,7 @@ export const DateField: React.StatelessComponent<DateFieldProps> = (props: DateF
             <DatePicker
                 name={props.name}
                 initialValue={props.initialValue}
+                locale={props.locale}
                 localTimezone={props.localTimezone}
                 tabIndex={props.tabIndex}
                 showAbove={props.showAbove}

lib/components/DateTime/DatePicker.tsx

@@ -42,6 +42,9 @@ export interface DatePickerProps extends React.Props<DatePickerType> {
      * Default: true
      */
     localTimezone?: boolean;
+
+    /** i18n locale */
+    locale?: string;
     /**
      * Show Calendar below date picker input
      */
@@ -446,6 +449,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
                             className={css('date-picker-calendar')}
                             year={parsed.year || null}
                             month={parsed.month - 1}
+                            locale={this.props.locale}
                             attr={this.props.attr.calendar}
                         />
                         <div className={css('date-picker-dropdown-triangle')}></div>

lib/components/DateTime/DateTimeField.tsx

@@ -46,6 +46,8 @@ export interface DateTimeFieldProps extends React.Props<DateTimeFieldType> {
      * Default: true
      */
     localTimezone?: boolean;
+    /** i18n locale */
+    locale?: string;
     /**
      * Show Calendar below date picker input
      */
@@ -370,6 +372,7 @@ export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<D
                             tabIndex={this.props.tabIndex}
                             error={!!this.props.error}
                             disabled={this.props.disabled}
+                            locale={this.props.locale}
                             localTimezone={this.props.localTimezone}
                             showAbove={this.props.showAbove}
                             format={this.props.format}