Add inputClassName prop to DatePicker and TimePicker
parent
0d4015d17e
commit
47fba11857
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import classnames from 'classnames';
|
||||||
import DatePickerDialog from './DatePickerDialog';
|
import DatePickerDialog from './DatePickerDialog';
|
||||||
import events from '../utils/events';
|
import events from '../utils/events';
|
||||||
import Input from '../input';
|
import Input from '../input';
|
||||||
|
@ -10,6 +11,7 @@ class DatePicker extends React.Component {
|
||||||
autoOk: React.PropTypes.bool,
|
autoOk: React.PropTypes.bool,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
error: React.PropTypes.string,
|
error: React.PropTypes.string,
|
||||||
|
inputClassName: React.PropTypes.string,
|
||||||
inputFormat: React.PropTypes.func,
|
inputFormat: React.PropTypes.func,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
maxDate: React.PropTypes.object,
|
maxDate: React.PropTypes.object,
|
||||||
|
@ -37,14 +39,14 @@ class DatePicker extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { value } = this.props;
|
const { inputClassName, value } = this.props;
|
||||||
const inputFormat = this.props.inputFormat || time.formatDate;
|
const inputFormat = this.props.inputFormat || time.formatDate;
|
||||||
const date = value ? inputFormat(value) : null;
|
const date = value ? inputFormat(value) : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='date-picker'>
|
<div data-react-toolbox='date-picker'>
|
||||||
<Input
|
<Input
|
||||||
className={style.input}
|
className={classnames(style.input, {[inputClassName]: inputClassName })}
|
||||||
error={this.props.error}
|
error={this.props.error}
|
||||||
onMouseDown={this.handleInputMouseDown}
|
onMouseDown={this.handleInputMouseDown}
|
||||||
label={this.props.label}
|
label={this.props.label}
|
||||||
|
|
|
@ -36,6 +36,7 @@ class DatePickerTest extends React.Component {
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `autoOk` | `Boolean` | `false` | Automatically selects a date upon clicking on a day|
|
| `autoOk` | `Boolean` | `false` | Automatically selects a date upon clicking on a day|
|
||||||
| `className` | `String` | | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
|
| `className` | `String` | | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
|
||||||
|
| `inputClassName`| `String` | | This class will be applied to `Input` component of `DatePicker`. |
|
||||||
| `inputFormat` | `Function` | | Function to format the date displayed on the input. |
|
| `inputFormat` | `Function` | | Function to format the date displayed on the input. |
|
||||||
| `label` | `String` | | The text string to use for the floating label element in the input component.|
|
| `label` | `String` | | The text string to use for the floating label element in the input component.|
|
||||||
| `maxDate` | `Date` | | Date object with the maximum selectable date. |
|
| `maxDate` | `Date` | | Date object with the maximum selectable date. |
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import classnames from 'classnames';
|
||||||
import events from '../utils/events';
|
import events from '../utils/events';
|
||||||
import time from '../utils/time';
|
import time from '../utils/time';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
@ -10,6 +11,7 @@ class TimePicker extends React.Component {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
error: React.PropTypes.string,
|
error: React.PropTypes.string,
|
||||||
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
||||||
|
inputClassName: React.PropTypes.string,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
onChange: React.PropTypes.func,
|
onChange: React.PropTypes.func,
|
||||||
value: React.PropTypes.object
|
value: React.PropTypes.object
|
||||||
|
@ -39,12 +41,12 @@ class TimePicker extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { value, format } = this.props;
|
const { value, format, inputClassName } = this.props;
|
||||||
const formattedTime = value ? time.formatTime(value, format) : null;
|
const formattedTime = value ? time.formatTime(value, format) : null;
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='time-picker'>
|
<div data-react-toolbox='time-picker'>
|
||||||
<Input
|
<Input
|
||||||
className={style.input}
|
className={classnames(style.input, {[inputClassName]: inputClassName })}
|
||||||
error={this.props.error}
|
error={this.props.error}
|
||||||
label={this.props.label}
|
label={this.props.label}
|
||||||
onMouseDown={this.handleInputMouseDown}
|
onMouseDown={this.handleInputMouseDown}
|
||||||
|
|
|
@ -28,6 +28,7 @@ class TimePickerTest extends React.Component {
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `className` | `String` | | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
|
| `className` | `String` | | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
|
||||||
| `error` | `String` | | Provide error text which will be displayed under the field.|
|
| `error` | `String` | | Provide error text which will be displayed under the field.|
|
||||||
|
| `inputClassName`| `String` | | This class will be applied to `Input` component of `TimePicker`. |
|
||||||
| `format` | `String` | `24hr` | Format to display the clock. It can be `24hr` or `ampm`.|
|
| `format` | `String` | `24hr` | Format to display the clock. It can be `24hr` or `ampm`.|
|
||||||
| `label` | `String` | | The text string to use for the floating label element in the input component.|
|
| `label` | `String` | | The text string to use for the floating label element in the input component.|
|
||||||
| `onChange` | `Function` | | Callback called when the picker value is changed.|
|
| `onChange` | `Function` | | Callback called when the picker value is changed.|
|
||||||
|
|
Loading…
Reference in New Issue