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

[DatePicker] Added disabled property and example #3060

Merged
merged 1 commit into from
Jan 29, 2016
Merged

[DatePicker] Added disabled property and example #3060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions docs/src/app/components/pages/components/DatePicker/ExampleSimple.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const DatePickerExampleSimple = () => (
<div>
<DatePicker hintText="Portrait Dialog" />
<DatePicker hintText="Landscape Dialog" mode="landscape" />
<DatePicker hintText="Dialog Disabled" disabled={true} />
</div>
);

Expand Down
3 changes: 2 additions & 1 deletion docs/src/app/components/pages/components/DatePicker/Page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ import datePickerExampleInternationalCode from '!raw!./ExampleInternational';
import datePickerReadmeText from './README';

const descriptions = {
simple: 'The Date Picker defaults to a portrait dialog. The `mode` property can be set to `landscape`.',
simple: 'The Date Picker defaults to a portrait dialog. The `mode` property can be set to `landscape`. You can ' +
'also disable the Dialog passing `true` to the `disabled` property.',
inline: 'Inline Date Pickers are displayed below the input, rather than as a modal dialog. ',
ranged: 'This example allows you to set a date range, and to toggle `autoOk`, and `disableYearSelection`.',
controlled: '`DatePicker` can be implemented as a controlled input, where `value` is handled by state in the ' +
Expand Down
13 changes: 10 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 @@ -41,6 +41,11 @@ const DatePicker = React.createClass({
*/
disableYearSelection: React.PropTypes.bool,

/**
* Disables the DatePicker.
*/
disabled: React.PropTypes.bool,

/**
* Used to change the first day of week. It drastically varies from
* Saturday to Monday (could even be Friday) between different locales.
Expand Down Expand Up @@ -165,6 +170,7 @@ const DatePicker = React.createClass({
disableYearSelection: false,
style: {},
firstDayOfWeek: 0,
disabled: false,
};
},

Expand Down Expand Up @@ -248,9 +254,10 @@ const DatePicker = React.createClass({
_handleInputTouchTap: function _handleInputTouchTap(event) {
if (this.props.onTouchTap) this.props.onTouchTap(event);

setTimeout(() => {
this.openDialog();
}, 0);
if (!this.props.disabled)
setTimeout(() => {
this.openDialog();
}, 0);
},

_handleWindowKeyUp() {
Expand Down