New example showing year navigation (see #52)

examples/src/Examples.js

@@ -13,6 +13,7 @@ import Localized from "./examples/Localized";
 import TouchEvents from "./examples/TouchEvents";
 import Birthdays from "./examples/Birthdays";
 import YearCalendar from "./examples/YearCalendar";
+import YearNavigation from "./examples/YearNavigation";
 
 const history = createHistory();
 
@@ -47,6 +48,11 @@ const EXAMPLES = {
     description: "Make a better interaction on touch devices with the included touch event handlers (as <code>onDayTouchTap</code>) and enabling <a href='https://github.com/zilverline/react-tap-event-plugin'>react-touch-tap-event-plugin</a>.",
     Component: TouchEvents
   },
+  yearNavigation: {
+    title: "Year Navigation",
+    description: "With the <code>captionElement</code> prop, you can use your own element as month caption. In this example, the caption element is a form to navigate between years and months.",
+    Component: YearNavigation
+  },
   birthdays: {
     title: "Birthdays",
     description: "Add custom content to days cells using the <code>renderDay</code> prop.",

examples/src/examples/YearNavigation.js

@@ -0,0 +1,60 @@
+import React from "react";
+import DayPicker, { LocaleUtils } from "react-day-picker";
+
+import "react-day-picker/lib/style.css";
+
+function YearMonthForm({ date, onChange }) {
+
+  const months = LocaleUtils.getMonths();
+
+  const currentYear = (new Date()).getFullYear();
+  const years = [];
+  for (let i = currentYear; i < currentYear + 10; i++) {
+    years.push(i);
+  }
+
+  const handleChange = function(e) {
+    const { year, month } = e.target.form;
+    onChange(new Date(year.value, month.value));
+  }
+
+  return (
+    <form className="DayPicker-Caption">
+      <select name="month" onChange={ handleChange } value={ date.getMonth() }>
+        { months.map((month, i) =>
+          <option key={ i } value={ i }>
+            { month }
+          </option>)
+        }
+      </select>
+      <select name="year" onChange={ handleChange } value={ date.getFullYear() }>
+        { years.map((year, i) =>
+          <option key={ i } value={ year }>
+            { year }
+          </option>)
+        }
+      </select>
+    </form>
+  )
+}
+
+export default class YearNavigation extends React.Component {
+
+  state = {
+    initialMonth: new Date()
+  }
+
+  render() {
+    return (
+      <div className="YearNavigation">
+        <DayPicker
+          initialMonth={ this.state.initialMonth }
+          captionElement={
+            <YearMonthForm onChange={ initialMonth => this.setState({ initialMonth }) } />
+          }
+        />
+      </div>
+    );
+  }
+
+}

examples/src/styles/main.css

@@ -82,14 +82,22 @@ select {
   font-weight: 300;
   border-radius: 0;
   background-color: #FFF;
-  min-width: 70%;
   margin: 0 auto;
-  display: block;
+  width: 70%;
+  display: inline-block;
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iMTJweCIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4wMDAwMDAsIDAuMDAwMDAwKSIgZmlsbD0iIzU2NUE1QyI+CiAgICAgICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMy41IDAgNyA1IDAgNSAiPjwvcG9seWdvbj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsNyBMNyw3IEwzLjUsMTIgTDAsNyBaIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
-  background-position: 94% center;
+  background-position: 98% center;
   background-repeat: no-repeat;
 }
 
+.DayPicker-Caption select {
+  border: 0;
+  width: auto;
+  padding-left: .5rem;
+  margin-top: -0.4rem;
+  margin-right: 3px;
+}
+
 .Header {
   border-bottom: 1px solid #EAEAEA;
   padding: 1em;