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

allows to format the date displayed on datepickers input

old
Felipe Amorim 2016-03-08 17:40:16 -03:00
parent e97c8da983
commit 16ed92693a
5 changed files with 28 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

@ -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 (
<div data-react-toolbox='date-picker'>

2
components/date_picker/readme.md
View File

@ -23,6 +23,7 @@ class DatePickerTest extends React.Component {
<section>
<DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
<DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
<DatePicker label='Formatted date' inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
</section>
);
}
@ -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. |

10
components/utils/time.js
View File

@ -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;

7
docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
View File

@ -26,6 +26,13 @@ class DatePickerTest extends React.Component {
onChange={this.handleChange.bind(this, 'date2')}
value={this.state.date2}
/>
<DatePicker
label='Formatted Date'
inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`}
onChange={this.handleChange.bind(this, 'date3')}
value={this.state.date3}
/>
</section>
);
}

7
spec/components/pickers.jsx
View File

@ -41,6 +41,13 @@ class PickersTest extends React.Component {
value={this.state.date2}
/>
<DatePicker
label='Formatted Date'
inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`}
onChange={this.handleChange.bind(this, 'date3')}
value={this.state.date3}
/>
<TimePicker
label='Start time'
onChange={this.handleChange.bind(this, 'time1')}