Merge pull request #350 from Hacker0x01/today

Today Button

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";
@@ -51,6 +52,10 @@ export default React.createClass({
       title: "Custom class name",
       component: <CustomClassName />
     },
+    {
+      title: "Today button",
+      component: <Today />
+    },
     {
       title: "Placeholder text",
       component: <PlaceholderText />

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: moment()
+    };
+  },
+
+  handleChange(date) {
+    this.setState({
+      startDate: date
+    });
+  },
+
+  render() {
+    return <div className="row">
+      <pre className="column example__code">
+        <code className="jsx">
+          {"<DatePicker"}<br />
+              {"showTodayButton={'Vandaag'}"}<br />
+              {"selected={this.state.startDate}"}<br />
+              {"onChange={this.handleChange} />"}
+        </code>
+      </pre>
+      <div className="column">
+        <DatePicker
+          todayButton={"Vandaag"}
+          selected={this.state.startDate}
+          onChange={this.handleChange} />
+      </div>
+    </div>;
+  }
+});

docs/datepicker.md

@@ -96,6 +96,11 @@ defaultValue: `[
 ]`
 
 
+### `todayButton`
+
+type: `string`
+
+
 ### `weekStart`
 
 type: `string`

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) {

src/calendar.jsx

@@ -128,6 +128,20 @@ var Calendar = React.createClass({
     );
   },
 
+  renderTodayButton() {
+    const { moment, onSelect } = this.props;
+
+    if (!this.props.todayButton) {
+      return;
+    }
+
+    return (
+      <div className="datepicker__today-button" onClick={() => onSelect(moment())}>
+        {this.props.todayButton}
+      </div>
+    );
+  },
+
   render() {
     return (
       <div className="datepicker">
@@ -156,6 +170,7 @@ var Calendar = React.createClass({
           selected={this.props.selected}
           startDate={this.props.startDate}
           endDate={this.props.endDate} />
+        {this.renderTodayButton()}
       </div>
     );
   }

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() {

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;
+}

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");
+  });
 });