mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-05-26 14:34:06 +03:00
mengxiong10
61 lines
2.7 KiB
HTML
61 lines
2.7 KiB
HTML
<!-- 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>"format": return a string same as the input value.</li>
|
|
<li>"date"(default): return a Date Object.</li>
|
|
<li>"timestamp": 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 & 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>
|
|
<!-- Disabled -->
|
|
|
|
<h3 id="disabled--editable">Disabled & 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 & 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>
|