Split examples to make them a bit more clear

examples/src/Examples.js

@@ -5,13 +5,14 @@ import { createHistory } from "history";
 import Prism from "./vendors/prism";
 import "./vendors/prism.css";
 
-import SimpleCalendar from "./examples/SimpleCalendar";
-import SelectableDay from "./examples/SelectableDay";
+import Birthdays from "./examples/Birthdays";
+import DisabledDays from "./examples/DisabledDays";
 import InputField from "./examples/InputField";
-import Range from "./examples/Range";
 import Localized from "./examples/Localized";
+import Range from "./examples/Range";
+import SelectableDay from "./examples/SelectableDay";
+import SimpleCalendar from "./examples/SimpleCalendar";
 import TouchEvents from "./examples/TouchEvents";
-import Birthdays from "./examples/Birthdays";
 import YearCalendar from "./examples/YearCalendar";
 import YearNavigation from "./examples/YearNavigation";
 
@@ -28,9 +29,14 @@ const EXAMPLES = {
     description: "This example uses the <code>modifiers</code> prop and <a href='http://www.gpbl.org/react-day-picker/docs/DateUtils.html'>DateUtils</a> to select a day. Note how the selected day is stored in the parent component's state.",
     Component: SelectableDay
   },
+  disabled: {
+    title: "Disabled Days",
+    description: "This example extends the <a href='#selectable'>previous one</a> with a <code>disabled</code> modifier which avoid the user selecting a day in the past. Note that the <code>handleDayClick</code> method does not set the component’s state when a day has been marked as disabled.<br>It also uses the <code>enableOutsideDays</code> prop to display the days outside the current month.",
+    Component: DisabledDays
+  },
   input: {
     title: "Input Field",
-    description: "Binding the calendar with an input field: users can change the field’s value or interact with the calendar, while both stay in sync.<br>In this example, past days are disabled with a <code>disabled</code> modifier. Setting <code>showOutsideDays</code>, it displays days not belonging to the month.",
+    description: "Binding the calendar with an input field: the user can both change the field’s value or interact with the calendar.",
     Component: InputField
   },
   range: {
@@ -40,19 +46,19 @@ const EXAMPLES = {
   },
   localized: {
     title: "Localized Calendar",
-    description: "This calendar is localized using moment.js. <a href='http://www.gpbl.org/react-day-picker/docs/LocalizationMoment.html'>Read more</a>",
+    description: "This calendar is localized using moment.js. <a href='http://www.gpbl.org/react-day-picker/docs/LocalizationMoment.html'>Read more about localization</a>.",
     Component: Localized
   },
-  touch: {
-    title: "Touch Events",
-    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
   },
+  touch: {
+    title: "Touch Events",
+    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
+  },
   birthdays: {
     title: "Birthdays",
     description: "Add custom content to days cells using the <code>renderDay</code> prop.",

examples/src/examples/DisabledDays.js

@@ -0,0 +1,32 @@
+import React from "react";
+import DayPicker, { DateUtils } from "react-day-picker";
+
+import "react-day-picker/lib/style.css";
+
+export default class DisabledDays extends React.Component {
+
+  state = {
+    selectedDay: null
+  }
+
+  handleDayClick(e, day, modifiers) {
+    if (modifiers.indexOf("disabled") > -1) {
+      console.log("User clicked a disabled day.");
+      return;
+    }
+    this.setState({
+      selectedDay: day
+    });
+  }
+
+  render() {
+
+    // Add the `selected` modifier to the cell of the clicked day
+    const modifiers = {
+      disabled: DateUtils.isPastDay,
+      selected: day => DateUtils.isSameDay(this.state.selectedDay, day)
+    };
+
+    return <DayPicker enableOutsideDays modifiers={ modifiers } onDayClick={ this.handleDayClick.bind(this) } />;
+  }
+}

examples/src/examples/InputField.js

@@ -13,24 +13,22 @@ export default class InputField extends React.Component {
   }
 
   handleInputChange(e) {
-
     const { value } = e.target;
-    let { month } = this.state;
 
     // Change the current month only if the value entered by the user is a valid
     // date, according to the `L` format
     if (moment(value, "L", true).isValid()) {
-      month = moment(value, "L").toDate();
+      this.setState({
+        month: moment(value, "L").toDate(),
+        value
+      }, this.showCurrentDate);
+    }
+    else {
+      this.setState({ value }, this.showCurrentDate);
     }
-
-    this.setState({ value, month }, this.showCurrentDate);
-
   }
 
-  handleDayClick(e, day, modifiers) {
-    if (modifiers.indexOf("disabled") > -1) {
-      return;
-    }
+  handleDayClick(e, day) {
     this.setState({
       value: moment(day).format("L"),
       month: day
@@ -59,10 +57,8 @@ export default class InputField extends React.Component {
 
         <DayPicker
           ref="daypicker"
-          enableOutsideDays
           initialMonth={ this.state.month }
           modifiers={{
-            disabled: DateUtils.isPastDay,
             selected: day => DateUtils.isSameDay(selectedDay, day)
           }}
           onDayClick={ this.handleDayClick.bind(this) }

examples/src/examples/SelectableDay.js

@@ -31,7 +31,7 @@ export default class SelectableDay extends React.Component {
     };
 
     return (
-      <div className="SelectableDayExample">
+      <div>
         <DayPicker
           modifiers={ modifiers }
           onDayClick={ this.handleDayClick.bind(this) }

examples/webpack.config.js

@@ -37,7 +37,18 @@ module.exports = {
 
     new webpack.optimize.UglifyJsPlugin({
       mangle: {
-        except: ["Birthdays", "InputField", "Localized", "Range", "SelectableDay", "SimpleCalendar", "YearCalendar", "TouchEvents"]
+        except: [
+          "Birthdays",
+          "DisabledDays",
+          "InputField",
+          "Localized",
+          "Range",
+          "SelectableDay",
+          "SimpleCalendar",
+          "TouchEvents",
+          "YearCalendar",
+          "YearNavigation"
+        ]
       },
       compress: {
         warnings: false