vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add inputClassName prop to DatePicker and TimePicker

old
Javi Velasco 2016-04-10 18:53:44 +02:00
parent 0d4015d17e
commit 47fba11857
4 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/date_picker/DatePicker.jsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import classnames from 'classnames';
import DatePickerDialog from './DatePickerDialog';
import events from '../utils/events';
import Input from '../input';
@ -10,6 +11,7 @@ class DatePicker extends React.Component {
autoOk: React.PropTypes.bool,
className: React.PropTypes.string,
error: React.PropTypes.string,
inputClassName: React.PropTypes.string,
inputFormat: React.PropTypes.func,
label: React.PropTypes.string,
maxDate: React.PropTypes.object,
@ -37,14 +39,14 @@ class DatePicker extends React.Component {
};
render () {
const { value } = this.props;
const { inputClassName, value } = this.props;
const inputFormat = this.props.inputFormat || time.formatDate;
const date = value ? inputFormat(value) : null;
return (
<div data-react-toolbox='date-picker'>
<Input
className={style.input}
className={classnames(style.input, {[inputClassName]: inputClassName })}
error={this.props.error}
onMouseDown={this.handleInputMouseDown}
label={this.props.label}

1
components/date_picker/readme.md
View File

@ -36,6 +36,7 @@ class DatePickerTest extends React.Component {
|:-----|:-----|:-----|:-----|
| `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.|
| `inputClassName`| `String` | | This class will be applied to `Input` component of `DatePicker`. |
| `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.|
| `maxDate` | `Date` | | Date object with the maximum selectable date. |

6
components/time_picker/TimePicker.jsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import classnames from 'classnames';
import events from '../utils/events';
import time from '../utils/time';
import style from './style';
@ -10,6 +11,7 @@ class TimePicker extends React.Component {
className: React.PropTypes.string,
error: React.PropTypes.string,
format: React.PropTypes.oneOf(['24hr', 'ampm']),
inputClassName: React.PropTypes.string,
label: React.PropTypes.string,
onChange: React.PropTypes.func,
value: React.PropTypes.object
@ -39,12 +41,12 @@ class TimePicker extends React.Component {
};
render () {
const { value, format } = this.props;
const { value, format, inputClassName } = this.props;
const formattedTime = value ? time.formatTime(value, format) : null;
return (
<div data-react-toolbox='time-picker'>
<Input
className={style.input}
className={classnames(style.input, {[inputClassName]: inputClassName })}
error={this.props.error}
label={this.props.label}
onMouseDown={this.handleInputMouseDown}

1
components/time_picker/readme.md
View File

@ -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.|
| `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`.|
| `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.|