Add floating label for pickers. Fixes #137
parent
92a5369c16
commit
d468c9f1b3
|
@ -7,17 +7,13 @@ import time from '../utils/time';
|
||||||
|
|
||||||
class DatePicker extends React.Component {
|
class DatePicker extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
label: React.PropTypes.string,
|
||||||
maxDate: React.PropTypes.object,
|
maxDate: React.PropTypes.object,
|
||||||
minDate: React.PropTypes.object,
|
minDate: React.PropTypes.object,
|
||||||
onChange: React.PropTypes.func,
|
onChange: React.PropTypes.func,
|
||||||
placeholder: React.PropTypes.string,
|
|
||||||
value: React.PropTypes.object
|
value: React.PropTypes.object
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
placeholder: 'Choose a date'
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
active: false
|
active: false
|
||||||
};
|
};
|
||||||
|
@ -45,7 +41,7 @@ class DatePicker extends React.Component {
|
||||||
<Input
|
<Input
|
||||||
className={style.input}
|
className={style.input}
|
||||||
onMouseDown={this.handleInputMouseDown}
|
onMouseDown={this.handleInputMouseDown}
|
||||||
placeholder={this.props.placeholder}
|
label={this.props.label}
|
||||||
readOnly={true}
|
readOnly={true}
|
||||||
type='text'
|
type='text'
|
||||||
value={date}
|
value={date}
|
||||||
|
|
|
@ -25,8 +25,8 @@ class DatePickerTest extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<section>
|
<section>
|
||||||
<DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
|
<DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
|
||||||
<DatePicker minDate={min_datetime} value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
|
<DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -37,6 +37,7 @@ class DatePickerTest extends React.Component {
|
||||||
|
|
||||||
| Name | Type | Default | Description|
|
| Name | Type | Default | Description|
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
|
| `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. |
|
||||||
| `minDate` | `Date` | | Date object with the minimum selectable date. |
|
| `minDate` | `Date` | | Date object with the minimum selectable date. |
|
||||||
| `onChange` | `Function` | | Callback called when the picker value is changed.|
|
| `onChange` | `Function` | | Callback called when the picker value is changed.|
|
||||||
|
|
|
@ -9,6 +9,7 @@ class TimePicker extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
||||||
|
label: React.PropTypes.string,
|
||||||
onChange: React.PropTypes.func,
|
onChange: React.PropTypes.func,
|
||||||
value: React.PropTypes.object
|
value: React.PropTypes.object
|
||||||
};
|
};
|
||||||
|
@ -43,8 +44,8 @@ class TimePicker extends React.Component {
|
||||||
<div data-react-toolbox='time-picker'>
|
<div data-react-toolbox='time-picker'>
|
||||||
<Input
|
<Input
|
||||||
className={style.input}
|
className={style.input}
|
||||||
|
label={this.props.label}
|
||||||
onMouseDown={this.handleInputMouseDown}
|
onMouseDown={this.handleInputMouseDown}
|
||||||
placeholder='Pick up time'
|
|
||||||
readOnly={true}
|
readOnly={true}
|
||||||
type='text'
|
type='text'
|
||||||
value={formattedTime}
|
value={formattedTime}
|
||||||
|
|
|
@ -11,7 +11,7 @@ selectedTime.setHours(17);
|
||||||
selectedTime.setMinutes(28);
|
selectedTime.setMinutes(28);
|
||||||
|
|
||||||
const TimePickerTest = () => (
|
const TimePickerTest = () => (
|
||||||
<TimePicker value={selectedTime} />
|
<TimePicker label='Finishing time' value={selectedTime} />
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -21,5 +21,6 @@ const TimePickerTest = () => (
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `className` | `String` | `''` | Sets a class to give customized styles.|
|
| `className` | `String` | `''` | Sets a class to give customized styles.|
|
||||||
| `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.|
|
||||||
| `onChange` | `Function` | | Callback called when the picker value is changed.|
|
| `onChange` | `Function` | | Callback called when the picker value is changed.|
|
||||||
| `value` | `Date` | | Datetime object with currrently selected time |
|
| `value` | `Date` | | Datetime object with currrently selected time |
|
||||||
|
|
|
@ -18,12 +18,17 @@ class DatePickerTest extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<section>
|
<section>
|
||||||
<DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
|
<DatePicker
|
||||||
<DatePicker
|
label='Birthdate'
|
||||||
maxDate={max_datetime}
|
onChange={this.handleChange.bind(this, 'date1')}
|
||||||
|
value={this.state.date1}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DatePicker
|
||||||
|
label='Expiration date'
|
||||||
minDate={min_datetime}
|
minDate={min_datetime}
|
||||||
value={this.state.date2}
|
onChange={this.handleChange.bind(this, 'date2')}
|
||||||
onChange={this.handleChange.bind(this, 'date2')}
|
value={this.state.date2}
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
@ -3,7 +3,7 @@ selectedTime.setHours(17);
|
||||||
selectedTime.setMinutes(28);
|
selectedTime.setMinutes(28);
|
||||||
|
|
||||||
const TimePickerTest = () => (
|
const TimePickerTest = () => (
|
||||||
<TimePicker value={selectedTime} />
|
<TimePicker label='Finishing time' value={selectedTime} />
|
||||||
);
|
);
|
||||||
|
|
||||||
return <TimePickerTest />
|
return <TimePickerTest />
|
||||||
|
|
|
@ -27,16 +27,32 @@ class PickersTest extends React.Component {
|
||||||
<h5>Pickers</h5>
|
<h5>Pickers</h5>
|
||||||
<p>Date pickers and time pickers with Material flavour.</p>
|
<p>Date pickers and time pickers with Material flavour.</p>
|
||||||
|
|
||||||
<DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
|
|
||||||
<DatePicker
|
<DatePicker
|
||||||
maxDate={max_datetime}
|
label='Birthdate'
|
||||||
minDate={min_datetime}
|
onChange={this.handleChange.bind(this, 'date1')}
|
||||||
value={this.state.date2}
|
value={this.state.date1}
|
||||||
onChange={this.handleChange.bind(this, 'date2')}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<TimePicker value={this.state.time1} onChange={this.handleChange.bind(this, 'time1')} />
|
<DatePicker
|
||||||
<TimePicker value={this.state.time2} format='ampm' onChange={this.handleChange.bind(this, 'time2')} />
|
label='Expiration date'
|
||||||
|
maxDate={max_datetime}
|
||||||
|
minDate={min_datetime}
|
||||||
|
onChange={this.handleChange.bind(this, 'date2')}
|
||||||
|
value={this.state.date2}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TimePicker
|
||||||
|
label='Start time'
|
||||||
|
onChange={this.handleChange.bind(this, 'time1')}
|
||||||
|
value={this.state.time1}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TimePicker
|
||||||
|
format='ampm'
|
||||||
|
label='Finishing time'
|
||||||
|
onChange={this.handleChange.bind(this, 'time2')}
|
||||||
|
value={this.state.time2}
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue