mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
17 KiB
JavaScript
2 lines
17 KiB
JavaScript
/*! For license information please see 4206.281f427c.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["4206"],{88515:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>DatePicker</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>Used to select date, usually used with the <a href="#/en-US/popup" target="_blank">Popup</a> component.</p>\n</div><div class="van-doc-card"><h3 id="install" tabindex="-1">Install</h3>\n<p>Register component globally via <code>app.use</code>, refer to <a href="#/en-US/advanced-usage#zu-jian-zhu-ce" target="_blank">Component Registration</a> for more registration ways.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">DatePicker</span>);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-date-picker</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentDate"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Choose Date"</span>\n <span class="hljs-attr">:min-date</span>=<span class="hljs-string">"minDate"</span>\n <span class="hljs-attr">:max-date</span>=<span class="hljs-string">"maxDate"</span>\n/></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> currentDate = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'2021'</span>, <span class="hljs-string">'01'</span>, <span class="hljs-string">'01'</span>]);\n <span class="hljs-keyword">return</span> {\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">5</span>, <span class="hljs-number">1</span>),\n currentDate,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="columns-type" tabindex="-1">Columns Type</h3>\n<p>Using <code>columns-type</code> prop to control the type of columns.</p>\n<p>For example:</p>\n<ul>\n<li>Pass in <code>[\'year\']</code> to select year.</li>\n<li>Pass in <code>[\'month\']</code> to select month.</li>\n<li>Pass in <code>[\'year\', \'month\']</code> to select year and month.</li>\n<li>Pass in <code>[\'month\', \'day\']</code> to select month and day.</li>\n</ul>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-date-picker</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentDate"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Choose Year-Month"</span>\n <span class="hljs-attr">:min-date</span>=<span class="hljs-string">"minDate"</span>\n <span class="hljs-attr">:max-date</span>=<span class="hljs-string">"maxDate"</span>\n <span class="hljs-attr">:columns-type</span>=<span class="hljs-string">"columnsType"</span>\n/></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> currentDate = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'2021'</span>, <span class="hljs-string">'01'</span>]);\n <span class="hljs-keyword">const</span> columnsType = [<span class="hljs-string">'year'</span>, <span class="hljs-string">'month'</span>];\n <span class="hljs-keyword">return</span> {\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">5</span>, <span class="hljs-number">1</span>),\n currentDate,\n columnsType,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="options-formatter" tabindex="-1">Options Formatter</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-date-picker</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentDate"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Choose Year-Month"</span>\n <span class="hljs-attr">:min-date</span>=<span class="hljs-string">"minDate"</span>\n <span class="hljs-attr">:max-date</span>=<span class="hljs-string">"maxDate"</span>\n <span class="hljs-attr">:formatter</span>=<span class="hljs-string">"formatter"</span>\n <span class="hljs-attr">:columns-type</span>=<span class="hljs-string">"columnsType"</span>\n/></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> currentDate = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'2021'</span>, <span class="hljs-string">'01'</span>]);\n <span class="hljs-keyword">const</span> columnsType = [<span class="hljs-string">'year'</span>, <span class="hljs-string">'month'</span>];\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">formatter</span> = (<span class="hljs-params">type, option</span>) => {\n <span class="hljs-keyword">if</span> (type === <span class="hljs-string">'year'</span>) {\n option.<span class="hljs-property">text</span> += <span class="hljs-string">' Year'</span>;\n }\n <span class="hljs-keyword">if</span> (type === <span class="hljs-string">'month'</span>) {\n option.<span class="hljs-property">text</span> += <span class="hljs-string">'Month'</span>;\n }\n <span class="hljs-keyword">return</span> option;\n };\n\n <span class="hljs-keyword">return</span> {\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">5</span>, <span class="hljs-number">1</span>),\n formatter,\n currentDate,\n columnsType,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="options-filter" tabindex="-1">Options Filter</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-date-picker</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentDate"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Choose Year-Month"</span>\n <span class="hljs-attr">:filter</span>=<span class="hljs-string">"filter"</span>\n <span class="hljs-attr">:min-date</span>=<span class="hljs-string">"minDate"</span>\n <span class="hljs-attr">:max-date</span>=<span class="hljs-string">"maxDate"</span>\n <span class="hljs-attr">:columns-type</span>=<span class="hljs-string">"columnsType"</span>\n/></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> currentDate = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'2021'</span>, <span class="hljs-string">'01'</span>]);\n <span class="hljs-keyword">const</span> columnsType = [<span class="hljs-string">'year'</span>, <span class="hljs-string">'month'</span>];\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">filter</span> = (<span class="hljs-params">type, options</span>) => {\n <span class="hljs-keyword">if</span> (type === <span class="hljs-string">'month'</span>) {\n <span class="hljs-keyword">return</span> options.<span class="hljs-title function_">filter</span>(<span class="hljs-function">(<span class="hljs-params">option</span>) =></span> <span class="hljs-title class_">Number</span>(option.<span class="hljs-property">value</span>) % <span class="hljs-number">6</span> === <span class="hljs-number">0</span>);\n }\n <span class="hljs-keyword">return</span> options;\n };\n\n <span class="hljs-keyword">return</span> {\n filter,\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">5</span>, <span class="hljs-number">1</span>),\n currentTime,\n columnsType,\n };\n },\n};\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v-model</td>\n<td>Current date</td>\n<td><em>string[]</em></td>\n<td><code>[]</code></td>\n</tr>\n<tr>\n<td>columns-type</td>\n<td>Columns type</td>\n<td><em>string[]</em></td>\n<td><code>[\'year\', \'month\', \'day\']</code></td>\n</tr>\n<tr>\n<td>min-date</td>\n<td>Min date</td>\n<td><em>Date</em></td>\n<td>Ten years ago on January 1</td>\n</tr>\n<tr>\n<td>max-date</td>\n<td>Max date</td>\n<td><em>Date</em></td>\n<td>Ten years later on December 31</td>\n</tr>\n<tr>\n<td>title</td>\n<td>Toolbar title</td>\n<td><em>string</em></td>\n<td><code>\'\'</code></td>\n</tr>\n<tr>\n<td>confirm-button-text</td>\n<td>Text of confirm button</td>\n<td><em>string</em></td>\n<td><code>Confirm</code></td>\n</tr>\n<tr>\n<td>cancel-button-text</td>\n<td>Text of cancel button</td>\n<td><em>string</em></td>\n<td><code>Cancel</code></td>\n</tr>\n<tr>\n<td>show-toolbar</td>\n<td>Whether to show toolbar</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>loading</td>\n<td>Whether to show loading prompt</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>readonly</td>\n<td>Whether to be readonly</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>filter</td>\n<td>Option filter</td>\n<td><em>(type: string, options: PickerOption[]) => PickerOption[]</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>formatter</td>\n<td>Option formatter</td>\n<td><em>(type: string, option: PickerOption) => PickerOption</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>option-height</td>\n<td>Option height, supports <code>px</code> <code>vw</code> <code>vh</code> <code>rem</code> unit, default <code>px</code></td>\n<td><em>number | string</em></td>\n<td><code>44</code></td>\n</tr>\n<tr>\n<td>visible-option-num</td>\n<td>Count of visible columns</td>\n<td><em>number | string</em></td>\n<td><code>6</code></td>\n</tr>\n<tr>\n<td>swipe-duration</td>\n<td>Duration of the momentum animation, unit <code>ms</code></td>\n<td><em>number | string</em></td>\n<td><code>1000</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<table>\n<thead>\n<tr>\n<th>Event</th>\n<th>Description</th>\n<th>Arguments</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>confirm</td>\n<td>Emitted when the confirm button is clicked</td>\n<td><em>{ selectedValues, selectedOptions, selectedIndexes }</em></td>\n</tr>\n<tr>\n<td>cancel</td>\n<td>Emitted when the cancel button is clicked</td>\n<td><em>{ selectedValues, selectedOptions, selectedIndexes }</em></td>\n</tr>\n<tr>\n<td>change</td>\n<td>Emitted when current option is changed</td>\n<td><em>{ selectedValues, selectedOptions, selectedIndexes, columnIndex }</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>SlotProps</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>toolbar</td>\n<td>Custom toolbar content</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>Custom title</td>\n<td>-</td>\n</tr>\n<tr>\n<td>confirm</td>\n<td>Custom confirm button text</td>\n<td>-</td>\n</tr>\n<tr>\n<td>cancel</td>\n<td>Custom cancel button text</td>\n<td>-</td>\n</tr>\n<tr>\n<td>option</td>\n<td>Custom option content</td>\n<td><em>option: PickerOption, index: number</em></td>\n</tr>\n<tr>\n<td>columns-top</td>\n<td>Custom content above columns</td>\n<td>-</td>\n</tr>\n<tr>\n<td>columns-bottom</td>\n<td>Custom content below columns</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="methods" tabindex="-1">Methods</h3>\n<p>Use <a href="https://vuejs.org/guide/essentials/template-refs.html" target="_blank">ref</a> to get Picker instance and call instance methods.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>Attribute</th>\n<th>Return value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>confirm</td>\n<td>Stop scrolling and emit confirm event</td>\n<td>-</td>\n<td>-</td>\n</tr>\n<tr>\n<td>getSelectedDate</td>\n<td>Get current selected date</td>\n<td>-</td>\n<td><em>string[]</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="types" tabindex="-1">Types</h3>\n<p>The component exports the following type definitions:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> {\n <span class="hljs-title class_">DatePickerProps</span>,\n <span class="hljs-title class_">DatePickerColumnType</span>,\n <span class="hljs-title class_">DatePickerInstance</span>,\n} <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n</code></pre>\n<p><code>DatePickerInstance</code> is the type of component instance:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">DatePickerInstance</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> datePickerRef = ref<<span class="hljs-title class_">DatePickerInstance</span>>();\n\ndatePickerRef.<span class="hljs-property">value</span>?.<span class="hljs-title function_">confirm</span>();\n</code></pre>\n</div>'},null,8,e))}}}]); |