diff --git a/example.html b/example.html
index 84a7b86863..d33811b6b2 100644
--- a/example.html
+++ b/example.html
@@ -11,33 +11,41 @@ <h1>ReactJS DatePicker Example</h1>
 
     <div id="datepicker-container"></div>
 
-    <pre id="log"></pre>
-
     <script type="text/javascript">
       var container = document.querySelector('#datepicker-container');
-      var log = document.querySelector('#log');
       var exampleComponent = React.createClass({
         displayName: 'exampleComponent',
 
         getInitialState: function() {
           return {
-            date: moment()
+            start_date: moment(),
+            end_date: moment()
           };
         },
 
-        handleChange: function(date) {
+        handleStartDateChange: function(date) {
           this.setState({
-            date: date
+            start_date: date
           });
+        },
 
-          log.innerText = "You've selected: " + date.format();
+        handleEndDateChange: function(date) {
+          this.setState({
+            end_date: date
+          });
         },
 
         render: function() {
-          return DatePicker({
-            selected: this.state.date,
-            onChange: this.handleChange
-          });
+          return React.DOM.div({}, [
+            DatePicker({
+              selected: this.state.start_date,
+              onChange: this.handleStartDateChange
+            }),
+            DatePicker({
+              selected: this.state.end_date,
+              onChange: this.handleEndDateChange
+            })
+          ]);
         }
       })
 
diff --git a/react-datepicker.js b/react-datepicker.js
index 1d71165574..6f72663147 100644
--- a/react-datepicker.js
+++ b/react-datepicker.js
@@ -36,6 +36,10 @@ var Calendar = React.createClass({displayName: 'Calendar',
     return this.state.date.mapWeeksInMonth(this.renderWeek);
   },
 
+  handleDayClick: function(day) {
+    this.props.onSelect(day);
+  },
+
   renderWeek: function(weekStart, key) {
     if(! weekStart.weekInMonth(this.state.date)) {
       return;
@@ -54,7 +58,7 @@ var Calendar = React.createClass({displayName: 'Calendar',
         {key:key,
         day:day,
         date:this.state.date,
-        onSelect:this.props.onSelect,
+        onClick:this.handleDayClick.bind(this, day),
         selected:new DateUtil(this.props.selected)} )
     );
   },
@@ -65,7 +69,7 @@ var Calendar = React.createClass({displayName: 'Calendar',
 
   render: function() {
     return (
-      React.DOM.div( {className:"datepicker-calendar", onClick:this.props.onClick}, 
+      React.DOM.div( {className:"datepicker-calendar", onMouseDown:this.props.onMouseDown}, 
         React.DOM.div( {className:"datepicker-calendar-triangle"}),
         React.DOM.div( {className:"datepicker-calendar-header"}, 
           React.DOM.a( {className:"datepicker-calendar-header-navigation-left",
@@ -125,31 +129,26 @@ var DatePicker = React.createClass({displayName: 'DatePicker',
   },
 
   handleBlur: function() {
-    // Reset the value of this._shouldBeFocussed to it's default
-    this._shouldBeFocussed = false;
+    this.setState({
+      focus: !! this._shouldBeFocussed
+    });
 
-    // If state.focus is still true, ignore the browser's blur
-    if (this.state.focus) {
-      this.refs.input.getDOMNode().focus();
+    if (!! this._shouldBeFocussed) {
+      // Firefox doesn't support immediately focussing inside of blur
+      setTimeout(function() {
+        this.refs.input.getDOMNode().focus();
+      }.bind(this), 0);
     }
 
-    // Give the browser some time to execute the possible click handlers
-    //   (for when the user clicks inside of the calendar)
-    setTimeout(function() {
-      // Set the correct value for state.focus
-      this.setState({
-        focus: this._shouldBeFocussed
-      });
-    }.bind(this), 100);
+    // Reset the value of this._shouldBeFocussed to it's default
+    this._shouldBeFocussed = false;
   },
 
-  handleCalendarClick: function() {
+  handleCalendarMouseDown: function() {
     this._shouldBeFocussed = true;
   },
 
   handleSelect: function(date) {
-    this._shouldBeFocussed = true;
-
     this.setSelected(date);
 
     setTimeout(function(){
@@ -172,7 +171,7 @@ var DatePicker = React.createClass({displayName: 'DatePicker',
           Calendar(
             {selected:this.props.selected,
             onSelect:this.handleSelect,
-            onClick:this.handleCalendarClick} )
+            onMouseDown:this.handleCalendarMouseDown} )
         )
       );
     }
@@ -221,12 +220,6 @@ module.exports = DatePicker;
 /** @jsx React.DOM */
 
 var Day = React.createClass({displayName: 'Day',
-  handleClick: function(event) {
-    this.props.onSelect(this.props.day);
-
-    event.stopPropagation();
-  },
-
   render: function() {
     classes = React.addons.classSet({
       'datepicker-calendar-day': true,
@@ -236,7 +229,7 @@ var Day = React.createClass({displayName: 'Day',
     });
 
     return (
-      React.DOM.div( {className:classes, onClick:this.handleClick}, 
+      React.DOM.div( {className:classes, onClick:this.props.onClick}, 
         this.props.day.day()
       )
     );
diff --git a/src/calendar.js b/src/calendar.js
index ce0a897c4f..15550b9149 100644
--- a/src/calendar.js
+++ b/src/calendar.js
@@ -35,6 +35,10 @@ var Calendar = React.createClass({
     return this.state.date.mapWeeksInMonth(this.renderWeek);
   },
 
+  handleDayClick: function(day) {
+    this.props.onSelect(day);
+  },
+
   renderWeek: function(weekStart, key) {
     if(! weekStart.weekInMonth(this.state.date)) {
       return;
@@ -53,7 +57,7 @@ var Calendar = React.createClass({
         key={key}
         day={day}
         date={this.state.date}
-        onSelect={this.props.onSelect}
+        onClick={this.handleDayClick.bind(this, day)}
         selected={new DateUtil(this.props.selected)} />
     );
   },
@@ -64,7 +68,7 @@ var Calendar = React.createClass({
 
   render: function() {
     return (
-      <div className="datepicker-calendar" onClick={this.props.onClick}>
+      <div className="datepicker-calendar" onMouseDown={this.props.onMouseDown}>
         <div className="datepicker-calendar-triangle"></div>
         <div className="datepicker-calendar-header">
           <a className="datepicker-calendar-header-navigation-left"
diff --git a/src/datepicker.js b/src/datepicker.js
index d633d39770..9cc54f79b7 100644
--- a/src/datepicker.js
+++ b/src/datepicker.js
@@ -25,31 +25,26 @@ var DatePicker = React.createClass({
   },
 
   handleBlur: function() {
-    // Reset the value of this._shouldBeFocussed to it's default
-    this._shouldBeFocussed = false;
+    this.setState({
+      focus: !! this._shouldBeFocussed
+    });
 
-    // If state.focus is still true, ignore the browser's blur
-    if (this.state.focus) {
-      this.refs.input.getDOMNode().focus();
+    if (!! this._shouldBeFocussed) {
+      // Firefox doesn't support immediately focussing inside of blur
+      setTimeout(function() {
+        this.refs.input.getDOMNode().focus();
+      }.bind(this), 0);
     }
 
-    // Give the browser some time to execute the possible click handlers
-    //   (for when the user clicks inside of the calendar)
-    setTimeout(function() {
-      // Set the correct value for state.focus
-      this.setState({
-        focus: this._shouldBeFocussed
-      });
-    }.bind(this), 100);
+    // Reset the value of this._shouldBeFocussed to it's default
+    this._shouldBeFocussed = false;
   },
 
-  handleCalendarClick: function() {
+  handleCalendarMouseDown: function() {
     this._shouldBeFocussed = true;
   },
 
   handleSelect: function(date) {
-    this._shouldBeFocussed = true;
-
     this.setSelected(date);
 
     setTimeout(function(){
@@ -72,7 +67,7 @@ var DatePicker = React.createClass({
           <Calendar
             selected={this.props.selected}
             onSelect={this.handleSelect}
-            onClick={this.handleCalendarClick} />
+            onMouseDown={this.handleCalendarMouseDown} />
         </Popover>
       );
     }
diff --git a/src/day.js b/src/day.js
index 8cebb5d249..1cb927b8fb 100644
--- a/src/day.js
+++ b/src/day.js
@@ -1,12 +1,6 @@
 /** @jsx React.DOM */
 
 var Day = React.createClass({
-  handleClick: function(event) {
-    this.props.onSelect(this.props.day);
-
-    event.stopPropagation();
-  },
-
   render: function() {
     classes = React.addons.classSet({
       'datepicker-calendar-day': true,
@@ -16,7 +10,7 @@ var Day = React.createClass({
     });
 
     return (
-      <div className={classes} onClick={this.handleClick}>
+      <div className={classes} onClick={this.props.onClick}>
         {this.props.day.day()}
       </div>
     );