From 7311489ade70db08fbd06f47e27e9dc423a3c9d1 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 11 Nov 2015 20:34:19 +0100 Subject: [PATCH] Improve date picker --- components/date_picker/calendar/index.jsx | 13 ++--- components/date_picker/dialog.jsx | 50 ++++++++----------- components/date_picker/index.jsx | 5 -- components/date_picker/readme.md | 29 +++++++++-- .../modules/examples/datepicker_example_1.txt | 27 ++++++++-- spec/components/pickers.jsx | 1 - 6 files changed, 72 insertions(+), 53 deletions(-) diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/index.jsx index c785e8f3..c98b85b4 100644 --- a/components/date_picker/calendar/index.jsx +++ b/components/date_picker/calendar/index.jsx @@ -21,7 +21,6 @@ class Calendar extends React.Component { }; state = { - selectedDate: this.props.selectedDate, viewDate: this.props.selectedDate }; @@ -39,15 +38,13 @@ class Calendar extends React.Component { } handleDayClick = (day) => { - const newDate = utils.time.setDay(this.state.viewDate, day); - this.setState({selectedDate: newDate}); - if (this.props.onChange) this.props.onChange(newDate); + this.props.onChange(utils.time.setDay(this.state.viewDate, day)); }; handleYearClick = (year) => { - const newDate = utils.time.setYear(this.state.selectedDate, year); - this.setState({selectedDate: newDate, viewDate: newDate}); - if (this.props.onChange) this.props.onChange(newDate); + const viewDate = utils.time.setYear(this.props.selectedDate, year); + this.setState({viewDate}); + this.props.onChange(viewDate); }; incrementViewMonth = () => { @@ -102,7 +99,7 @@ class Calendar extends React.Component { diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx index e11f17eb..f9cd6407 100644 --- a/components/date_picker/dialog.jsx +++ b/components/date_picker/dialog.jsx @@ -7,69 +7,59 @@ import Dialog from '../dialog'; class CalendarDialog extends React.Component { static propTypes = { active: React.PropTypes.bool, - initialDate: React.PropTypes.object, - onCancel: React.PropTypes.func, - onChange: React.PropTypes.func, - onSelect: React.PropTypes.func + onDismiss: React.PropTypes.func, + onSelect: React.PropTypes.func, + value: React.PropTypes.object }; static defaultProps = { active: false, - initialDate: new Date() + value: new Date() }; state = { - date: this.props.initialDate, - display: 'months', - actions: [ - { label: 'Cancel', className: style.button, onClick: this.handleCancel.bind(this) }, - { label: 'Ok', className: style.button, onClick: this.handleSelect.bind(this) } - ] + date: this.props.value, + display: 'months' }; handleCalendarChange = (value) => { this.setState({date: value, display: 'months'}); - if (this.props.onChange) this.props.onChange(value); }; - displayMonths = () => { - this.setState({display: 'months'}); - }; - - displayYears = () => { - this.setState({display: 'years'}); - }; - - handleCancel () { - if (this.props.onCancel) this.props.onCancel(); - } - - handleSelect () { + handleSelect = () => { if (this.props.onSelect) this.props.onSelect(this.state.date); - } + }; + + handleSwitchDisplay = (display) => { + this.setState({ display }); + }; + + actions = [ + { label: 'Cancel', className: style.button, onClick: this.props.onDismiss }, + { label: 'Ok', className: style.button, onClick: this.handleSelect } + ]; render () { const display = `display-${this.state.display}`; const headerClassName = `${style.header} ${style[display]}`; return ( - +
{time.getFullDayOfWeek(this.state.date.getDay())} -
+
{time.getShortMonth(this.state.date)} {this.state.date.getDate()}
- + {this.state.date.getFullYear()}
diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx index 8ca2718e..00bf3b6c 100644 --- a/components/date_picker/index.jsx +++ b/components/date_picker/index.jsx @@ -7,15 +7,10 @@ import style from './style'; class DatePicker extends React.Component { static propTypes = { - className: React.PropTypes.string, onChange: React.PropTypes.func, value: React.PropTypes.object }; - static defaultProps = { - className: '' - }; - state = { active: false }; diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md index 63c882d8..f742de22 100644 --- a/components/date_picker/readme.md +++ b/components/date_picker/readme.md @@ -6,16 +6,35 @@ A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-da ```jsx import DatePicker from 'react-toolbox/lib/date_picker'; -const selectedDate = new Date(1995, 11, 17); -const DatePickerTest = () => ( - -); +const datetime = new Date(1995, 11, 17); +datetime.setHours(17); +datetime.setMinutes(28); + +class DatePickerTest extends React.Component { + state = { + date2: datetime + }; + + handleChange = (item, value) => { + const newState = {}; + newState[item] = value; + this.setState(newState); + }; + + render () { + return ( +
+ + +
+ ); + } +} ``` ## Properties | Name | Type | Default | Description| |:-----|:-----|:-----|:-----| -| `className` | `String` | `''` | Sets a class to give customized styles to the time picker.| | `onChange` | `Function` | | Callback called when the picker value is changed.| | `value` | `Date` | | Date object with the currently selected date. | diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt index 018d1115..e1ca9f2f 100644 --- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt +++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt @@ -1,7 +1,26 @@ -const selectedDate = new Date(1995, 11, 17); +const datetime = new Date(1995, 11, 17); +datetime.setHours(17); +datetime.setMinutes(28); -const DatePickerTest = () => ( - -); +class DatePickerTest extends React.Component { + state = { + date2: datetime + }; + + handleChange = (item, value) => { + const newState = {}; + newState[item] = value; + this.setState(newState); + }; + + render () { + return ( +
+ + +
+ ); + } +} return ; diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx index ac0b82d3..7d248aab 100644 --- a/spec/components/pickers.jsx +++ b/spec/components/pickers.jsx @@ -32,7 +32,6 @@ class PickersTest extends React.Component { ); } - } export default PickersTest;