From 2dec766f451f2353e8c153edfa85747b569ae44f Mon Sep 17 00:00:00 2001 From: Martijn Russchen Date: Fri, 12 Feb 2016 13:29:12 +0100 Subject: [PATCH 1/4] Today Button --- docs-site/src/example_components.jsx | 5 ++++ docs-site/src/examples/today.jsx | 38 ++++++++++++++++++++++++++++ src/calendar.jsx | 15 +++++++++++ src/datepicker.jsx | 6 +++-- src/stylesheets/datepicker.scss | 9 +++++++ test/calendar_test.js | 13 ++++++++++ 6 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 docs-site/src/examples/today.jsx diff --git a/docs-site/src/example_components.jsx b/docs-site/src/example_components.jsx index 32af68ecd..6fda5db4f 100644 --- a/docs-site/src/example_components.jsx +++ b/docs-site/src/example_components.jsx @@ -20,6 +20,7 @@ import Placement from "./examples/placement"; import DateRange from "./examples/date_range"; import TabIndex from "./examples/tab_index"; import YearDropdown from "./examples/year_dropdown"; +import Today from "./examples/today"; import "react-datepicker/dist/react-datepicker.css"; import "./style.scss"; @@ -106,6 +107,10 @@ export default React.createClass({ { title: "Year dropdown", component: + }, + { + title: "Today button", + component: } ], diff --git a/docs-site/src/examples/today.jsx b/docs-site/src/examples/today.jsx new file mode 100644 index 000000000..7eeda9d8c --- /dev/null +++ b/docs-site/src/examples/today.jsx @@ -0,0 +1,38 @@ +import React from "react"; +import DatePicker from "react-datepicker"; +import moment from "moment"; + +export default React.createClass({ + displayName: "Default", + + getInitialState() { + return { + startDate: null + }; + }, + + handleChange(date) { + this.setState({ + startDate: date + }); + }, + + render() { + return
+ 
+        
+          {"
+              {"showTodayButton={'Vandaag'}"}

+              {"selected={this.state.startDate}"}

+              {"onChange={this.handleChange} />"}
+        
+
+
+ +
+
; + } +}); diff --git a/src/calendar.jsx b/src/calendar.jsx index adb1fa430..ae7850ae5 100644 --- a/src/calendar.jsx +++ b/src/calendar.jsx @@ -128,6 +128,20 @@ var Calendar = React.createClass({ ); }, + renderTodayButton() { + const { moment, onSelect } = this.props; + + if (!this.props.todayButton) { + return; + } + + return ( +
onSelect(moment())}> + {this.props.todayButton} +
+ ); + }, + render() { return (
@@ -156,6 +170,7 @@ var Calendar = React.createClass({ selected={this.props.selected} startDate={this.props.startDate} endDate={this.props.endDate} /> + {this.renderTodayButton()}
); } diff --git a/src/datepicker.jsx b/src/datepicker.jsx index efc42018c..0131e30c5 100644 --- a/src/datepicker.jsx +++ b/src/datepicker.jsx @@ -28,7 +28,8 @@ var DatePicker = React.createClass({ onBlur: React.PropTypes.func, onFocus: React.PropTypes.func, tabIndex: React.PropTypes.number, - filterDate: React.PropTypes.func + filterDate: React.PropTypes.func, + todayButton: React.PropTypes.string }, getDefaultProps() { @@ -124,7 +125,8 @@ var DatePicker = React.createClass({ onClickOutside={this.handleCalendarClickOutside} includeDates={this.props.includeDates} weekStart={this.props.weekStart} - showYearDropdown={this.props.showYearDropdown} />; + showYearDropdown={this.props.showYearDropdown} + todayButton={this.props.todayButton} />; }, renderClearButton() { diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss index 20cd0d601..9b4ef38d9 100644 --- a/src/stylesheets/datepicker.scss +++ b/src/stylesheets/datepicker.scss @@ -295,3 +295,12 @@ top: 50%; } } + +.datepicker__today-button { + background: $background-color; + border-top: 1px solid $border-color; + cursor: pointer; + text-align: center; + font-weight: bold; + padding: 5px 0; +} diff --git a/test/calendar_test.js b/test/calendar_test.js index ab8b5e16a..9b1bdbaa8 100644 --- a/test/calendar_test.js +++ b/test/calendar_test.js @@ -60,4 +60,17 @@ describe("Calendar", function() { var yearReadView = TestUtils.findRenderedComponentWithType(calendar, YearDropdown); expect(yearReadView).to.exist; }); + + it("should not show the today button by default", function() { + var calendar = TestUtils.renderIntoDocument(getCalendar()); + var todayButton = TestUtils.scryRenderedDOMComponentsWithClass(calendar, "datepicker__today-button"); + expect(todayButton.length).to.equal(0); + }); + + it("should show the today button if toggled on", function() { + var calendar = TestUtils.renderIntoDocument(getCalendar({ todayButton: "Vandaag" })); + var todayButton = TestUtils.findRenderedDOMComponentWithClass(calendar, "datepicker__today-button"); + expect(todayButton).to.exist; + expect(todayButton.textContent).to.equal("Vandaag"); + }); }); From 3792ee25a196f061b95cbf5929982cc9db3e75d5 Mon Sep 17 00:00:00 2001 From: Martijn Russchen Date: Fri, 12 Feb 2016 13:31:06 +0100 Subject: [PATCH 2/4] Update docs --- docs/datepicker.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/datepicker.md b/docs/datepicker.md index 55f3d4eb0..e5fa1fe8d 100644 --- a/docs/datepicker.md +++ b/docs/datepicker.md @@ -96,6 +96,11 @@ defaultValue: `[ ]` +### `todayButton` + +type: `string` + + ### `weekStart` type: `string` From ad5f15885b9d12b62aa8ccb81dcc65b334d7b617 Mon Sep 17 00:00:00 2001 From: Martijn Russchen Date: Fri, 12 Feb 2016 13:51:15 +0100 Subject: [PATCH 3/4] Improve example --- docs-site/src/example_components.jsx | 8 ++++---- docs-site/src/examples/today.jsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs-site/src/example_components.jsx b/docs-site/src/example_components.jsx index 6fda5db4f..9864ebbfb 100644 --- a/docs-site/src/example_components.jsx +++ b/docs-site/src/example_components.jsx @@ -52,6 +52,10 @@ export default React.createClass({ title: "Custom class name", component: }, + { + title: "Today button", + component: + }, { title: "Placeholder text", component: @@ -107,10 +111,6 @@ export default React.createClass({ { title: "Year dropdown", component: - }, - { - title: "Today button", - component: } ], diff --git a/docs-site/src/examples/today.jsx b/docs-site/src/examples/today.jsx index 7eeda9d8c..ddd5bf526 100644 --- a/docs-site/src/examples/today.jsx +++ b/docs-site/src/examples/today.jsx @@ -7,7 +7,7 @@ export default React.createClass({ getInitialState() { return { - startDate: null + startDate: moment() }; }, From 5d61bdcb7a2d3d74a8cf8f7976fc72f0ef236926 Mon Sep 17 00:00:00 2001 From: Martijn Russchen Date: Fri, 12 Feb 2016 13:51:24 +0100 Subject: [PATCH 4/4] render correct folder for server --- server.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server.js b/server.js index a7a1e8ca1..12a501518 100644 --- a/server.js +++ b/server.js @@ -21,7 +21,7 @@ app.use(require("webpack-dev-middleware")(compiler, { app.use(require("webpack-hot-middleware")(compiler)); -app.use(express.static("docs")); +app.use(express.static("docs-site")); app.listen(8080, "localhost", function(err) { if (err) {