Add attributes for ok & cancel labels

In DatePicker and TimePicker.

The attribute names are chosen to be the same as in material-ui

This fixes #805.

components/date_picker/DatePicker.js

@@ -16,6 +16,7 @@ const factory = (Input, DatePickerDialog) => {
     static propTypes = {
       active: PropTypes.bool,
       autoOk: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       error: PropTypes.string,
       icon: PropTypes.oneOfType([
@@ -32,6 +33,7 @@ const factory = (Input, DatePickerDialog) => {
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onChange: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
@@ -99,8 +101,8 @@ const factory = (Input, DatePickerDialog) => {
 
     render () {
       const { active, // eslint-disable-line
-        autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
-        onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
+        autoOk, cancelLabel, inputClassName, inputFormat, locale, maxDate, minDate,
+        okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
         ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
@@ -126,11 +128,13 @@ const factory = (Input, DatePickerDialog) => {
           <DatePickerDialog
             active={this.state.active}
             autoOk={autoOk}
+            cancelLabel={cancelLabel}
             className={this.props.className}
             locale={locale}
             maxDate={maxDate}
             minDate={minDate}
             name={this.props.name}
+            okLabel={okLabel}
             onDismiss={this.handleDismiss}
             onEscKeyDown={onEscKeyDown || this.handleDismiss}
             onOverlayClick={onOverlayClick || this.handleDismiss}

components/date_picker/DatePickerDialog.js

@@ -7,6 +7,7 @@ const factory = (Dialog, Calendar) => {
     static propTypes = {
       active: PropTypes.bool,
       autoOk: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       locale: React.PropTypes.oneOfType([
         React.PropTypes.string,
@@ -15,6 +16,7 @@ const factory = (Dialog, Calendar) => {
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onDismiss: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onOverlayClick: PropTypes.func,
@@ -35,7 +37,9 @@ const factory = (Dialog, Calendar) => {
 
     static defaultProps = {
       active: false,
+      cancelLabel: 'Cancel',
       className: '',
+      okLabel: 'Ok',
       value: new Date()
     };
 
@@ -82,8 +86,8 @@ const factory = (Dialog, Calendar) => {
     };
 
     actions = [
-      { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-      { label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
+      { label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
     ];
 
     render () {

components/time_picker/TimePicker.js

@@ -12,12 +12,14 @@ const factory = (TimePickerDialog, Input) => {
   class TimePicker extends Component {
     static propTypes = {
       active: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       error: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
       inputClassName: PropTypes.string,
       label: PropTypes.string,
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onChange: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
@@ -82,7 +84,8 @@ const factory = (TimePickerDialog, Input) => {
     render () {
       const {
         active, // eslint-disable-line
-        format, inputClassName, onEscKeyDown, onOverlayClick, readonly, value, ...others
+        cancelLabel, format, inputClassName, okLabel, onEscKeyDown, onOverlayClick,
+        readonly, value, ...others
       } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
@@ -102,9 +105,11 @@ const factory = (TimePickerDialog, Input) => {
           />
           <TimePickerDialog
             active={this.state.active}
+            cancelLabel={cancelLabel}
             className={this.props.className}
             format={format}
             name={this.props.name}
+            okLabel={okLabel}
             onDismiss={this.handleDismiss}
             onEscKeyDown={onEscKeyDown}
             onOverlayClick={onOverlayClick}

components/time_picker/TimePickerDialog.js

@@ -7,9 +7,11 @@ const factory = (Dialog) => {
   class TimePickerDialog extends Component {
     static propTypes = {
       active: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onDismiss: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onOverlayClick: PropTypes.func,
@@ -34,7 +36,9 @@ const factory = (Dialog) => {
 
     static defaultProps = {
       active: false,
+      cancelLabel: 'Cancel',
       format: '24hr',
+      okLabel: 'Ok',
       value: new Date()
     };
 
@@ -70,8 +74,8 @@ const factory = (Dialog) => {
     };
 
     actions = [
-      { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-      { label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
+      { label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
     ];
 
     formatHours () {