Add calendarContainer prop

Author: whatisaphone

docs-site/src/example_components.jsx

@@ -39,6 +39,7 @@ import MultiMonth from "./examples/multi_month";
 import MultiMonthDrp from "./examples/multi_month_drp";
 import MultiMonthInline from "./examples/multi_month_inline";
 import Children from "./examples/children";
+import CalendarContainer from "./examples/calendar_container";
 import Portal from "./examples/portal";
 import InlinePortal from "./examples/inline_portal";
 import RawChange from "./examples/raw_change";
@@ -240,6 +241,10 @@ export default class exampleComponents extends React.Component {
       title: "Children",
       component: <Children />
     },
+    {
+      title: "Calendar container",
+      component: <CalendarContainer />
+    },
     {
       title: "Get raw input value on change",
       component: <RawChange />

docs-site/src/examples/calendar_container.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import DatePicker, {
+  CalendarContainer as OriginalContainer
+} from "react-datepicker";
+import PropTypes from "prop-types";
+import moment from "moment";
+
+export default class CalendarContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      startDate: moment()
+    };
+  }
+
+  handleChange = date => {
+    this.setState({
+      startDate: date
+    });
+  };
+
+  render() {
+    return (
+      <div className="row">
+        <pre className="column example__code">
+          <code className="jsx">
+            {`\
+<DatePicker
+  selected={this.state.startDate}
+  onChange={this.handleChange}
+  calendarContainer={MyContainer}
+/>
+
+function MyContainer({ className, children }) {
+    return (
+      <div style={{ padding: '16px', background: '#216ba5', color: '#fff' }}>
+        <CalendarContainer className={className}>
+          <div style={{ background: '#f0f0f0' }}>What is your favorite day?</div>
+          <div style={{ position: 'relative' }}>
+            {children}
+          </div>
+        </CalendarContainer>
+      </div>
+    );
+  }
+  `}
+          </code>
+        </pre>
+        <div className="column">
+          <DatePicker
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            calendarContainer={MyContainer}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+// eslint-disable-next-line react/no-multi-comp
+function MyContainer({ className, children }) {
+  return (
+    <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
+      <OriginalContainer className={className}>
+        <div style={{ background: "#f0f0f0" }}>What is your favorite day?</div>
+        <div style={{ position: "relative" }}>{children}</div>
+      </OriginalContainer>
+    </div>
+  );
+}
+
+MyContainer.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node
+};

src/calendar.jsx

@@ -6,6 +6,7 @@ import Time from "./time";
 import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
+import CalendarContainer from "./calendar_container";
 import {
   now,
   setMonth,
@@ -51,6 +52,7 @@ export default class Calendar extends React.Component {
     adjustDateOnChange: PropTypes.bool,
     className: PropTypes.string,
     children: PropTypes.node,
+    container: PropTypes.func,
     dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
       .isRequired,
     dayClassName: PropTypes.func,
@@ -293,12 +295,16 @@ export default class Calendar extends React.Component {
   };
 
   formatWeekday = (localeData, day) => {
-      if (this.props.formatWeekDay) {
-          return getFormattedWeekdayInLocale(localeData, day, this.props.formatWeekDay);
-      }
-      return this.props.useWeekdaysShort
-          ? getWeekdayShortInLocale(localeData, day)
-          : getWeekdayMinInLocale(localeData, day);
+    if (this.props.formatWeekDay) {
+      return getFormattedWeekdayInLocale(
+        localeData,
+        day,
+        this.props.formatWeekDay
+      );
+    }
+    return this.props.useWeekdaysShort
+      ? getWeekdayShortInLocale(localeData, day)
+      : getWeekdayMinInLocale(localeData, day);
   };
 
   renderPreviousMonthButton = () => {
@@ -563,20 +569,21 @@ export default class Calendar extends React.Component {
   };
 
   render() {
+    const Container = this.props.container || CalendarContainer;
+
     return (
-      <div
+      <Container
         className={classnames("react-datepicker", this.props.className, {
           "react-datepicker--time-only": this.props.showTimeSelectOnly
         })}
       >
-        <div className="react-datepicker__triangle" />
         {this.renderPreviousMonthButton()}
         {this.renderNextMonthButton()}
         {this.renderMonths()}
         {this.renderTodayButton()}
         {this.renderTimeSection()}
         {this.props.children}
-      </div>
+      </Container>
     );
   }
 }

src/calendar_container.jsx

@@ -0,0 +1,16 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+export default function CalendarContainer({ className, children }) {
+  return (
+    <div className={className}>
+      <div className="react-datepicker__triangle" />
+      {children}
+    </div>
+  );
+}
+
+CalendarContainer.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node
+};

src/index.jsx

@@ -36,6 +36,8 @@ import {
 } from "./date_utils";
 import onClickOutside from "react-onclickoutside";
 
+export { default as CalendarContainer } from "./calendar_container";
+
 const outsideClickIgnoreClass = "react-datepicker-ignore-onclickoutside";
 const WrappedCalendar = onClickOutside(Calendar);
 
@@ -61,6 +63,7 @@ export default class DatePicker extends React.Component {
     autoComplete: PropTypes.string,
     autoFocus: PropTypes.bool,
     calendarClassName: PropTypes.string,
+    calendarContainer: PropTypes.func,
     children: PropTypes.node,
     className: PropTypes.string,
     customInput: PropTypes.element,
@@ -558,6 +561,7 @@ export default class DatePicker extends React.Component {
         excludeTimes={this.props.excludeTimes}
         timeCaption={this.props.timeCaption}
         className={this.props.calendarClassName}
+        container={this.props.calendarContainer}
         yearDropdownItemNumber={this.props.yearDropdownItemNumber}
       >
         {this.props.children}

test/datepicker_test.js

@@ -69,6 +69,17 @@ describe("DatePicker", () => {
     expect(datePicker.instance().calendar).to.exist;
   });
 
+  it("should allow the user to pass a wrapper component for the calendar", () => {
+    var datePicker = mount(<DatePicker calendarContainer={TestWrapper} />);
+
+    let dateInput = datePicker.instance().input;
+    TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput));
+
+    datePicker.update();
+    expect(datePicker.find(".test-wrapper").length).to.equal(1);
+    expect(datePicker.instance().calendar).to.exist;
+  });
+
   it("should pass a custom class to the popper container", () => {
     var datePicker = TestUtils.renderIntoDocument(
       <DatePicker popperClassName="some-class-name" />