diff --git a/examples/basic/index.js b/examples/basic/index.js
index a76c9a0..05c87e6 100644
--- a/examples/basic/index.js
+++ b/examples/basic/index.js
@@ -7,7 +7,7 @@ import DatePicker from '../../lib/index';
 (function main() {
     class App extends React.Component {
         state = {
-            time: new Date(2016, 8, 16, 8, 20, 57),
+            time: new Date(),
             isOpen: false,
             theme: 'default',
         }
@@ -75,6 +75,7 @@ import DatePicker from '../../lib/index';
                     <DatePicker
                         value={this.state.time}
                         dateSteps={[1, 1, 5]}
+                        max={new Date()}
                         dateFormat={['YYYY', ['MM', (month) => monthMap[month]], 'DD']}
                         theme={this.state.theme}
                         isOpen={this.state.isOpen}
diff --git a/lib/DatePicker.js b/lib/DatePicker.js
index 6e8ee28..ade5d8a 100644
--- a/lib/DatePicker.js
+++ b/lib/DatePicker.js
@@ -50,6 +50,22 @@ class DatePicker extends Component<void, Props, State> {
         }
     }
 
+    /**
+     * When you swipe two datepickeritems at the same time.
+     * Prevent dates from going out.
+     */
+    componentDidUpdate() {
+        const value = this.state.value;
+        const { min, max } = this.props;
+        if (value.getTime() > max.getTime()) {
+            this.setState({ value: max });
+        }
+
+        if (value.getTime() < min.getTime()) {
+            this.setState({ value: min });
+        }
+    }
+        
     /**
      * Optimization component, Prevents unnecessary rendering
      * Only props or state change or value before re-rendering
diff --git a/webpack.config.js b/webpack.config.js
index 7eabfa1..0f9ffcf 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,6 +21,7 @@ module.exports = {
     devtool: 'eval-source-map',
     devServer: {
         historyApiFallback: true,
+        disableHostCheck: true,
         hot: true,
         inline: true,
         host: '0.0.0.0',