From 16ed92693ae56e1b1fbfdf88c942e59f515d3f7b Mon Sep 17 00:00:00 2001 From: Felipe Amorim Date: Tue, 8 Mar 2016 17:40:16 -0300 Subject: [PATCH 1/2] allows to format the date displayed on datepickers input --- components/date_picker/DatePicker.jsx | 6 ++++-- components/date_picker/readme.md | 2 ++ components/utils/time.js | 10 ++++++++-- .../main/modules/examples/datepicker_example_1.txt | 7 +++++++ spec/components/pickers.jsx | 7 +++++++ 5 files changed, 28 insertions(+), 4 deletions(-) diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx index 2fab6b3d..fef353b7 100644 --- a/components/date_picker/DatePicker.jsx +++ b/components/date_picker/DatePicker.jsx @@ -13,7 +13,8 @@ class DatePicker extends React.Component { maxDate: React.PropTypes.object, minDate: React.PropTypes.object, onChange: React.PropTypes.func, - value: React.PropTypes.object + value: React.PropTypes.object, + inputFormat: React.PropTypes.func }; state = { @@ -36,7 +37,8 @@ class DatePicker extends React.Component { render () { const { value } = this.props; - const date = value ? `${value.getDate()} ${time.getFullMonth(value)} ${value.getFullYear()}` : null; + const inputFormat = this.props.inputFormat || time.formatDate; + const date = value ? inputFormat(value) : null; return (
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md index 629a91e9..e9c7aa03 100644 --- a/components/date_picker/readme.md +++ b/components/date_picker/readme.md @@ -23,6 +23,7 @@ class DatePickerTest extends React.Component {
+ `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
); } @@ -40,3 +41,4 @@ class DatePickerTest extends React.Component { | `onChange` | `Function` | | Callback called when the picker value is changed.| | `placeholder` | `String` | | The text string to use like a input placeholder.| | `value` | `Date` | | Date object with the currently selected date. | +| `inputFormat` | `Function` | | Function to format the date displayed on the input. | diff --git a/components/utils/time.js b/components/utils/time.js index ecc53c4c..53522794 100644 --- a/components/utils/time.js +++ b/components/utils/time.js @@ -1,4 +1,4 @@ -export default { +const time = { getDaysInMonth (d) { const resultDate = this.getFirstDayOfMonth(d); resultDate.setMonth(resultDate.getMonth() + 1); @@ -175,5 +175,11 @@ export default { dateOutOfRange (date, minDate, maxDate) { return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate))); - } + }, + + formatDate (date) { + return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`; + }, }; + +export default time; 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 cf196019..877bd7fb 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 @@ -26,6 +26,13 @@ class DatePickerTest extends React.Component { onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} /> + + `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`} + onChange={this.handleChange.bind(this, 'date3')} + value={this.state.date3} + /> ); } diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx index 02c5dd0c..fbe2d1b4 100644 --- a/spec/components/pickers.jsx +++ b/spec/components/pickers.jsx @@ -41,6 +41,13 @@ class PickersTest extends React.Component { value={this.state.date2} /> + `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`} + onChange={this.handleChange.bind(this, 'date3')} + value={this.state.date3} + /> + Date: Wed, 9 Mar 2016 11:07:16 -0300 Subject: [PATCH 2/2] fixed linting errors on utils/time.js --- components/date_picker/DatePicker.jsx | 4 ++-- components/utils/time.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx index fef353b7..a80f81d8 100644 --- a/components/date_picker/DatePicker.jsx +++ b/components/date_picker/DatePicker.jsx @@ -9,12 +9,12 @@ class DatePicker extends React.Component { static propTypes = { className: React.PropTypes.string, error: React.PropTypes.string, + inputFormat: React.PropTypes.func, label: React.PropTypes.string, maxDate: React.PropTypes.object, minDate: React.PropTypes.object, onChange: React.PropTypes.func, - value: React.PropTypes.object, - inputFormat: React.PropTypes.func + value: React.PropTypes.object }; state = { diff --git a/components/utils/time.js b/components/utils/time.js index 53522794..da5f4410 100644 --- a/components/utils/time.js +++ b/components/utils/time.js @@ -179,7 +179,7 @@ const time = { formatDate (date) { return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`; - }, + } }; export default time;