diff --git a/en.cca3a95f.html b/en.cca3a95f.html
new file mode 100644
index 0000000..582100d
--- /dev/null
+++ b/en.cca3a95f.html
@@ -0,0 +1,60 @@
+<!-- Basic -->
+
+<h3 id="basic">Basic</h3>
+<p>You can select or input a date, month, year, time or datetime</p>
+<!-- ValueType -->
+
+<h3 id="valuetype">ValueType</h3>
+<p>You can set the type of the v-model value by <code>valueType</code>.</p>
+<ul>
+<li>&quot;format&quot;: return a string same as the input value.</li>
+<li>&quot;date&quot;(default): return a Date Object.</li>
+<li>&quot;timestamp&quot;: return a Number.</li>
+<li>token: a accepted format string pattern.</li>
+</ul>
+<!-- Range -->
+
+<h3 id="range">Range</h3>
+<p>Support to select a date range.</p>
+<!-- DisabledDateTime -->
+
+<h3 id="disableddate--disabledtime">DisabledDate &amp; DisabledTime</h3>
+<p>Disabled part of dates and time by <code>disabledDate</code> and <code>disabledTime</code> respectively.
+You should let the value of <code>defaultValue</code> not be disabled, when you use <code>disabledDate</code> or <code>disabledTime</code>.
+The default value of <code>defaultValue</code> is <code>new Date().setHour(0,0,0,0)</code>.</p>
+<!-- Disabled -->
+
+<h3 id="disabled--editable">Disabled &amp; editable</h3>
+<ul>
+<li>disabled: A disabled state of the DatePicker</li>
+<li>editable: Whether to allow manual input</li>
+</ul>
+<!-- Shortcut -->
+
+<h3 id="shortcut">Shortcut</h3>
+<p>You can set <code>shortcuts</code> to improve user experience.
+Use the header slot or the footer slot to render extra element in panel for customized requirements.</p>
+<!-- ControlTimePanel -->
+
+<h3 id="control-timepanel-visibledatetime-mode">Control TimePanel visible(datetime mode)</h3>
+<p>The display or hiding of the time panel can be controlled by <code>showTimePanel</code>.
+The time panel is displayed after the date is selected by default.</p>
+<!-- ControlOpen -->
+
+<h3 id="control-open">Control Open</h3>
+<p>You can use the prop <code>open</code> to control the visible of popup.
+This example shows how to close the popup when the seconds is selected.</p>
+<!-- HideSeconds -->
+
+<h3 id="hide-seconds-selection--display-ampm-selection">Hide seconds selection &amp; display AMPM selection</h3>
+<p>The columns of the time Picker is displayed according to the value of format(HH:mm:ss) by default.
+You can also set <code>showHour</code> <code>showMinute</code> <code>showSecond</code> to override the default value</p>
+<!-- MinuteStep -->
+
+<h3 id="interval-and-custom-time-options">Interval and custom time options</h3>
+<p>Set stepped time options by <code>hourStep</code> <code>minuteStep</code> <code>secondStep</code>
+Set custom time options by <code>hourOptions</code> <code>minuteOptions</code> <code>secondOptions</code>.</p>
+<!-- FixedTimeList -->
+
+<h3 id="select-fixed-time-list">Select fixed time list</h3>
+<p>You can provide a list of fixed time for users to choose by <code>timePickerOptions</code></p>
diff --git a/example.d4e17d8d.js b/example.d4e17d8d.js
index 93163e1..4855e71 100644
--- a/example.d4e17d8d.js
+++ b/example.d4e17d8d.js
@@ -2755,5 +2755,5 @@ module.exports = function loadHTMLBundle(bundle) {
   });
 };
 },{}],0:[function(require,module,exports) {
-var b=require("TUK3");b.register("html",require("A3BY"));b.load([["en.7d2f12ce.html","yxg7"],["zh-cn.a7e2c2e4.html","u7Vb"]]).then(function(){require("Focm");});
+var b=require("TUK3");b.register("html",require("A3BY"));b.load([["en.cca3a95f.html","yxg7"],["zh-cn.b7f27867.html","u7Vb"]]).then(function(){require("Focm");});
 },{}]},{},[0], null)
\ No newline at end of file
diff --git a/zh-cn.b7f27867.html b/zh-cn.b7f27867.html
new file mode 100644
index 0000000..399abaf
--- /dev/null
+++ b/zh-cn.b7f27867.html
@@ -0,0 +1,60 @@
+<!-- Basic -->
+
+<h3 id="基本">基本</h3>
+<p>可以选择或手动输入一个日期, 月, 年, 时间或者日期加时间</p>
+<!-- ValueType -->
+
+<h3 id="绑定值的类型">绑定值的类型</h3>
+<p>通过<code>valueType</code>去设置<code>ｖ-model</code>绑定的值的类型</p>
+<ul>
+<li>&quot;format&quot;: 返回一个字符串，和输入框格式化之后的一样．</li>
+<li>&quot;date&quot;(default): 返回一个 Date 对象.</li>
+<li>&quot;timestamp&quot;: 返回一个时间戳.</li>
+<li>token: 一个可以被解析的 token, 返回格式化这个 token 的字符串.</li>
+</ul>
+<!-- Range -->
+
+<h3 id="日期范围">日期范围</h3>
+<p>支持选择一个日期范围</p>
+<!-- DisabledDateTime -->
+
+<h3 id="不可选择的日期和时间">不可选择的日期和时间</h3>
+<p>可用 <code>disabledDate</code> 和 <code>disabledTime</code> 分别禁止选择部分日期和时间.
+当你使用<code>disabledDate</code> 或 <code>disabledTime</code>的时候, 应该设置<code>defaultValue</code>的值是不被禁止选择的.
+<code>defaultValue</code>的默认值是<code>new Date().setHour(0,0,0,0)</code></p>
+<!-- Disabled -->
+
+<h3 id="禁用和可编辑">禁用和可编辑</h3>
+<ul>
+<li><code>disabled</code>: 设置组件是否禁用</li>
+<li><code>editable</code>: 设置是否可手动输入</li>
+</ul>
+<!-- Shortcut -->
+
+<h3 id="快捷选项">快捷选项</h3>
+<p>可以通过设置 <code>shortcuts</code> 提升用户体验.
+也可以使用 slot header 或者 footer 去设置额外的元素.</p>
+<!-- ControlTimePanel -->
+
+<h3 id="控制时间选择的显示和隐藏日期时间模式">控制时间选择的显示和隐藏(日期时间模式)</h3>
+<p>时间选择的显示可以通过 <code>showTimePanel</code> 控制.
+默认情况下选择一个日期后时间面板就自动显示.</p>
+<!-- ControlOpen -->
+
+<h3 id="控制弹窗打开">控制弹窗打开</h3>
+<p>可以通过 <code>open</code> 去控制弹窗的显示
+下面的例子说明怎么关闭弹窗当选择秒的时候</p>
+<!-- HideSeconds -->
+
+<h3 id="隐藏秒和显示-ampm">隐藏秒和显示 am/pm</h3>
+<p>时间选择的列是自动显示通过 <code>format</code>的设置.
+你可以通过 <code>showHour</code> <code>showMinute</code> <code>showSecond</code> 覆盖默认值</p>
+<!-- MinuteStep -->
+
+<h3 id="间隔的时间和自定义时间选择">间隔的时间和自定义时间选择</h3>
+<p>设置间隔的时间通过<code>hourStep</code> <code>minuteStep</code> <code>secondStep</code>.
+设置自定义的选择通过<code>hourOptions</code> <code>minuteOptions</code> <code>secondOptions</code>.</p>
+<!-- FixedTimeList -->
+
+<h3 id="固定的时间列表">固定的时间列表</h3>
+<p>可以通过 <code>timePickerOptions</code> 提供一个固定的时间列表选择</p>