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;