diff --git a/build/webpack.config.js b/build/webpack.config.js
index 1d311de95..3d79653a2 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -29,7 +29,7 @@ module.exports = {
   },
   output: {
     path: './docs/build/',
-    publicPath: 'docs/build/',
+    publicPath: '/docs/build/',
     filename: '[name].js'
   },
   resolve: {
diff --git a/components.json b/components.json
index 30f219f4b..da3f772d4 100644
--- a/components.json
+++ b/components.json
@@ -34,5 +34,6 @@
   "toast": "./packages/toast/index.js",
   "uploader": "./packages/uploader/index.js",
   "swipe": "./packages/swipe/index.js",
-  "swipe-item": "./packages/swipe-item/index.js"
+  "swipe-item": "./packages/swipe-item/index.js",
+  "datetime-picker": "./packages/datetime-picker/index.js"
 }
diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue
index aa0233e2e..577f4956d 100644
--- a/docs/ExamplesDocsApp.vue
+++ b/docs/ExamplesDocsApp.vue
@@ -3,6 +3,7 @@
     <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
     <div class="page-content">
       <router-view></router-view>
+      <footer-nav></footer-nav>
     </div>
   </div>
 </template>
@@ -22,93 +23,4 @@ export default {
 
 <style lang="css">
   @import './assets/docs.css';
-
-  .page-container {
-    height: 100%;
-    overflow: scroll;
-
-    h2 {
-      font-size: 28px;
-      color: #1f2d3d;
-      margin: 20px 0;
-      line-height: 40px;
-    }
-
-    section > h3 {
-      font-size: 22px;
-      margin: 23px 0;
-    }
-
-    h2, h3, h4, h5 {
-      font-weight: normal;
-      color: #1f2f3d;
-
-      &:hover a {
-        opacity: .4;
-      }
-
-      a {
-        float: left;
-        margin-left: -20px;
-        opacity: 0;
-        cursor: pointer;
-
-        &:hover {
-          opacity: .4;
-        }
-      }
-    }
-  }
-
-  .page-content {
-    box-sizing: border-box;
-    overflow: auto;
-    height: inherit;
-    margin-left: 320px;
-    padding: 0 20px;
-
-    section > p {
-      font-size: 14px;
-      color: #5e6d82;
-      margin: 14px 0;
-    }
-
-     p > code {
-      background-color: #eee;
-      padding: 2px 4px;
-      color: #26a2ff;
-    }
-  }
-
-  .demo-page {
-    width: 100%;
-    border: 5px solid #f5f5f5;
-    height: 580px;
-  }
-
-  .table {
-    border-collapse: collapse;
-    width: 100%;
-    background-color: #fff;
-    color: #5e6d82;
-    font-size: 14px;
-    margin-bottom: 45px;
-
-    th {
-      text-align: left;
-      border-top: 1px solid #eaeefb;
-      border-bottom: 1px solid #eaeefb;
-      background-color: #eff2f7;
-      padding: 10px;
-
-      &:first-child {
-        padding-left: 10px;
-      }
-    }
-
-    td {
-      border-bottom: 1px solid #eaeefb;
-      padding: 10px;
-    }
-  }
 </style>
diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index 7f9ccf66c..abd7fdff6 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -18,16 +18,10 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 
-html {
-  height: 100%;
-}
-
 body {
   font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-  overflow: hidden;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
-  height: 100%;
 }
 
 a {
@@ -42,7 +36,7 @@ button, input, select, textarea {
   color: inherit;
 }
 
-ul {
+ul, ol {
   list-style: none;
 }
 
@@ -71,3 +65,115 @@ ul {
   }
 }
 
+.page-content {
+  box-sizing: border-box;
+  overflow: auto;
+  margin-left: 220px;
+  padding: 0 20px;
+  border-left: 1px solid #E5E5E5;
+
+  section {
+    > h2 {
+      font-size: 36px;
+      color: #333;
+      margin: 20px 0;
+      line-height: 1.5;
+    }
+
+    > h3 {
+      font-size: 30px;
+      color: #333;
+      margin: 23px 0;
+    }
+
+    > p {
+      font-size: 14px;
+      line-height: 20px;
+      color: #666;
+      margin: 14px 0;
+    }
+
+    > ul li,
+    > ol li {
+      color: #666;
+      font-size: 14px;
+      line-height: 20px;
+      margin: 10px 0 10px 20px;
+      padding-left: 20px;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        box-sizing: border-box;
+        border: 2px solid #999;
+        border-radius: 50%;
+        top: 6px;
+        left: 0;
+      }
+
+      li {
+        margin-left: 0;
+      }
+    }
+  }
+
+  h2, h3, h4, h5 {
+    font-weight: normal;
+    color: #1f2f3d;
+
+    &:hover a {
+      opacity: .4;
+    }
+
+    a {
+      float: left;
+      margin-left: -20px;
+      opacity: 0;
+      cursor: pointer;
+
+      &:hover {
+        opacity: .4;
+      }
+    }
+  }
+
+  p > code,
+  .table code,
+  li > code {
+    background-color: #F2F2F2;
+    display: inline-block;
+    border: 1px solid #E5E5E5;
+    padding: 2px 4px;
+    color: #333;
+    margin: 0 3px;
+  }
+}
+
+.table {
+  border-collapse: collapse;
+  width: 100%;
+  background-color: #fff;
+  color: #333;
+  font-size: 14px;
+  margin-bottom: 45px;
+
+  th {
+    text-align: left;
+    border: 1px solid #E5E5E5;
+    background-color: #F2F2F2;
+    padding: 10px;
+
+    &:first-child {
+      padding-left: 10px;
+    }
+  }
+
+  td {
+    border: 1px solid #E5E5E5;
+    padding: 10px;
+  }
+}
+
diff --git a/docs/components/footer-nav.vue b/docs/components/footer-nav.vue
new file mode 100644
index 000000000..dc57da7f7
--- /dev/null
+++ b/docs/components/footer-nav.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="footer-nav">
+    <a
+      href="javascript:void(0)"
+      v-if="leftNav"
+      class="footer-nav__link footer-nav__left"
+      @click="handleNavClick('prev')">
+      <zan-icon name="arrow"></zan-icon>
+      {{ leftNav.title }}
+    </a>
+    <a
+      href="javascript:void(0)"
+      v-if="rightNav"
+      class="footer-nav__link footer-nav__right"
+      @click="handleNavClick('next')">
+      <zan-icon name="arrow"></zan-icon>
+      {{ rightNav.title }}
+    </a>
+  </div>
+</template>
+
+<script>
+import navConfig from '../nav.config.json';
+
+export default {
+  data() {
+    return {
+      currentPath: null,
+      nav: [],
+      leftNav: null,
+      rightNav: null
+    };
+  },
+
+  watch: {
+    '$route.path'() {
+      this.setNav();
+      this.updateNav();
+    }
+  },
+
+  methods: {
+    setNav() {
+      let nav = navConfig['zh-CN'];
+      for (let i = 0; i < nav.length; i++) {
+        let navItem = nav[i];
+        if (!navItem.groups) {
+          this.nav.push(nav[i]);
+        } else {
+          for (let j = 0; j < navItem.groups.length; j++) {
+            this.nav = this.nav.concat(navItem.groups[j].list);
+          }
+        }
+      }
+    },
+
+    updateNav() {
+      let baseUrl = '/component';
+      let currentIndex;
+
+      this.currentPath = this.$route.path.slice(baseUrl.length);
+
+      for (let i = 0, len = this.nav.length; i < len; i++) {
+        if (this.nav[i].path === this.currentPath) {
+          currentIndex = i;
+          break;
+        }
+      }
+      this.leftNav = this.nav[currentIndex - 1];
+      this.rightNav = this.nav[currentIndex + 1];
+    },
+
+    handleNavClick(direction) {
+      this.$router.push(`/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
+    }
+  },
+
+  created() {
+    this.setNav();
+    this.updateNav();
+  }
+};
+</script>
+
+<style>
+@component-namespace footer {
+  @b nav {
+    padding: 24px 0;
+    font-size: 30px;
+    overflow: hidden;
+
+    @e link {
+      color: #3388FF;
+      overflow: hidden;
+      padding-top: 35px;
+      position: relative;
+
+      .zan-icon {
+        width: 20px;
+        display: block;
+        font-size: 12px;
+        line-height: 20px;
+        border: 2px solid #3388FF;
+        border-radius: 50%;
+        text-align: center;
+        margin-bottom: 10px;
+        position: absolute;
+        top: 0;
+      }
+    }
+
+    @e left {
+      float: left;
+
+      .zan-icon {
+        transform: rotate(180deg);
+        left: 0;
+      }
+    }
+
+    @e right {
+      float: right;
+
+      .zan-icon {
+        right: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/docs/components/side-nav.vue b/docs/components/side-nav.vue
index 17a1c0f6d..78996d7c8 100644
--- a/docs/components/side-nav.vue
+++ b/docs/components/side-nav.vue
@@ -43,32 +43,24 @@
 </template>
 
 <script>
-  export default {
-    props: {
-      data: Array,
-      base: {
-        type: String,
-        default: ''
-      }
-    },
-    data() {
-      return {
-        highlights: [],
-        navState: []
-      };
+export default {
+  props: {
+    data: Array,
+    base: {
+      type: String,
+      default: ''
     }
-  };
+  }
+};
 </script>
 
 <style lang="css">
   .side-nav {
-    width: 320px;
+    width: 220px;
     box-sizing: border-box;
-    padding: 40px 20px;
+    padding: 40px 0;
     float: left;
-    background: #f9fafb;
-    height: inherit;
-    overflow: auto;
+    background-color: #fff;
 
     li {
       list-style: none;
@@ -82,7 +74,7 @@
     .nav-item {
       a {
         font-size: 16px;
-        color: #5e6d82;
+        color: #333;
         line-height: 40px;
         height: 40px;
         margin: 0;
@@ -91,9 +83,11 @@
         display: block;
         position: relative;
         transition: all .3s;
+        padding: 0 20px;
 
         &.active {
-          color: #20a0ff;
+          color: #3388FF;
+          background-color: #F2F2F2;
         }
       }
       .nav-item {
@@ -101,20 +95,19 @@
           display: block;
           height: 40px;
           line-height: 40px;
-          font-size: 13px;
-          padding-left: 24px;
-
+          font-size: 14px;
+          padding-left: 44px;
 
           &:hover {
-            color: #20a0ff;
+            color: #3388FF;
           }
         }
       }
     }
     .nav-group__title {
       font-size: 12px;
-      color: #99a9bf;
-      padding-left: 8px;
+      color: #666;
+      padding-left: 28px;
       line-height: 26px;
       margin-top: 10px;
     }
diff --git a/docs/examples-docs/actionsheet.md b/docs/examples-docs/actionsheet.md
index 9918c4945..ef931e668 100644
--- a/docs/examples-docs/actionsheet.md
+++ b/docs/examples-docs/actionsheet.md
@@ -100,11 +100,11 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| actions | 行动按钮数组 | Array  | [] |    |
-| title | 标题 | String  |  |    |
-| cancelText | 取消按钮文案 | String  |  |    |
-| overlay | 是否显示遮罩 | Boolean  |  |    |
-| closeOnClickOverlay | 点击遮罩是否关闭ActionSheet | Boolean  |  |    |
+| actions | 行动按钮数组 | `Array`  | `[]` |    |
+| title | 标题 | `String`  |  |    |
+| cancelText | 取消按钮文案 | `String`  |  |    |
+| overlay | 是否显示遮罩 | `Boolean`  |  |    |
+| closeOnClickOverlay | 点击遮罩是否关闭`ActionSheet` | `Boolean`  |  |    |
 
 ### actions
 
@@ -115,4 +115,4 @@ export default {
 | name | 标题 |
 | subname | 二级标题 |
 | className | 为对应列添加特殊的`class` |
-| loading | 是否是loading状态 |
+| loading | 是否是`loading`状态 |
diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index 5178c8a06..d86023622 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -1,4 +1,4 @@
-## Badge 组件
+## Badge
 
 ### 基础用法
 
@@ -17,13 +17,13 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
-| active-key | 激活的badge的索引 | string  | '0'但必须子badge里的mark是有0位索引 |           |
+| active-key | 激活的`badge`的索引 | `string`  | `0`但必须子badge里的mark是有`0`位索引 |           |
 
 
 ### z-badge API
 | 参数       | 说明      | 类型       | 默认值       | 必须       |
 |-----------|-----------|-----------|-------------|-------------|
-| mark | badge的唯一key值 | string  | ''          | required         |
-| title | badge的文案标题 | string  | ''          | required          |
-| info | 当前badge的提示消息数量 | string  | ''          |           |
-| url | 跳转链接 | string  | 全连接直接跳转或者hash          |           |
+| mark | badge的唯一key值 | `string`  | `''`          | `required`         |
+| title | badge的文案标题 | `string`  | `''`          | `required`          |
+| info | 当前badge的提示消息数量 | `string`  | `''`         |           |
+| url | 跳转链接 | `string`  | 全连接直接跳转或者hash          |           |
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index 8f69387e6..03a18333a 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -15,11 +15,11 @@
 }
 </style>
 
-## Button组件
+## Button 按钮
 
 ### 按钮功能
 
-只接受primary, default, danger三种类型，默认default。
+只接受`primary`, `default`, `danger`三种类型，默认`default`。
 
 :::demo 按钮功能
 ```html
@@ -51,7 +51,7 @@
 
 ### 按钮尺寸
 
-只接受large, normal, small, mini四种尺寸，默认normal。
+只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
 
 :::demo 按钮尺寸
 ```html 
@@ -76,7 +76,7 @@
 
 ### 自定义按钮标签
 
-按钮默认是button标签，可以使用tag属性修改为一个a标签。
+按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
 
 :::demo 自定义按钮标签
 ```html 
@@ -90,7 +90,7 @@
 
 ### loading按钮
 
-表示loading状态
+表示`loading`状态
 
 :::demo loading按钮
 ```html 
@@ -123,9 +123,9 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 按钮类型 | string  | 'default'          | 'primary', 'danger'   |
-| size | 按钮尺寸 | string  | 'normal'          | 'large', 'small', 'mini'  |
-| tag | 按钮标签 | string  | 'button'          | 'a', 'span', ...  |
-| diabled | 按钮是否禁用 | Boolean  |           |      |
-| block | 按钮是否显示为块级元素 | Boolean  |           |      |
+| type | 按钮类型 | `string`  | `default`          | `primary`, `danger`   |
+| size | 按钮尺寸 | `string`  | `normal`          | `large`, `small`, `mini`  |
+| tag | 按钮标签 | `string`  | `button`          | `a`, `span`, ...  |
+| diabled | 按钮是否禁用 | `boolean`  |           |      |
+| block | 按钮是否显示为块级元素 | `boolean`  |           |      |
 
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 60a462497..09cdb975f 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -41,9 +41,9 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| thumb | 左侧图片 | string  | ''          | ''          |
-| title | 标题 | string  | ''          | ''          |
-| desc | 描述 | string  | ''          | ''          |
+| thumb | 左侧图片 | `string`  |          |          |
+| title | 标题 | `string`  |          |          |
+| desc | 描述 | `string`  |          |          |
 
 
 ### Slot
diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index f58bc10e6..1383950c1 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -16,7 +16,7 @@ export default {
 };
 </script>
 
-## Cell 组件
+## Cell
 
 ### 基础用法
 
@@ -102,17 +102,17 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| icon | 左侧图标 | string  | ''          | ''          |
-| title | 左侧标题 | string  | ''          | ''          |
-| value | 右侧内容 | string  | ''          | ''          |
-| isLink | 是否为链接，链接会在右侧出现箭头 | boolean  | ''          | ''          |
-| url | 跳转链接 | string  | ''          | ''          |
-| label | 描述信息，显示在标题下方 | string  | ''          | ''          |
+| icon | 左侧图标 | `string`  |           |           |
+| title | 左侧标题 | `string`  |           |           |
+| value | 右侧内容 | `string`  |           |           |
+| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean`  |           |           |
+| url | 跳转链接 | `string`  |           |           |
+| label | 描述信息，显示在标题下方 | `string`  |           |           |
 
 ### Slot
 
 | name       | 描述      |
 |-----------|-----------|
 | - | 自定义显示内容 |
-| icon | 自定义icon |
-| title | 自定义title |
+| icon | 自定义`icon` |
+| title | 自定义`title` |
diff --git a/docs/examples-docs/checkbox.md b/docs/examples-docs/checkbox.md
index a1d07b536..21e3e65b2 100644
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
@@ -170,14 +170,14 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | Boolean  | false |   |
-| name | 根据这个来判断radio是否选中 | Boolean  | false |   |
+| disabled | 是否禁用单选框 | `boolean`  | `false` |   |
+| name | 根据这个来判断radio是否选中 | `boolean`  | `false` |   |
 
 ### CheckboxGroup API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | Boolean  | false |   |
+| disabled | 是否禁用单选框 | `boolean`  | `false` |   |
 
 ### CheckboxGroup Event
 
diff --git a/docs/examples-docs/datetime-picker.md b/docs/examples-docs/datetime-picker.md
new file mode 100644
index 000000000..f50a2543a
--- /dev/null
+++ b/docs/examples-docs/datetime-picker.md
@@ -0,0 +1,94 @@
+<script>
+export default {
+  data() {
+    return {
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date()
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      // picker.setColumnValues(1, citys[values[0]]);
+      console.log(values);
+    },
+    handlePickerCancel() {
+      alert('picker cancel');
+    },
+    handlePickerConfirm() {
+      alert('picker confirm');
+    }
+  }
+};
+</script>
+
+## Picker组件
+
+模仿iOS中的`UIPickerView`。
+
+### 基础用法
+
+:::demo 基础用法
+```html
+<zan-datetime-picker 
+  type="time" 
+  :min-hour="minHour"
+  :max-hour="maxHour"
+  :min-date="minDate"
+  @change="handlePickerChange">  
+</zan-datetime-picker>
+
+<script>
+
+export default {
+  data() {
+    return {
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date()
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+</script>
+```
+:::
+
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| visibileColumnCount | 每一列可见备选元素的个数 | Number  | 5 |   |
+| itemHeight | 选中元素区高度 | Number  | 44 |   |
+| columns | 对象数组，配置每一列显示的数据 | Array  |  |   |
+| showToolbar | 是否在组件顶部显示一个toolbar | Boolean  | true |   |
+
+### columns
+
+`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
+
+| key       | 说明      |
+|-----------|-----------|
+| values | 列中对应的备选值 |
+| defaultIndex | 初始选中值的索引，默认为0 |
+| className | 为对应列添加特殊的`class` |
+
+### change事件
+
+在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
+
+| 函数       | 说明      |
+|-----------|-----------|
+| getColumnValue(index) | 获取对应列中选中的值 |
+| setColumnValue(index, value) | 设置对应列中选中的值 |
+| getColumnValues(index) | 获取对应列中所有的备选值 |
+| setColumnValues(index, values) | 设置对应列中所有的备选值 |
+| getValues() | 获取所有列中被选中的值，返回一个数组 |
+| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
diff --git a/docs/examples-docs/dialog.md b/docs/examples-docs/dialog.md
index 7a6a519c3..f1d3c64e9 100644
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
@@ -89,5 +89,5 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| title | 标题 | String  | '' |   |
-| message | 内容 | String  | '' |   |
+| title | 标题 | `string`  |  |   |
+| message | 内容 | `string`  |  |   |
diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index a1d5556b0..278657a74 100644
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -84,16 +84,32 @@ export default {
 ```
 :::
 
+
+### Autosize的输入框(仅支持textarea)
+
+传入`autosize`属性, 且将`rows`设为1。
+
+:::demo 错误的输入框
+```html
+<zan-cell-group>
+  <zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></zan-field>
+</zan-cell-group>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 输入框类型 | string  | text | text, number, email, url, tel, date, datetime, password, textarea  |
-| placeholder | 输入框placeholder | string  | '' |   |
-| value | 输入框的值 | string  | '' |   |
-| label | 输入框标签 | string  | '' |   |
-| disabled | 是否禁用输入框 | boolean  | false |   |
-| error | 输入框是否有错误 | boolean  | false |   |
-| readonly | 输入框是否只读 | boolean  | false |   |
-| maxlength | 输入框maxlength | [String, Number]  | '' |   |
+| type | 输入框类型 | `string`  | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea`  |
+| placeholder | 输入框placeholder | `string`  |  |   |
+| value | 输入框的值 | `string`  |  |   |
+| label | 输入框标签 | `string`  |  |   |
+| disabled | 是否禁用输入框 | `boolean`  | `false` |   |
+| error | 输入框是否有错误 | `boolean`  | `false` |   |
+| readonly | 输入框是否只读 | `boolean`  | `false` |   |
+| maxlength | 输入框maxlength | `string`, `number`  |  |   |
+| rows | textarea rows | `string`, `number`   |  |   |
+| cols | textarea cols | `string`, `number`  |  |   |
+| autosize | 自动调整高度(仅支持textarea) | `boolean`  | `false` |  `true`, `false` |
 
diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md
index 1c84a72a4..29942bc50 100644
--- a/docs/examples-docs/icon.md
+++ b/docs/examples-docs/icon.md
@@ -49,4 +49,4 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| name | icon名称 | string  | '' |   |
+| name | icon名称 | `string`  | `''` |   |
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index bb3458293..a57cd0636 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -17,7 +17,7 @@
 }
 </style>
 
-## Loading
+## Loading 加载中
 
 ### 基础用法
 
@@ -43,3 +43,10 @@
 </div>
 ```
 :::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| color | `loading`颜色 | `string`  | `black`          | `black`, `white`   |
+| type | `loading`类型 | `string`  | `gradient-circle`          | `gradient-circle`, `circle`   |
diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md
index 543292b01..e551e43e8 100644
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@@ -84,9 +84,9 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| title | 标题 | string  | ''          | ''          |
-| desc | 描述 | string  | ''          | ''          |
-| status | 状态 | string  | ''          | ''          |
+| title | 标题 | `string`  |           |           |
+| desc | 描述 | `string`  |           |           |
+| status | 状态 | `string`  |           |           |
 
 
 ### Slot
diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md
index de0bb20b5..6da630fc5 100644
--- a/docs/examples-docs/picker.md
+++ b/docs/examples-docs/picker.md
@@ -127,10 +127,10 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| visibileColumnCount | 每一列可见备选元素的个数 | Number  | 5 |   |
-| itemHeight | 选中元素区高度 | Number  | 44 |   |
-| columns | 对象数组，配置每一列显示的数据 | Array  |  |   |
-| showToolbar | 是否在组件顶部显示一个toolbar | Boolean  | true |   |
+| visibileColumnCount | 每一列可见备选元素的个数 | `number`  | `5` |   |
+| itemHeight | 选中元素区高度 | `number`  | `44` |   |
+| columns | 对象数组，配置每一列显示的数据 | `Array`  |  |   |
+| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean`  | `true` |   |
 
 ### columns
 
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index 2fe391738..ea5ed0cef 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -145,4 +145,4 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| value | 利用`v-model`绑定当前组件是否显示 | Boolean  | '' |   |
+| value | 利用`v-model`绑定当前组件是否显示 | `boolean`  | |   |
diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md
index 3ae7102a4..7261278ed 100644
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@@ -10,7 +10,7 @@
 </style>
 
 
-## Switch组件
+## Progress
 
 ### 基础用法
 
@@ -64,9 +64,9 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否只会 | boolean  | false          | true, false    |
-| percentage | 进度百分比 | number  | false          | 0-100    |
-| pivotText | 文字显示 | string  | 百分比文字          | -   |
-| color | 进度条颜色 | string  | #38f    | hexvalue   |
-| textColor | 进度条文字颜色 | string  | #fff    | hexvalue   |
+| inactive | 是否只会 | `boolean`  | `false`          | `true`, `false`    |
+| percentage | 进度百分比 | `number`  | `false`          | `0-100`    |
+| pivotText | 文字显示 | `string`  | 百分比文字          | -   |
+| color | 进度条颜色 | `string`  | `#38f`    | hexvalue   |
+| textColor | 进度条文字颜色 | `string`  | `#fff`    | hexvalue   |
 
diff --git a/docs/examples-docs/quantity.md b/docs/examples-docs/quantity.md
index f43c15da4..1368f62cd 100644
--- a/docs/examples-docs/quantity.md
+++ b/docs/examples-docs/quantity.md
@@ -57,9 +57,9 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| min | 最小值 | string/number | 1          | ''          |
-| max | 最大值 | string/number  | ''          | ''          |
-| step | 步数 | string/number  | 1         | ''          |
-| disabled | 是否被禁用了 | boolean  | false      | ''          |
-| defaultValue | 默认值 | string/number  | 1      | ''          |
+| min | 最小值 | `string`, `number` | `1`         |           |
+| max | 最大值 | `string`, `number`  |           |           |
+| step | 步数 | `string`, `number`  | `1`         |           |
+| disabled | 是否被禁用了 | `boolean`  | `false`      |           |
+| defaultValue | 默认值 | `string`, `number`  | `1`      |           |
 
diff --git a/docs/examples-docs/radio.md b/docs/examples-docs/radio.md
index 41685985a..ca2b84f98 100644
--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
@@ -119,14 +119,14 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | Boolean  | false |   |
-| name | 根据这个来判断radio是否选中 | Boolean  | false |   |
+| disabled | 是否禁用单选框 | `boolean`  | `false` |   |
+| name | 根据这个来判断radio是否选中 | `boolean`  | `false` |   |
 
 ### RadioGroup API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | Boolean  | false |   |
+| disabled | 是否禁用单选框 | `boolean`  | `false` |   |
 
 ### RadioGroup Event
 
diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md
index db18c7e76..cf9f051df 100644
--- a/docs/examples-docs/search.md
+++ b/docs/examples-docs/search.md
@@ -31,4 +31,4 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 必须       |
 |-----------|-----------|-----------|-------------|-------------|
-| placeholder | input的placeholder文案 | string  |           |     |
\ No newline at end of file
+| placeholder | `input`的`placeholder`文案 | `string`  |           |     |
\ No newline at end of file
diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md
index 462243697..b0c897217 100644
--- a/docs/examples-docs/steps.md
+++ b/docs/examples-docs/steps.md
@@ -79,11 +79,11 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| active | 当前激活的步骤，从0开始 | Number  | ''          | ''          |
-| icon | 当前步骤的icon | string  | ''          | ''          |
-| iconClass | 当前步骤栏为icon添加的类 | string  | ''          | ''          |
-| title | 当前步骤从标题 | string  | ''          | ''          |
-| description | 当前步骤描述 | string  | ''          | ''          |
+| active | 当前激活的步骤，从0开始 | `number`  |          |          |
+| icon | 当前步骤的icon | `string`  |          |          |
+| iconClass | 当前步骤栏为icon添加的类 | `string`  |          |          |
+| title | 当前步骤从标题 | `string`  |          |          |
+| description | 当前步骤描述 | `string`  |          |          |
 
 ### Steps Slot
 
diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index e475dc631..b9a0e332d 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -89,6 +89,6 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| checked | 开关状态 | boolean  | false          | true, false    |
-| loading | loading状态 | boolean  | false          | true, false    |
-| disabled | 禁用状态 | boolean  | false          | true, false    |
+| checked | 开关状态 | `boolean`  | `false`          | `true`, `false`    |
+| loading | loading状态 | `boolean`  | `false`          | `true`, `false`    |
+| disabled | 禁用状态 | `boolean`  | `false`          | `true`, `false`    |
diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md
index 1a3978995..6bd363700 100644
--- a/docs/examples-docs/tab.md
+++ b/docs/examples-docs/tab.md
@@ -124,14 +124,14 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选      |
 |-----------|-----------|-----------|-------------|-------------|
-| classtype | 两种UI | string  | line |     card      |
-| active | 默认激活的tab | string || number  | 0 |           |
-| navclass | tabs的内部nav上的自定义classname | string  | '' |           |
+| classtype | 两种UI | `string`  | `line` |     `line`, `card`      |
+| active | 默认激活的tab | `string`, `number`  | `0` |           |
+| navclass | tabs的内部nav上的自定义classname | `string`  |  |           |
 
 
 ### zan-tab API
-| 参数       | 说明      | 类型       | 默认值       | 必须       |
+| 参数       | 说明      | 类型       | 默认值       | 可选       |
 |-----------|-----------|-----------|-------------|-------------|
-| title | tab的标题 | string  | ''          | required         |
-| disable | 是否禁用这个tab | Boolean  | false      |           |
+| title | tab的标题 | `string`  |         |          |
+| disable | 是否禁用这个tab | `boolean`  | `false`      |           |
 
diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md
index 382b1220d..126ba5c38 100644
--- a/docs/examples-docs/tag.md
+++ b/docs/examples-docs/tag.md
@@ -52,9 +52,9 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| plain | 是否是空心tag | boolean  | false          | ''          |
-| mark | 是否是标记 | boolean  | false          | ''          |
-| type | tag类型 | string  | ''          | 'primary', 'success', 'danger' |
+| plain | 是否是空心tag | `boolean`  | `false`          |           |
+| mark | 是否是标记 | `boolean`  | `false`          |           |
+| type | tag类型 | `string`  | `''`          | `primary`, `success`, `danger` |
 
 ### Slot
 
diff --git a/docs/examples-docs/toast.md b/docs/examples-docs/toast.md
index 28818cdbc..a828742e4 100644
--- a/docs/examples-docs/toast.md
+++ b/docs/examples-docs/toast.md
@@ -52,6 +52,12 @@ export default {
     },
     closeToast() {
       this.toast.clear();
+    },
+    showHtmlToast() {
+      Toast({
+        type: 'html',
+        message: '<em>HTML<em>'
+      })
     }
   }
 };
@@ -140,28 +146,55 @@ export default {
 :::
 
 
+### 传入html
+
+:::demo 手动关闭
+```html
+<zan-button @click="showHtmlToast">打开</zan-button>
+
+<script>
+import { Toast } from 'src/index';
+
+export default {
+  methods: {
+    showHtmlToast() {
+      Toast({
+        type: 'html',
+        message: '<em>HTML<em>'
+      })
+    }
+  }
+};
+</script>
+```
+:::
+
 
 ### 基础用法
 ### Toast(options)
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'failure'  |
+| type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'fail', 'html'  |
 | message | 内容 | String  | '' | - |\| message | 内容 | String  | '' | - 
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|
 
 ### 快速用法
-### Toast(message)
+### Toast(message) || Toast(message, options)
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | message | 内容 | String  | '' | - |
+| forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|
 
 ### Toast.loading() || Toast.loading(message, options)
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|
 
 ### Toast.success(message) || Toast.success(message, options)
 
@@ -169,6 +202,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'failure'  |
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|
 
 ### Toast.fail(message) || Toast.fail(message, options)
 
@@ -176,6 +210,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'failure'  |
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|
 
 ### instanceOfToast.clear()
 关闭toast。
diff --git a/docs/examples-docs/uploader.md b/docs/examples-docs/uploader.md
index 2b5bfb1d3..7193978d5 100644
--- a/docs/examples-docs/uploader.md
+++ b/docs/examples-docs/uploader.md
@@ -42,10 +42,10 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | String  | 'dataUrl'          | 'dataUrl','text'          |
-| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | boolean  | false          |           |
-| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | Function  |           |  |
-| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | Function  |           |  |
+| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `string`  | `dataUrl`          | `dataUrl`, `text`         |
+| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `boolean`  | `false`          |           |
+| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function`  |           |  |
+| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function`  |           |  |
 
 ### Slot
 
diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index 99c1dc3c8..7ba9035da 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -76,6 +76,6 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | String  | - |  |
-| waterfall-offset | 触发瀑布流加载的阈值 | Number  | 300 |   |
+| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `string`  | - |  |
+| waterfall-offset | 触发瀑布流加载的阈值 | `number`  | `300` |   |
 
diff --git a/docs/index.js b/docs/index.js
index b946c1569..c07a71401 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -5,6 +5,7 @@ import navConfig from './nav.config.json';
 import routes from './router.config';
 import SideNav from './components/side-nav';
 import DemoBlock from './components/demo-block';
+import FooterNav from './components/footer-nav';
 import ZanUI from 'src/index.js';
 
 import 'packages/zanui-css/src/index.css';
@@ -19,6 +20,7 @@ Vue.use(VueRouter);
 Vue.use(ZanUI);
 Vue.component('side-nav', SideNav);
 Vue.component('demo-block', DemoBlock);
+Vue.component('footer-nav', FooterNav);
 
 let routesConfig = routes(navConfig);
 routesConfig.push({
@@ -27,15 +29,14 @@ routesConfig.push({
 });
 
 const router = new VueRouter({
-  mode: 'hash',
+  mode: 'history',
   base: __dirname,
   routes: routesConfig
 });
 
-let indexScrollTop = 0;
 router.beforeEach((route, redirect, next) => {
   if (route.path !== '/') {
-    indexScrollTop = document.body.scrollTop;
+    window.scrollTo(0, 0);
   }
   if (isMobile()) {
     window.location.replace(location.pathname + 'examples.html#' + route.path);
@@ -45,13 +46,11 @@ router.beforeEach((route, redirect, next) => {
   next();
 });
 
-router.afterEach(route => {
+router.afterEach((route) => {
   if (route.path !== '/') {
-    document.body.scrollTop = 0;
-  } else {
-    Vue.nextTick(() => {
-      document.body.scrollTop = indexScrollTop;
-    });
+    const sideNavBox = document.querySelector('.side-nav');
+    const pageContentBox = document.querySelector('.page-content');
+    pageContentBox.style.height = Math.max(sideNavBox && sideNavBox.clientHeight, pageContentBox && pageContentBox.clientHeight) + 'px';
   }
 });
 
diff --git a/examples.html b/examples.html
index 908ff24d3..d98f116de 100644
--- a/examples.html
+++ b/examples.html
@@ -11,6 +11,6 @@
     <app></app>
   </div>
 
-<script src="docs/build/zanui-examples.js"></script>
+<script src="/docs/build/zanui-examples.js"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
index 5b0f386b1..eedf1af13 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,6 @@
     <app></app>
   </div>
 
-<script src="docs/build/zanui-docs.js"></script>
+<script src="/docs/build/zanui-docs.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
index 4507cddc9..3dd778b59 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-vue",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "有赞vue wap组件库",
   "main": "lib/zanui.js",
   "style": "lib/zanui-css/index.css",
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
-    "dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
+    "dev": "npm run build:file && webpack-dev-server --inline --history-api-fallback --hot --config build/webpack.config.js",
     "build:file": "node build/bin/build-entry.js",
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
     "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
@@ -141,7 +141,7 @@
     "vue-template-compiler": "2.1.8",
     "vue-template-es2015-compiler": "^1.4.2",
     "webpack": "^2.2.1",
-    "webpack-dev-server": "^1.16.0",
+    "webpack-dev-server": "^1.16.3",
     "webpack-merge": "^2.0.0",
     "webpack-node-externals": "^1.5.4",
     "webpack-vendor-chunk-plugin": "^1.0.0"
diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue
index a618c7a33..22df2622e 100644
--- a/packages/cell/src/cell.vue
+++ b/packages/cell/src/cell.vue
@@ -1,6 +1,6 @@
 <template>
   <a class="zan-cell" :href="url" @click="handleClick">
-    <div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }">
+    <div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }" v-if="this.$slots.title || title || label">
       <slot name="icon">
         <i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
       </slot>
diff --git a/packages/datetime-picker/CHANGELOG.md b/packages/datetime-picker/CHANGELOG.md
new file mode 100644
index 000000000..e88c472b3
--- /dev/null
+++ b/packages/datetime-picker/CHANGELOG.md
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
diff --git a/packages/datetime-picker/README.md b/packages/datetime-picker/README.md
new file mode 100644
index 000000000..4c6172563
--- /dev/null
+++ b/packages/datetime-picker/README.md
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/datetime-picker/index.js b/packages/datetime-picker/index.js
new file mode 100644
index 000000000..c6ad7f9b3
--- /dev/null
+++ b/packages/datetime-picker/index.js
@@ -0,0 +1,3 @@
+import DateTimePicker from './src/datetime-picker';
+
+export default DateTimePicker;
diff --git a/packages/datetime-picker/package.json b/packages/datetime-picker/package.json
new file mode 100644
index 000000000..e517e0566
--- /dev/null
+++ b/packages/datetime-picker/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/zan-datetime-picker",
+  "version": "0.0.1",
+  "description": "datetime picker component",
+  "main": "./index.js",
+  "author": "niunai <niunai@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}
diff --git a/packages/datetime-picker/src/datetime-picker.vue b/packages/datetime-picker/src/datetime-picker.vue
new file mode 100644
index 000000000..253888704
--- /dev/null
+++ b/packages/datetime-picker/src/datetime-picker.vue
@@ -0,0 +1,221 @@
+<template>
+  <zan-picker
+    :columns="columns"
+    :visible-item-count="visibleItemCount"
+    @change="handlePickerChange"
+    @confirm="handlePickerConfirm"
+    showToolbar>
+  </zan-picker>
+</template>
+
+<script>
+import Picker from 'packages/picker';
+
+const allowedType = ['time', 'date', 'datetime'];
+
+export default {
+  name: 'zan-datetime-picker',
+
+  components: {
+    Picker
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: 'datetime',
+      validator(value) {
+        return allowedType.indexOf(value) > -1;
+      }
+    },
+    visibleItemCount: {
+      type: Number,
+      default: 5
+    },
+    minDate: {
+      type: Date,
+      default() {
+        return new Date(new Date().getFullYear() - 10, 0, 1);
+      }
+    },
+    maxDate: {
+      type: Date,
+      default() {
+        return new Date(new Date().getFullYear() + 10, 11, 31);
+      }
+    },
+    minHour: {
+      type: Number,
+      default: 0
+    },
+    maxHour: {
+      type: Number,
+      default: 23
+    },
+    value: null
+  },
+
+  data() {
+    return {
+      innerValue: this.val
+    };
+  },
+
+  watch: {
+    value(val) {
+      this.innerValue = val;
+    },
+    innerValue(val) {
+      console.log(val + '!!!');
+      this.$emit('input', val);
+    }
+  },
+
+  computed: {
+    ranges() {
+      console.log(this.innerValue + '!!');
+      // return this.innerValue + '!!';
+      if (this.type === 'time') {
+        return [
+          [this.minHour, this.maxHour],
+          [0, 59]
+        ];
+      }
+      const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', this.innerValue);
+      const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue);
+
+      const result = [
+        [minYear, maxYear],
+        [minMonth, maxMonth],
+        [minDate, maxDate],
+        [minHour, maxHour],
+        [minMinute, maxMinute]
+      ];
+
+      if (this.type === 'date') result.splice(3, 2);
+      return result;
+    },
+    columns() {
+      return this.ranges.map(range => {
+        const values = this.times(range[1] - range[0] + 1, index => {
+          const value = range[0] + index;
+          return value < 10 ? `0${value}` : `${value}`;
+        });
+
+        return {
+          values
+        };
+      });
+    }
+  },
+
+  methods: {
+    times(n, iteratee) {
+      let index = -1;
+      const result = Array(n);
+
+      while (++index < n) {
+        result[index] = iteratee(index);
+      }
+      return result;
+    },
+    getBoundary(type, value) {
+      const boundary = this[`${type}Date`];
+      const year = boundary.getFullYear();
+      let month = 1;
+      let date = 1;
+      let hour = 0;
+      let minute = 0;
+
+      if (type === 'max') {
+        month = 12;
+        date = this.getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+        hour = 23;
+        minute = 59;
+      }
+
+      if (value.getFullYear() === year) {
+        month = boundary.getMonth() + 1;
+        if (value.getMonth() + 1 === month) {
+          date = value.getDate();
+          if (value.getDate() === date) {
+            hour = value.getHours();
+            if (value.getHours() === hour) {
+              minute = value.getMinutes();
+            }
+          }
+        }
+      }
+
+      return {
+        [`${type}Year`]: year,
+        [`${type}Month`]: month,
+        [`${type}Date`]: date,
+        [`${type}Hour`]: hour,
+        [`${type}Minute`]: minute
+      };
+    },
+    getTrueValue(formattedValue) {
+      if (!formattedValue) return;
+      while (isNaN(parseInt(formattedValue, 10))) {
+        formattedValue = formattedValue.slice(1);
+      }
+      return parseInt(formattedValue, 10);
+    },
+    getMonthEndDay(year, month) {
+      if (this.isShortMonth(month)) {
+        return 30;
+      } else if (month === 2) {
+        return this.isLeapYear(year) ? 29 : 28;
+      } else {
+        return 31;
+      }
+    },
+    isLeapYear(year) {
+      return (year % 400 === 0) || (year % 100 !== 0 && year % 4 === 0);
+    },
+    isShortMonth(month) {
+      return [4, 6, 9, 11].indexOf(month) > -1;
+    },
+    handlePickerConfirm(values) {
+      this.$emit('confirm', this.innerValue);
+    },
+    handlePickerChange(picker, values, index) {
+      console.log(this.innerValue);
+      let value;
+
+      if (this.type === 'time') {
+        value = values.join(':');
+      } else {
+        const year = this.getTrueValue(values[0]);
+        const month = this.getTrueValue(values[1]);
+        const maxDate = this.getMonthEndDay(year, month);
+        let date = this.getTrueValue(values[2]);
+        date = date > maxDate ? maxDate : date;
+        let hour = 0;
+        let minute = 0;
+        if (this.type === 'datetime') {
+          hour = this.getTrueValue(values[3]);
+          minute = this.getTrueValue(values[4]);
+        }
+        value = new Date(year, month - 1, date, hour, minute);
+      }
+      this.innerValue = value;
+      console.log(value, this.innerValue);
+      // this.$emit('input', value);
+    }
+  },
+
+  created() {
+    this.innerValue = this.value;
+    if (!this.innerValue) {
+      if (this.type.indexOf('date') > -1) {
+        this.innerValue = this.minDate;
+      } else {
+        const minHour = this.minHour;
+        this.innerValue = `${minHour > 10 ? minHour : '0' + minHour}:00`;
+      }
+    }
+  }
+};
+</script>
diff --git a/packages/field/src/field.vue b/packages/field/src/field.vue
index 911562faf..81636ba5d 100644
--- a/packages/field/src/field.vue
+++ b/packages/field/src/field.vue
@@ -8,22 +8,28 @@
       'zan-field--nolabel': !label,
       'zan-field--disabled': disabled,
       'zan-field--error': error,
-      'zan-field--border': border
+      'zan-field--border': border,
+      'zan-field--autosize': autosize
     }">
     <textarea
       v-if="type === 'textarea'"
+      ref="textareaElement"
       class="zan-field__control"
       v-model="currentValue"
+      @focus="handleInputFocus"
       :placeholder="placeholder"
       :maxlength="maxlength"
       :disabled="disabled"
-      :readonly="readonly">
+      :readonly="readonly"
+      :rows="rows"
+      :cols="cols">
     </textarea>
     <input
       v-else
       class="zan-field__control"
       :value="currentValue"
       @input="handleInput"
+      @focus="handleInputFocus"
       :type="type"
       :placeholder="placeholder"
       :maxlength="maxlength"
@@ -33,6 +39,7 @@
 </template>
 
 <script>
+const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'datetime', 'password', 'textarea'];
 import zanCell from 'packages/cell';
 
 export default {
@@ -45,7 +52,10 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'text'
+      default: 'text',
+      validate(value) {
+        return VALID_TYPES.indexOf(value) > -1;
+      }
     },
     placeholder: String,
     value: {},
@@ -55,7 +65,16 @@ export default {
     readonly: Boolean,
     required: Boolean,
     maxlength: [String, Number],
-    border: Boolean
+    border: Boolean,
+    rows: [String, Number],
+    cols: [String, Number],
+    autosize: {
+      type: Boolean,
+      default: false,
+      validate(value) {
+        if (value && this.type !== 'textarea') return false;
+      }
+    }
   },
 
   data() {
@@ -70,6 +89,7 @@ export default {
     },
 
     currentValue(val) {
+      if (this.autosize && this.type === 'textarea') this.sizeAdjust();
       this.$emit('input', val);
     }
   },
@@ -77,6 +97,19 @@ export default {
   methods: {
     handleInput(event) {
       this.currentValue = event.target.value;
+    },
+
+    sizeAdjust() {
+      const textareaElement = this.$refs.textareaElement;
+      const textAreaDiff = (parseInt(textareaElement.style.paddingBottom, 10) +
+          parseInt(textareaElement.style.paddingTop, 10)) || 0;
+      // 需要先设为0， 才可以让scrollHeight正确计算。
+      textareaElement.style.height = 0 + 'px';
+      textareaElement.style.height = (textareaElement.scrollHeight - textAreaDiff) + 'px';
+    },
+
+    handleInputFocus() {
+      this.$emit('focus');
     }
   }
 };
diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue
index a9b631dbf..636ca96c2 100644
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@@ -65,6 +65,9 @@ export default {
   },
 
   watch: {
+    value(val) {
+      this.currentValue = val;
+    },
     values(val) {
       this.currentValues = val;
     },
diff --git a/packages/toast/src/toast.vue b/packages/toast/src/toast.vue
index c259624eb..48c8d8db9 100644
--- a/packages/toast/src/toast.vue
+++ b/packages/toast/src/toast.vue
@@ -15,6 +15,10 @@
           <zan-icon class="zan-toast__icon" :name="type"></zan-icon>
           <div class="zan-toast__text">{{message}}</div>
         </template>
+        <!-- 传入html -->
+        <template v-if="displayStyle === 'html'">
+          <div class="zan-toast__text" v-html="message"></div>
+        </template>
       </div>
       <div class="zan-toast__overlay" v-if="forbidClick"></div>
     </div>
@@ -25,7 +29,8 @@
 import zanLoading from 'packages/loading';
 import zanIcon from 'packages/icon';
 
-const TOAST_TYPES = ['text', 'loading', 'success', 'fail'];
+const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
+const DEFAULT_STYLE_LIST = ['success', 'fail'];
 /**
  * zan-toast
  * @module components/toast
@@ -70,14 +75,7 @@ export default {
   },
   computed: {
     displayStyle() {
-      switch (this.type) {
-        case 'text':
-          return 'text';
-        case 'loading':
-          return 'loading';
-        default:
-          return 'default';
-      }
+      return DEFAULT_STYLE_LIST.indexOf(this.type) > -1 ?  'default' : this.type;
     }
   }
 };
diff --git a/packages/zanui-css/package.json b/packages/zanui-css/package.json
index 95bd87b28..c8eda5348 100644
--- a/packages/zanui-css/package.json
+++ b/packages/zanui-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/packages/zanui-css/src/cell.css b/packages/zanui-css/src/cell.css
index c8224538c..11a832e9a 100644
--- a/packages/zanui-css/src/cell.css
+++ b/packages/zanui-css/src/cell.css
@@ -65,7 +65,7 @@
       }
 
       @when alone {
-        float: left;
+        float: none;
       }
     }
 
diff --git a/packages/zanui-css/src/field.css b/packages/zanui-css/src/field.css
index 18a07e907..13622bcc6 100644
--- a/packages/zanui-css/src/field.css
+++ b/packages/zanui-css/src/field.css
@@ -50,6 +50,12 @@
       }
     }
 
+    @m autosize {
+      .zan-field__control {
+        min-height: 0px;
+      }
+    }
+
     .zan-cell__title,
     .zan-cell__value {
       float: none;
diff --git a/packages/zanui-css/src/picker.css b/packages/zanui-css/src/picker.css
index 0215ba9ab..45e5edecd 100644
--- a/packages/zanui-css/src/picker.css
+++ b/packages/zanui-css/src/picker.css
@@ -48,6 +48,18 @@
           width: 33.333%;
         }
       }
+
+      @m 4 {
+        .zan-picker-column {
+          width: 25%;
+        }
+      }
+
+      @m 5 {
+        .zan-picker-column {
+          width: 20%;
+        }
+      }
     }
   }
 
diff --git a/packages/zanui-css/src/toast.css b/packages/zanui-css/src/toast.css
index 468817138..d59361425 100644
--- a/packages/zanui-css/src/toast.css
+++ b/packages/zanui-css/src/toast.css
@@ -29,7 +29,7 @@
       padding: 45px;
     }
 
-    @m text {
+    @m text, html {
       padding: 12px;
       min-width: 200px;
     }
diff --git a/src/index.js b/src/index.js
index 4e89c9f92..469d1b02d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -34,6 +34,7 @@ import Toast from '../packages/toast/index.js';
 import Uploader from '../packages/uploader/index.js';
 import Swipe from '../packages/swipe/index.js';
 import SwipeItem from '../packages/swipe-item/index.js';
+import DatetimePicker from '../packages/datetime-picker/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -69,6 +70,7 @@ const install = function(Vue) {
   Vue.component(Uploader.name, Uploader);
   Vue.component(Swipe.name, Swipe);
   Vue.component(SwipeItem.name, SwipeItem);
+  Vue.component(DatetimePicker.name, DatetimePicker);
 };
 
 // auto install
@@ -78,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '0.0.38',
+  version: '0.0.39',
   Button,
   Switch,
   Field,
@@ -114,5 +116,6 @@ module.exports = {
   Toast,
   Uploader,
   Swipe,
-  SwipeItem
+  SwipeItem,
+  DatetimePicker
 };