Change examples for use new properties 'minDate' and 'maxDate'
parent
f31dde202b
commit
0cacdf14ec
|
@ -6,7 +6,8 @@ A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-da
|
|||
```jsx
|
||||
import DatePicker from 'react-toolbox/lib/date_picker';
|
||||
|
||||
const datetime = new Date(1995, 11, 17);
|
||||
const datetime = new Date(2015, 10, 16);
|
||||
const min_datetime = new Date(new Date(datetime).setDate(8));
|
||||
datetime.setHours(17);
|
||||
datetime.setMinutes(28);
|
||||
|
||||
|
@ -25,7 +26,7 @@ class DatePickerTest extends React.Component {
|
|||
return (
|
||||
<section>
|
||||
<DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
|
||||
<DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
|
||||
<DatePicker minDate={min_datetime} value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
@ -36,5 +37,7 @@ class DatePickerTest extends React.Component {
|
|||
|
||||
| Name | Type | Default | Description|
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `maxDate` | `Date` | | Date object with the maximum selectable date. |
|
||||
| `minDate` | `Date` | | Date object with the minimum selectable date. |
|
||||
| `onChange` | `Function` | | Callback called when the picker value is changed.|
|
||||
| `value` | `Date` | | Date object with the currently selected date. |
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
const datetime = new Date(1995, 11, 17);
|
||||
const datetime = new Date(2015, 10, 16);
|
||||
const min_datetime = new Date(new Date(datetime).setDate(8));
|
||||
const max_datetime = new Date(new Date(datetime).setDate(24));
|
||||
datetime.setHours(17);
|
||||
datetime.setMinutes(28);
|
||||
|
||||
|
@ -17,7 +19,12 @@ class DatePickerTest extends React.Component {
|
|||
return (
|
||||
<section>
|
||||
<DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
|
||||
<DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
|
||||
<DatePicker
|
||||
maxDate={max_datetime}
|
||||
minDate={min_datetime}
|
||||
value={this.state.date2}
|
||||
onChange={this.handleChange.bind(this, 'date2')}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -2,7 +2,10 @@ import React from 'react';
|
|||
import DatePicker from '../../components/date_picker';
|
||||
import TimePicker from '../../components/time_picker';
|
||||
|
||||
const datetime = new Date(1995, 11, 17);
|
||||
|
||||
const datetime = new Date(2015, 10, 16);
|
||||
const min_datetime = new Date(new Date(datetime).setDate(8));
|
||||
const max_datetime = new Date(new Date(datetime).setDate(24));
|
||||
datetime.setHours(17);
|
||||
datetime.setMinutes(28);
|
||||
|
||||
|
@ -25,7 +28,12 @@ class PickersTest extends React.Component {
|
|||
<p>Date pickers and time pickers with Material flavour.</p>
|
||||
|
||||
<DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
|
||||
<DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
|
||||
<DatePicker
|
||||
maxDate={max_datetime}
|
||||
minDate={min_datetime}
|
||||
value={this.state.date2}
|
||||
onChange={this.handleChange.bind(this, 'date2')}
|
||||
/>
|
||||
|
||||
<TimePicker value={this.state.time1} onChange={this.handleChange.bind(this, 'time1')} />
|
||||
<TimePicker value={this.state.time2} format='ampm' onChange={this.handleChange.bind(this, 'time2')} />
|
||||
|
|
Loading…
Reference in New Issue