Add datepicker style

10 years ago · 4c121603ec
9 changed files with 117 additions and 2 deletions
--- a/.gitignore
+++ b/.gitignore
@ -25,3 +25,5 @@ nohup.out
 elasticsearch-*
 config/base.yaml
 _site
+npm-debug.log
+dist
--- a/README.md
+++ b/README.md
@ -21,3 +21,9 @@ $ npm start
 ```bash
 $ npm run deploy
 ```
+
+#### 构建
+
+```bash
+$ webpack
+```
--- a/components/datepicker/demo/basic.md
+++ 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'));
+````
--- a/components/datepicker/index.jsx
+++ 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>
+      );
+  }
+});
--- a/components/datepicker/index.md
+++ b/components/datepicker/index.md
@ -0,0 +1,20 @@
+# Datepicker 日期选择框
+
+- category: Component
+
+---
+
+选择日期。
+
+## 什么时候使用
+
+的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束。
+
+的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束，的凯撒垃圾分类快结束。
+
+
+## 为什么使用
+
+的凯撒垃圾分类的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束。
+
+的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束，的凯撒垃圾分类快结束。
--- a/index.js
+++ b/index.js
@ -0,0 +1,3 @@
+window.antd = {
+  datepicker: require('./components/datepicker')
+};
--- 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",
--- 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">
--- a/webpack.config.js
+++ 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'}
+    ]
+  },
+};