diff --git a/.gitignore b/.gitignore
index 095d7ac025..cb09545f2f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,5 @@ nohup.out
 elasticsearch-*
 config/base.yaml
 _site
+npm-debug.log
+dist
diff --git a/README.md b/README.md
index b64b770379..ec7f3468a7 100644
--- a/README.md
+++ b/README.md
@@ -21,3 +21,9 @@ $ npm start
 ```bash
 $ npm run deploy
 ```
+
+#### 构建
+
+```bash
+$ webpack
+```
diff --git a/components/datepicker/demo/basic.md b/components/datepicker/demo/basic.md
new file mode 100644
index 0000000000..18c7607007
--- /dev/null
+++ b/components/datepicker/demo/basic.md
@@ -0,0 +1,13 @@
+# 基本
+
+- description: 最简单的用法
+
+---
+
+````jsx
+var Datepicker = antd.datepicker;
+
+React.render(
+  <Datepicker />
+, document.getElementById('components-datepicker-demo-basic'));
+````
diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx
new file mode 100644
index 0000000000..a11b7ce278
--- /dev/null
+++ b/components/datepicker/index.jsx
@@ -0,0 +1,34 @@
+require('rc-calendar/assets/index.css');
+var React = require('react');
+var Calendar = require('rc-calendar');
+var DatePicker = Calendar.Picker;
+var GregorianCalendar = require('gregorian-calendar');
+var zhCn = require('gregorian-calendar/lib/locale/zh-cn');
+
+module.exports = React.createClass({
+  getInitialState: function () {
+    var value = new GregorianCalendar(zhCn);
+    value.setTime(Date.now());
+    return {
+      time: Date.now(),
+      showTime: true,
+      value: value
+    };
+  },
+  render: function () {
+    var state = this.state;
+    var calendar = (
+      <Calendar
+      orient={['top', 'left']}
+      showTime={this.state.showTime} showClear={true} />
+      );
+      return (
+        <DatePicker
+          trigger={<span className="datepicker-icon" />}
+          formatter={this.props.formatter} calendar={calendar}
+          value={this.state.value} onChange={this.handleChange}>
+          <input type="text" className="datepicker-input" />
+        </DatePicker>
+      );
+  }
+});
diff --git a/components/datepicker/index.md b/components/datepicker/index.md
new file mode 100644
index 0000000000..8e47ee454e
--- /dev/null
+++ b/components/datepicker/index.md
@@ -0,0 +1,20 @@
+# Datepicker 日期选择框
+
+- category: Component
+
+---
+
+选择日期。
+
+## 什么时候使用
+
+的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束。
+
+的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束，的凯撒垃圾分类快结束。
+
+
+## 为什么使用
+
+的凯撒垃圾分类的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束。
+
+的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束，的凯撒垃圾分类快结束。
diff --git a/index.js b/index.js
new file mode 100644
index 0000000000..7d9e413008
--- /dev/null
+++ b/index.js
@@ -0,0 +1,3 @@
+window.antd = {
+  datepicker: require('./components/datepicker')
+};
diff --git a/package.json b/package.json
index 02d7f1e3ea..1d46a487d9 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,18 @@
     "url": "https://github.com/ant-design/ant-design.github.io/issues"
   },
   "dependencies": {
+    "gregorian-calendar": "~3.0.0",
+    "rc-calendar": "~3.3.0"
+  },
+  "devDependencies": {
+    "css-loader": "~0.13.1",
     "gh-pages-cli": "~0.2.0",
+    "json-loader": "~0.5.1",
+    "jsx-loader": "~0.13.2",
     "lodash": "~3.8.0",
-    "nico-jsx": "~0.5.3"
+    "nico-jsx": "~0.5.3",
+    "style-loader": "~0.12.2",
+    "webpack": "~1.9.7"
   },
   "scripts": {
     "build": "npm run clean && nico build",
diff --git a/theme/templates/layout.html b/theme/templates/layout.html
index 3260e72e04..86da914a1c 100644
--- a/theme/templates/layout.html
+++ b/theme/templates/layout.html
@@ -13,9 +13,10 @@
   <link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
   <link rel="stylesheet" href="/static/tomorrow.css">
   <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
-  <script src="/static/script.js"></script>
   <!-- react -->
   <script src="https://t.alipayobjects.com/images/T12TdfXlpbXXXXXXXX.js"></script>
+  <script src="/static/script.js"></script>
+  <script src="/dist/index.js"></script>
 </head>
 <body class="{%- if post.filepath === 'README.md' %}index-page{%- endif %}">
   <header id="header">
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000000..2824b816f1
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,27 @@
+var webpack = require('webpack');
+
+module.exports = {
+  entry: './index.js',
+
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+  },
+
+  output: {
+    path: 'dist',
+    filename: 'index.js'
+  },
+
+  externals: {
+    react: "React"
+  },
+
+  module: {
+    loaders: [
+      {test: /\.jsx$/, loader: 'jsx-loader?harmony'},
+      {test: /\.js$/, loader: 'jsx-loader?harmony'},
+      {test: /\.json$/, loader: 'json-loader'},
+      {test: /\.css/, loader: 'style!css'}
+    ]
+  },
+};