diff --git a/docs-site/src/example_components.jsx b/docs-site/src/example_components.jsx
index 269774a8b..02c30a75c 100644
--- a/docs-site/src/example_components.jsx
+++ b/docs-site/src/example_components.jsx
@@ -43,6 +43,7 @@ import CalendarContainer from "./examples/calendar_container";
import Portal from "./examples/portal";
import InlinePortal from "./examples/inline_portal";
import RawChange from "./examples/raw_change";
+import ReadOnly from "./examples/read_only";
import ShowTime from "./examples/show_time";
import ShowTimeOnly from "./examples/show_time_only";
import ExcludeTimes from "./examples/exclude_times";
@@ -160,6 +161,10 @@ export default class exampleComponents extends React.Component {
title: "Disable keyboard navigation",
component:
},
+ {
+ title: "Read only datepicker",
+ component:
+ },
{
title: "Clear datepicker input",
component:
diff --git a/docs-site/src/examples/read_only.jsx b/docs-site/src/examples/read_only.jsx
new file mode 100644
index 000000000..7bdde9d02
--- /dev/null
+++ b/docs-site/src/examples/read_only.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+
+export default class ReadOnly extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ startDate: null
+ };
+ }
+
+ handleChange = date => {
+ this.setState({
+ startDate: date
+ });
+ };
+
+ render() {
+ return (
+
+
+
+ {"
+ {" selected={this.state.startDate}"}
+
+ {" onChange={this.handleChange}"}
+
+ {" readOnly={true}"}
+
+ {' placeholderText="This is readOnly"'} />
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/index.jsx b/src/index.jsx
index ff60ccacc..03333d421 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -175,6 +175,7 @@ export default class DatePicker extends React.Component {
preventOpenOnFocus: false,
onYearChange() {},
monthsShown: 1,
+ readOnly: false,
withPortal: false,
shouldCloseOnSelect: true,
showTimeSelect: false,
@@ -270,7 +271,7 @@ export default class DatePicker extends React.Component {
handleFocus = event => {
if (!this.state.preventFocus) {
this.props.onFocus(event);
- if (!this.props.preventOpenOnFocus) {
+ if (!this.props.preventOpenOnFocus && !this.props.readOnly) {
this.setOpen(true);
}
}
@@ -420,7 +421,7 @@ export default class DatePicker extends React.Component {
};
onInputClick = () => {
- if (!this.props.disabled) {
+ if (!this.props.disabled && !this.props.readOnly) {
this.setOpen(true);
}
};
@@ -509,7 +510,10 @@ export default class DatePicker extends React.Component {
};
renderCalendar = () => {
- if (!this.props.inline && (!this.state.open || this.props.disabled)) {
+ if (
+ !this.props.inline &&
+ (!this.state.open || this.props.disabled || this.props.readOnly)
+ ) {
return null;
}
return (
@@ -663,7 +667,9 @@ export default class DatePicker extends React.Component {
return (
diff --git a/test/datepicker_test.js b/test/datepicker_test.js
index 0a209fd21..9e3dd05a5 100644
--- a/test/datepicker_test.js
+++ b/test/datepicker_test.js
@@ -187,6 +187,13 @@ describe("DatePicker", () => {
expect(datePicker.state.open).to.be.false;
});
+ it("should not set open state when it is readOnly and gets clicked", function() {
+ var datePicker = TestUtils.renderIntoDocument();
+ var dateInput = datePicker.input;
+ TestUtils.Simulate.click(ReactDOM.findDOMNode(dateInput));
+ expect(datePicker.state.open).to.be.false;
+ });
+
it("should hide the calendar when clicking a day on the calendar", () => {
var datePicker = TestUtils.renderIntoDocument();
var dateInput = datePicker.input;