feat(datepicker): add support for custom btn text

xgfe · May 6, 2016 · 1bbd66e · 1bbd66e
1 parent 71c4bb6
commit 1bbd66e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,8 @@ Check [index.js](https://github.com/xgfe/react-native-datepicker/blob/master/exa
   format="YYYY-MM-DD"
   minDate="2016-05-01"
   maxDate="2016-06-01"
+  confirmBtnText="Confirm"
+  cancelBtnText="Cancel"
   onDateChange={(date) => {this.setState({date: date})}}
 />
 ```
@@ -37,6 +39,8 @@ You can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/ma
 | date | - | `string | date` | Specify the display date of DatePicker. `string` type value must match the specified format  |
 | mode | 'date' | `enum` | The `enum` of `date`, `datetime` and `time` |
 | format | 'YYYY-MM-DD' | `string` | Specify the display format of the date, which using [moment.js](http://momentjs.com/). The default value change according to the mode. |
+| confirmBtnText | - | `string` | Specify the text of confirm btn in ios. |
+| cancelBtnText | - | `string` | Specify the text of cancel btn in ios. |
 | minDate | - | `string | date` | Restricts the range of possible date values. |
 | maxDate | - | `string | date` | Restricts the range of possible date values. |
 | duration | 300 | `number` | Specify the animation duration of datepicker.

diff --git a/example/index.android.js b/example/index.android.js
@@ -34,6 +34,8 @@ class example extends Component {
           format="YYYY-MM-DD"
           minDate="2016-05-01"
           maxDate="2016-06-01"
+          confirmBtnText="Confirm"
+          cancelBtnText="Cancel"
           onDateChange={(date) => {this.setState({date: date})}}
         />
         <Text style={styles.instructions}>date: {this.state.date}</Text>
@@ -42,6 +44,8 @@ class example extends Component {
           date={this.state.time}
           mode="time"
           format="HH:mm"
+          confirmBtnText="Confirm"
+          cancelBtnText="Cancel"
           onDateChange={(time) => {this.setState({time: time})}}
         />
         <Text style={styles.instructions}>time: {this.state.time}</Text>
@@ -50,6 +54,8 @@ class example extends Component {
           date={this.state.datetime}
           mode="datetime"
           format="YYYY-MM-DD HH:mm"
+          confirmBtnText="Confirm"
+          cancelBtnText="Cancel"
           onDateChange={(datetime) => {this.setState({datetime: datetime})}}
         />
         <Text style={styles.instructions}>datetime: {this.state.datetime}</Text>

diff --git a/index.js b/index.js
@@ -41,6 +41,9 @@ class DatePicker extends Component {
   // slide animation duration time, default to 300ms, IOS only
   duration = this.props.duration || 300;
 
+  confirmBtnText = this.props.confirmBtnText || '确定';
+  cancelBtnText = this.props.cancelBtnText || '取消';
+
   state = {
     date: this.getDate(),
     modalVisible: false,
@@ -231,14 +234,14 @@ class DatePicker extends Component {
                     onPress={this.onPressCancel}
                     style={[Style.btnText, Style.btnCancel]}
                   >
-                    <Text style={[Style.btnTextText, Style.btnTextCancel]}>取消</Text>
+                    <Text style={[Style.btnTextText, Style.btnTextCancel]}>{this.cancelBtnText}</Text>
                   </TouchableHighlight>
                   <TouchableHighlight
                     underlayColor={'transparent'}
                     onPress={this.onPressConfirm}
                     style={[Style.btnText, Style.btnConfirm]}
                   >
-                    <Text style={Style.btnTextText}>确定</Text>
+                    <Text style={Style.btnTextText}>{this.confirmBtnText}</Text>
                   </TouchableHighlight>
                 </Animated.View>
               </TouchableHighlight>