Merge branch 'dev' of https://github.com/ant-design/ant-design.github.io into dev

Conflicts:
	static/style.css

components/button/index.md

@@ -2,6 +2,7 @@
 
 - category: CSS
 - chinese: 按钮
+- sketch: button.sketch
 
 ---
 

components/datepicker/demo/basic.md

@@ -9,6 +9,6 @@
 var Datepicker = antd.datepicker;
 
 React.render(
-  <Datepicker value="2015-01-01" />
+  <Datepicker value="" />
 , document.getElementById('components-datepicker-demo-basic'));
 ````

components/datepicker/demo/formatter.md

@@ -9,6 +9,6 @@
 var Datepicker = antd.datepicker;
 
 React.render(
-  <Datepicker format="yyyy/MM/dd" />
+  <Datepicker value="2015/01/01" format="yyyy/MM/dd" />
 , document.getElementById('components-datepicker-demo-formatter'));
 ````

components/datepicker/demo/range.md

@@ -1,25 +1,18 @@
 # 范围
 
 - order: 3
-- description: 设置可选日期的范围，用 disabled 方法来定义不可选择时间。
+- description: 设置可选日期的范围，用 disabled 方法来定义不可选择时间。比如不可选择今天之后的日期。
 
 ---
 
 ````jsx
 var Datepicker = antd.datepicker;
-
-var Picker = React.createClass({
-  handleChange: function(value) {
-    console.log(new Date(value.getTime()));
-  },
-  render: function() {
-    return <Datepicker onSelect={this.handleChange} />
-  }
-});
+var disabledDate = function(current, value) {
+  // can not select days after today
+  return current.getTime() > Date.now();
+};
 
 React.render(
-  <Picker />
+  <Datepicker disabled={disabledDate} />
 , document.getElementById('components-datepicker-demo-range'));
 ````
-
-

components/datepicker/demo/time.md

@@ -0,0 +1,15 @@
+# 时间选择
+
+- order: 4
+- description: 准确到秒的时间选择面板。
+
+---
+
+````jsx
+var Datepicker = antd.datepicker;
+
+React.render(
+  <Datepicker showTime={true} format="yyyy/MM/dd HH:mm:ss" />
+, document.getElementById('components-datepicker-demo-time'));
+````
+

components/datepicker/index.jsx

@@ -9,10 +9,8 @@ var DateTimeFormat = require('gregorian-calendar-format');
 
 module.exports = React.createClass({
   getInitialState: function () {
-    var value = new GregorianCalendar(zhCn);
-    value.setTime(Date.now());
     return {
-      value: value
+      value: ''
     };
   },
   getDefaultProps: function () {
@@ -21,11 +19,14 @@ module.exports = React.createClass({
     };
   },
   componentDidMount: function () {
+    var state = {};
     if (this.props.value) {
       var value = new GregorianCalendar(zhCn);
       value.setTime(new Date(this.props.value));
-      this.setState({value: value});
+      state.value = value;
     }
+    state.disabled = this.props.disabled || function() {};
+    this.setState(state);
   },
   handleChange: function() {
     var props = this.props;
@@ -34,19 +35,21 @@ module.exports = React.createClass({
   render: function () {
     var calendar = (
       <Calendar
+      disabledDate={this.state.disabled}
       locale={CalendarLocale}
       orient={['top', 'left']}
-      showClear={true} />
-      );
-      return (
-        <DatePicker
-          trigger={<span className="rc-calendar-picker-icon" />}
-          calendar={calendar}
-          formatter={new DateTimeFormat(this.props.format)}
-          value={this.state.value}
-          onChange={this.props.onSelect}>
-          <input className="rc-calendar-picker-input" />
-        </DatePicker>
-      );
+      showTime={this.props.showTime}
+      showClear={false} />
+    );
+    return (
+      <DatePicker
+        trigger={<span className="rc-calendar-picker-icon" />}
+        calendar={calendar}
+        formatter={new DateTimeFormat(this.props.format)}
+        value={this.state.value}
+        onChange={this.props.onSelect}>
+        <input placeholder="请选择日期" className="rc-calendar-picker-input" />
+      </DatePicker>
+    );
   }
 });

components/datepicker/index.md

@@ -5,33 +5,33 @@
 
 ---
 
-选择日期。
+点击标准输入框，弹出日期选择面板，选择日期和时间，支持键盘操作。
 
-## 何时使用
+## API
 
-当你再次和我说起 青春时的故事
-我正在下着雨的无锡 乞讨着生活的权利
-前一天早晨 我睁开眼已是江南
-他们说柔软的地方 总会发生柔软的事
-那年的舞台上 说谎的人一直歌唱
-大不列颠的广场上 有没有鸽子飞翔
-青春和瞎子一起 变成了哑巴
-今天扯平了我们的当年 分食了理想
+```jsx
+<DatePicker value="2015-01-01" />
+```
 
+- **value** `string`
 
-## 为什么使用
+  初始值，如 `2015-01-01`。
 
-你可知道你的名字解释了我的一生
-碎了满天的往事如烟 与世无争
-当你装满行李 回到故乡
-我的余生 却再也没有北方
+- **format** `string`
 
-有一天我又梦见 那个装满乐器的教室
-你还站在门口 一脸羞涩的表情
-你说这么多年你还没找到 让你心动的男人
-我说去他妈的爱情 都是过眼云烟的东西
+  显示的日期格式，默认为 `yyyy-MM-dd`。
 
-我的余生 都用来寻找北方
+- **showTime** `bollean`
+
+  显示时间选择条，默认为 `false`。
+
+- **disabled** `function`
+
+  不可选择的日期。
+
+- **onSelect** `function`
+
+  选择日期的回调。
 
 <style>
 .rc-calendar-picker-input {

static/tomorrow.css

@@ -34,14 +34,23 @@
   color: #8959a8;
 }
 
+code {
+  background: #f6f6f6;
+  padding: 1px 6px;
+  border-radius: 3px;
+  color: #888;
+  font-size: 90%;
+  border: 1px solid #e9e9e9;
+}
+
 pre code {
   display: block;
   background: white;
-  color: #4d4d4c;
+  color: #666;
   font-family: Menlo, Monaco, Consolas, monospace;
   line-height: 1.5;
   border: 1px solid #e9e9e9;
-  padding: 8px 12px;
+  padding: 10px 15px;
   border-radius: 6px;
-  font-size: 12px;
+  font-size: 14px;
 }

theme/templates/demos.html

@@ -0,0 +1,25 @@
+<h2 class="component-demos">
+  组件演示
+  <i class="iconfont-home icon-all" title="展开全部代码"></i>
+  {%- if post.meta.sketch %}
+  <a class="sketch-link" href="{{ post.meta.sketch }}" target="_blank">
+    <i class="iconfont-home icon-download"></i>
+    Sketch 下载
+  </a>
+  {%- endif %}
+</h2>
+<div class="code-boxes clearfix">
+  {%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
+  <div class="code-boxes-col">
+    {%- for item in items|odd %}
+    {%- set post = item.meta.filepath|parsePost %}
+    {%- include "code.html" %}
+    {%- endfor %}
+  </div>
+  <div class="code-boxes-col">
+    {%- for item in items|even %}
+    {%- set post = item.meta.filepath|parsePost %}
+    {%- include "code.html" %}
+    {%- endfor %}
+  </div>
+</div>

theme/templates/layout.html

@@ -102,25 +102,7 @@
         </h1>
         {{ post.html }}
         {%- if post.meta.template === 'component' %}
-        <h2 class="component-demos">
-          组件演示
-          <i class="iconfont-home icon-all" title="展开全部代码"></i>
-        </h2>
-        <div class="code-boxes clearfix">
-          {%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
-          <div class="code-boxes-col">
-            {%- for item in items|odd %}
-            {%- set post = item.meta.filepath|parsePost %}
-            {%- include "code.html" %}
-            {%- endfor %}
-          </div>
-          <div class="code-boxes-col">
-            {%- for item in items|even %}
-            {%- set post = item.meta.filepath|parsePost %}
-            {%- include "code.html" %}
-            {%- endfor %}
-          </div>
-        </div>
+        {%- include "demos.html" %}
         {%- endif %}
       </article>
     </section>