mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-05-21 20:34:07 +03:00
Code Activity

Deploy updates

Browse Source
This commit is contained in:
mengxiong10
2020-06-05 10:53:23 +08:00
parent 73e1aebd33
commit 015db4c007
4 changed files with 2925 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
en.e1f05150.html
+59
View File
@@ -0,0 +1,59 @@
<!-- 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.</p>
<p><strong>You should let the <code>defaultValue</code> not be disabled, when you use <code>disabledDate</code> or <code>disabledTime</code>.</strong></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.</p>
<p>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>.</p>
<p>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.</p>
<p>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.</p>
<p>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></p>
<p>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>
example.9bb69ced.js
+2805
View File
File diff suppressed because it is too large Load Diff
index.html
+2 -2
View File
@@ -7,13 +7,13 @@
<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">
<script src="https://polyfill.io/v3/polyfill.js?features=Object.assign,Array.from,Promise,fetch&flags=gated"></script>
<script async="" src="https://polyfill.io/v3/polyfill.js?features=Object.assign,Array.from,Promise,fetch&flags=gated"></script>
<link rel="stylesheet" href="example.f6d53ba2.css"></head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.runtime.min.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.5a85632e.js"></script>
<script src="example.9bb69ced.js"></script>
</body>
</html>
zh-cn.d0e04549.html
+59
View File
@@ -0,0 +1,59 @@
<!-- 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> 分别禁止选择部分日期和时间.</p>
<p><strong>当你使用<code>disabledDate</code> 或 <code>disabledTime</code>的时候, 应该设置<code>defaultValue</code>的值是不被禁止选择的.</strong></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> 提升用户体验.</p>
<p>也可以使用 slot header 或者 footer 去设置额外的元素.</p>
<!-- ControlTimePanel -->
<h3 id="控制时间选择的显示和隐藏日期时间模式">控制时间选择的显示和隐藏(日期时间模式)</h3>
<p>时间选择的显示可以通过 <code>showTimePanel</code> 控制.</p>
<p>默认情况下选择一个日期后时间面板就自动显示.</p>
<!-- ControlOpen -->
<h3 id="控制弹窗打开">控制弹窗打开</h3>
<p>可以通过 <code>open</code> 去控制弹窗的显示</p>
<p>下面的例子说明怎么关闭弹窗当选择秒的时候</p>
<!-- HideSeconds -->
<h3 id="隐藏秒和显示-ampm">隐藏秒和显示 am/pm</h3>
<p>时间选择的列是自动显示通过 <code>format</code>的设置.</p>
<p>你可以通过 <code>showHour</code> <code>showMinute</code> <code>showSecond</code> 覆盖默认值</p>
<!-- MinuteStep -->
<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>
<!-- FixedTimeList -->
<h3 id="固定的时间列表">固定的时间列表</h3>
<p>可以通过 <code>timePickerOptions</code> 提供一个固定的时间列表选择</p>