Added option to manually set DatePickerIOS locale.

Author: Gongreg

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -92,6 +92,14 @@ const DatePickerIOS = createReactClass({
      * instance, to show times in Pacific Standard Time, pass -7 * 60.
      */
     timeZoneOffsetInMinutes: PropTypes.number,
+
+    /**
+     * DatePicker locale.
+     *
+     * By default, date picker locale is based on users locale. Using this parameter
+     * you can manually change it.
+     */
+    locale: PropTypes.string,
   },
 
   getDefaultProps: function(): DefaultProps {
@@ -137,6 +145,7 @@ const DatePickerIOS = createReactClass({
           mode={props.mode}
           minuteInterval={props.minuteInterval}
           timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
+          locale={props.locale || undefined}
           onChange={this._onChange}
           onStartShouldSetResponder={() => true}
           onResponderTerminationRequest={() => false}

RNTester/js/DatePickerIOSExample.js

@@ -25,11 +25,13 @@ class DatePickerExample extends React.Component<$FlowFixMeProps, $FlowFixMeState
   static defaultProps = {
     date: new Date(),
     timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
+    locale: false,
   };
 
   state = {
     date: this.props.date,
     timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
+    locale: this.props.locale,
   };
 
   onDateChange = (date) => {
@@ -44,6 +46,10 @@ class DatePickerExample extends React.Component<$FlowFixMeProps, $FlowFixMeState
     this.setState({timeZoneOffsetInHours: offset});
   };
 
+  onLocaleChange = (event) => {
+    this.setState({locale: event.nativeEvent.text});
+  };
+
   render() {
     // Ideally, the timezone input would be a picker rather than a
     // text input, but we don't have any pickers yet :(
@@ -64,25 +70,35 @@ class DatePickerExample extends React.Component<$FlowFixMeProps, $FlowFixMeState
           />
           <Text> hours from UTC</Text>
         </WithLabel>
+        <WithLabel label="Locale:">
+          <TextInput
+            onChange={this.onLocaleChange}
+            style={styles.textinput}
+            value={this.state.locale}
+          />
+        </WithLabel>
         <Heading label="Date + time picker" />
         <DatePickerIOS
           date={this.state.date}
           mode="datetime"
           timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
           onDateChange={this.onDateChange}
+          locale={this.state.locale}
         />
         <Heading label="Date picker" />
         <DatePickerIOS
           date={this.state.date}
           mode="date"
           timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
           onDateChange={this.onDateChange}
+          locale={this.state.locale}
         />
         <Heading label="Time picker, 10-minute interval" />
         <DatePickerIOS
           date={this.state.date}
           mode="time"
           timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
+          locale={this.state.locale}
           onDateChange={this.onDateChange}
           minuteInterval={10}
         />

React/Views/RCTDatePickerManager.m

@@ -34,6 +34,11 @@ - (UIView *)view
   return [RCTDatePicker new];
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(locale, NSString, UIDatePicker)
+{
+  [view setLocale:[NSLocale localeWithLocaleIdentifier:json ? [RCTConvert NSString:json] : defaultView.locale.localeIdentifier]];
+}
+
 RCT_EXPORT_VIEW_PROPERTY(date, NSDate)
 RCT_EXPORT_VIEW_PROPERTY(minimumDate, NSDate)
 RCT_EXPORT_VIEW_PROPERTY(maximumDate, NSDate)