Deploy updates

en.b6c27c86.html

@@ -0,0 +1,9 @@
+<h3 id="basic">Basic</h3><p>You can select or input a date, month, year, time or datetime</p><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><h3 id="range">Range</h3><p>Support to select a date range.</p><h3 id="disableddate--disabledtime">DisabledDate &amp; DisabledTime</h3><p>Disabled part of dates and time by <code>disabledDate</code> and <code>disabledTime</code> respectively.</p><p>You should let the value of <code>defaultValue</code> not be disabled, when you use <code>disabledDate</code> or <code>disabledTime</code>.</p><p>The default value of <code>defaultValue</code> is <code>new Date().setHour(0,0,0,0)</code>.</p><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><h3 id="shortcut">Shortcut</h3><p>You can set <code>shortcuts</code> to improve user experience.</p><p>Use the header slot or the footer slot to render extra element in panel for customized requirements.</p><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>.</p><p>The time panel is displayed after the date is selected by default.</p><h3 id="control-open">Control Open</h3><p>You can use the prop <code>open</code> to control the visible of popup.</p><p>This example shows how to close the popup when the seconds is selected.</p><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.</p><p>You can also set <code>showHour</code> <code>showMinute</code> <code>showSecond</code> to override the default value</p><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></p><p>Set custom time options by <code>hourOptions</code> <code>minuteOptions</code> <code>secondOptions</code>.</p><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>

example.550cda26.css

@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:.5em;color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-built_in,.hljs-class .hljs-title{color:#c18401}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}.container,body,html{height:100%}.container{display:flex}@media screen and (max-width:800px){.sidebar{display:none}}.sidebar{border-right:1px solid #ebedf0;width:280px;overflow:auto}.sidebar a{font-size:14px;line-height:30px;display:block;padding-left:16px;overflow:hidden;color:#314659;white-space:nowrap;text-overflow:ellipsis;border-left:1px solid transparent;transition:all .3s ease;text-decoration:none;background-color:transparent;outline:none;cursor:pointer}.sidebar a:hover{color:#1485e7}.sidebar a.active{color:#1284e7}.main{flex:1;overflow:auto;max-width:100%}.main p{margin:10px 0}.content{box-sizing:border-box;width:100%;padding:10px 20px}.card{position:relative;display:inline-block;width:100%;font-size:14px;color:#314659;border:1px solid #ebedf0;border-radius:4px;margin-bottom:60px;margin-top:20px}.card.active{border-color:#1284e7}.card-demo{padding:30px 24px;color:#213649;border-top:1px solid #ebedf0}.card-demo .box{display:flex;flex-wrap:wrap}.card-demo .box>section{flex:1;display:flex;flex-direction:column;align-items:center}.card-title{position:absolute;margin-top:-10px;margin-left:14px;font-size:16px;line-height:1;font-weight:700;padding:0 10px;background:#fff}.card-description{padding:12px 24px}.markdown-body{font-size:15px;line-height:1.7}.markdown-body ol,.markdown-body p,.markdown-body ul{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:30px}.markdown-body code{padding:.2em .4em;margin:0;font-size:85%;background-color:rgba(27,31,35,.05);border-radius:3px}.card-actions{position:relative;border-top:1px solid #ebedf0;height:36px;text-align:center;color:#d3dce6;cursor:pointer;transition:.2s;user-select:none}.card-actions:hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.icon-expand{position:absolute;left:50%;top:50%;margin-left:-8px;margin-top:-8px;width:16px;height:16px;opacity:.3}.card-code{border-top:1px solid #ebedf0}.card-code pre{margin:0;background:#fff}.card-code pre:after,.card-code pre:before{width:0}.card-code pre code{display:block;background:#fff;color:#314659;line-height:2;border:0;box-shadow:none;padding:16px 32px;border-radius:2px;font-size:14px}

index.html

@@ -1,18 +1 @@
-<!DOCTYPE html>
-<html lang="zh">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css">
-    <link rel="stylesheet" href="https://unpkg.com/vue2-datepicker/index.css">
-  <link rel="stylesheet" href="example.22434e06.css"></head>
-  <body>
-    <div id="app"></div>
-    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
-    <script src="https://unpkg.com/vue2-datepicker/index.min.js"></script>
-    <script src="https://unpkg.com/vue2-datepicker/locale/zh-cn.js"></script>
-    <script src="example.d4e17d8d.js"></script>
-  </body>
-</html>
+<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css"><link rel="stylesheet" href="https://unpkg.com/vue2-datepicker/index.css"><link rel="stylesheet" href="example.550cda26.css"></head><body> <div id="app"></div> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <script src="https://unpkg.com/vue2-datepicker/index.min.js"></script> <script src="https://unpkg.com/vue2-datepicker/locale/zh-cn.js"></script> <script src="example.71a5e843.js"></script> </body></html>

zh-cn.1f9a946b.html

@@ -0,0 +1,9 @@
+<h3 id="基本">基本</h3><p>可以选择或手动输入一个日期, 月, 年, 时间或者日期加时间</p><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><h3 id="日期范围">日期范围</h3><p>支持选择一个日期范围</p><h3 id="不可选择的日期和时间">不可选择的日期和时间</h3><p>可用 <code>disabledDate</code> 和 <code>disabledTime</code> 分别禁止选择部分日期和时间.</p><p>当你使用<code>disabledDate</code> 或 <code>disabledTime</code>的时候, 应该设置<code>defaultValue</code>的值是不被禁止选择的.</p><p><code>defaultValue</code>的默认值是<code>new Date().setHour(0,0,0,0)</code></p><h3 id="禁用和可编辑">禁用和可编辑</h3><ul>
+<li><code>disabled</code>: 设置组件是否禁用</li>
+<li><code>editable</code>: 设置是否可手动输入</li>
+</ul><h3 id="快捷选项">快捷选项</h3><p>可以通过设置 <code>shortcuts</code> 提升用户体验.</p><p>也可以使用 slot header 或者 footer 去设置额外的元素.</p><h3 id="控制时间选择的显示和隐藏日期时间模式">控制时间选择的显示和隐藏(日期时间模式)</h3><p>时间选择的显示可以通过 <code>showTimePanel</code> 控制.</p><p>默认情况下选择一个日期后时间面板就自动显示.</p><h3 id="控制弹窗打开">控制弹窗打开</h3><p>可以通过 <code>open</code> 去控制弹窗的显示</p><p>下面的例子说明怎么关闭弹窗当选择秒的时候</p><h3 id="隐藏秒和显示-ampm">隐藏秒和显示 am/pm</h3><p>时间选择的列是自动显示通过 <code>format</code>的设置.</p><p>你可以通过 <code>showHour</code> <code>showMinute</code> <code>showSecond</code> 覆盖默认值</p><h3 id="间隔的时间和自定义时间选择">间隔的时间和自定义时间选择</h3><p>设置间隔的时间通过<code>hourStep</code> <code>minuteStep</code> <code>secondStep</code>.</p><p>设置自定义的选择通过<code>hourOptions</code> <code>minuteOptions</code> <code>secondOptions</code>.</p><h3 id="固定的时间列表">固定的时间列表</h3><p>可以通过 <code>timePickerOptions</code> 提供一个固定的时间列表选择</p>