Selector and popover are both rendering

Author: joshduck

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["stage-0", "es2015", "react"]
+  "presets": ["es2015", "stage-0", "react"]
 }

.storybook/head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="css/bootstrap.css" />

package.json

@@ -7,14 +7,15 @@
     "build": "babel src --out-dir dist",
     "lint": "prettier --trailing-comma es5 --write  \"{src,stories}/**/*.js\"",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -s ./node_modules/bootstrap/dist -p 6006",
     "build-storybook": "build-storybook"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "prettier": "^0.22.0",
-    "@kadira/storybook": "^2.21.0"
+    "@kadira/storybook": "^2.21.0",
+    "bootstrap": "^3.3.7",
+    "prettier": "^0.22.0"
   },
   "peerDependencies": {
     "react": "^15.4.2",
@@ -25,6 +26,8 @@
     "babel-cli": "^6.23.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.23.0",
-    "babel-preset-stage-0": "^6.22.0"
+    "babel-preset-stage-0": "^6.22.0",
+    "moment": "^2.17.1",
+    "react-bootstrap": "^0.30.8"
   }
 }

src/MonthSelector.js

@@ -0,0 +1,125 @@
+/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */
+import React, { PropTypes } from 'react';
+
+import { Glyphicon, Button } from 'react-bootstrap';
+import moment from 'moment';
+
+const styles = {
+  yearNav: {
+    display: 'flex',
+    alignItems: 'center',
+    margin: '0 1px 5px',
+  },
+
+  yearLabel: {
+    flex: '1',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    margin: '0 2px',
+  },
+
+  yearLabelSpan: {
+    verticalAlign: 'middle',
+  },
+
+  monthContainer: {
+    display: 'inline-block',
+    padding: '1px',
+    width: '25%',
+    boxSizing: 'border-box',
+  },
+
+  monthButton: {
+    lineHeight: '3em',
+    textAlign: 'center',
+    width: '100%',
+  }
+};
+
+class MonthSelector extends React.Component {
+  static propTypes = {
+    onSelect: PropTypes.func.isRequired,
+    month: PropTypes.number.isRequired,
+    year: PropTypes.number.isRequired,
+  };
+
+  constructor(props) {
+    super();
+
+    this.onNextYear = this.onNextYear.bind(this);
+    this.onPrevYear = this.onPrevYear.bind(this);
+    this.onResetYear = this.onResetYear.bind(this);
+
+    this.state = {
+      year: props.year,
+    };
+  }
+
+  onPrevYear() {
+    this.setState({year: this.state.year - 1});
+  }
+
+  onNextYear() {
+    this.setState({year: this.state.year + 1});
+  }
+
+  onSelect(month) {
+    this.props.onSelect({
+      month,
+      year: this.state.year
+    });
+  }
+
+  onResetYear() {
+    this.setState({ year: this.props.year });
+  }
+
+  renderMonth(month) {
+    const selected =
+      this.props.month === month &&
+      this.props.year === this.state.year;
+
+    return (
+      <div style={styles.monthContainer} key={month}>
+        <Button
+          bsStyle={selected ? 'complete' : 'transparent'}
+          style={styles.monthButton}
+          onClick={() => this.onSelect(month)}>
+          {moment().month(month - 1).format('MMM')}
+        </Button>
+      </div>
+    );
+  }
+
+  render() {
+    const months = [];
+    for (var i = 1; i <= 12; i++) {
+      months.push(this.renderMonth(i));
+    }
+
+    return (
+      <div style={styles.root}>
+        <div style={styles.yearNav}>
+          <Button bsSize="small" onClick={this.onPrevYear}>
+            <Glyphicon glyph="chevron-left" />
+          </Button>
+          <Button
+            bsSize="small"
+            bsStyle="transparent"
+            onClick={this.onResetYear}
+            style={styles.yearLabel}>
+            <span style={styles.yearLabelSpan} className="block-header">{this.state.year}</span>
+          </Button>
+          <Button bsSize="small" onClick={this.onNextYear}>
+            <Glyphicon glyph="chevron-right" />
+          </Button>
+        </div>
+        <div style={styles.months}>
+          {months}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MonthSelector;

src/RangePopover.js

@@ -0,0 +1,69 @@
+/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */
+import React, { PropTypes } from 'react';
+import { Button, Popover, OverlayTrigger } from 'react-bootstrap';
+import moment from 'moment';
+
+import MonthSelector from './MonthSelector';
+
+class RangePopover extends React.Component {
+  static propTypes = {
+    onSave: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    start: PropTypes.string.isRequired,
+    end: PropTypes.string.isRequired,
+  };
+
+  constructor(props) {
+    super();
+
+    this.onSetStart = this.onSetStart.bind(this);
+    this.onSetEnd = this.onSetEnd.bind(this);
+    this.onSave = this.onSave.bind(this);
+
+    this.state = {
+      start: { year: 2012, month: 1 },
+      end: { year: 2012, month: 2 }
+    //  start: dateParts(props.start),
+    //  end: dateParts(props.end),
+    };
+  }
+
+  onSetStart(start) {
+    this.setState({ start });
+  }
+
+  onSetEnd(end) {
+    this.setState({ end });
+  }
+
+  onSave() {
+    const { start, end } = this.state;
+    this.props.onSave({
+    //  start: moment().year(start.year).month(start.month - 1).date(1).format(DATE_FORMAT),
+    //  end: moment().year(end.year).month(end.month).date(0).format(DATE_FORMAT),
+    });
+  }
+
+  render() {
+    const { start, end } = this.state;
+
+    return (
+      <Popover {...this.props}>
+        <MonthSelector
+          month={start.month}
+          year={start.year}
+          onSelect={this.onSetStart}
+        />
+        <MonthSelector
+          month={end.month}
+          year={end.year}
+          onSelect={this.onSetEnd}
+        />
+        <Button bsStyle="primary" onClick={this.onSave}>Save</Button>
+        <Button onClick={this.props.onClose}>Close</Button>
+      </Popover>
+    );
+  }
+}
+
+export default RangePopover;

stories/Welcome.js

@@ -1,5 +1,11 @@
 import React from "react";
 import { storiesOf, action, linkTo } from "@kadira/storybook";
 import DatePicker from "../src";
+import RangePopover from "../src/RangePopover";
+import MonthSelector from "../src/MonthSelector";
 
 storiesOf("Date Picker", module).add("with text", () => <DatePicker />);
+storiesOf("Range Popover", module).add("with text", () => <RangePopover />);
+storiesOf("Month Selector", module).add("with text", () => {
+  return <MonthSelector month={1} year={2016} onSelect={result => alert(result.month + '/' + result.year)} />
+});