Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow using DatePicker as a controlled input #1170

Merged
merged 4 commits into from
Jul 16, 2015
Merged

Allow using DatePicker as a controlled input #1170

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
841b85b
DatePicker only calls setDate on TextField if uncontrolled.
marnusw Jul 14, 2015
326fa87
DatePicker formats the value of controlled inputs.
marnusw Jul 14, 2015
e166c4b
Documentation for a controlled DatePicker.
marnusw Jul 15, 2015
3018f07
DatePicker checks own controlled status, not TextField._isControlled().
marnusw Jul 16, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 29 additions & 2 deletions docs/src/app/components/pages/components/date-picker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ class DatePickerPage extends React.Component {
minDate: minDate,
maxDate: maxDate,
autoOk: false,
showYearSelector: false
showYearSelector: false,
controlledDate: new Date('2015/07/15')
};
}

Expand All @@ -31,7 +32,12 @@ class DatePickerPage extends React.Component {
'//Landscape Dialog\n' +
'<DatePicker\n' +
' hintText="Landscape Dialog"\n' +
' mode="landscape"/>\n\n'+
' mode="landscape"/>\n\n' +
'//Controlled Input\n' +
'<DatePicker\n' +
' hintText="Controlled Date Input"\n' +
' value={this.state.controlledDate}\n' +
' onChange={this._handleChange} />\n\n' +
'// Ranged Date Picker\n' +
'<DatePicker\n' +
' hintText="Ranged Date Picker"\n' +
Expand Down Expand Up @@ -132,6 +138,19 @@ class DatePickerPage extends React.Component {
desc: 'Sets the date value to d, where d is a date object.'
}
]
},
{
name: 'Events',
infoArray: [
{
name: 'onChange',
header: 'function(nill, date)',
desc: 'Callback function that is fired when the date value ' +
'changes. Since there is no particular event associated with ' +
'the change the first argument will always be null and the second ' +
'argument will be the new Date instance.'
},
]
}
];

Expand All @@ -153,6 +172,11 @@ class DatePickerPage extends React.Component {
hintText="Landscape Dialog"
mode="landscape" />

<DatePicker
hintText="Controlled Date Input"
value={this.state.controlledDate}
onChange={this._handleChange.bind(this)} />

<DatePicker
hintText="Ranged Date Picker"
autoOk={this.state.autoOk}
Expand Down Expand Up @@ -207,6 +231,9 @@ class DatePickerPage extends React.Component {
this.setState(state);
}

_handleChange(nill, date) {
this.setState({controlledDate: date});
}
}

module.exports = DatePickerPage;
14 changes: 11 additions & 3 deletions src/date-picker/date-picker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ let DatePicker = React.createClass({
render() {
let {
autoOk,
defaultDate,
formatDate,
maxDate,
minDate,
Expand All @@ -72,8 +73,13 @@ let DatePicker = React.createClass({
} = this.props;
let defaultInputValue;

if (this.props.defaultDate) {
defaultInputValue = this.props.formatDate(this.props.defaultDate);
if (defaultDate) {
defaultInputValue = formatDate(defaultDate);
}

// Format the date of controlled inputs
if (other.value) {
other.value = formatDate(other.value);
}

return (
Expand Down Expand Up @@ -111,7 +117,9 @@ let DatePicker = React.createClass({
this.setState({
date: d,
});
this.refs.input.setValue(this.props.formatDate(d));
if (!this.refs.input._isControlled()) {
this.refs.input.setValue(this.props.formatDate(d));
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use this naming convention to indicate that _isControlled() is private to the component. Since we're passing all the props to the TextField input anyways, you should be able to determine this based on the props being passed in to date picker.

},

_handleDialogAccept(d) {
Expand Down