mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
33 lines
42 KiB
JavaScript
33 lines
42 KiB
JavaScript
import{_ as e,E as d,c as n,o as h,aR as l,I as i,a as t,w as a}from"./chunks/framework.C7RrxATG.js";const F=JSON.parse('{"title":"Calendar","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/component/calendar.md","filePath":"en-US/component/calendar.md","lastUpdated":1762249100000}'),r={name:"en-US/component/calendar.md"},p=l(`<h1 id="calendar" tabindex="-1">Calendar <a class="header-anchor" href="#calendar" aria-label="Permalink to "Calendar""></a></h1><p>Provides calendar single selection, multiple selection, range selection, week dimension, month dimension and other functions.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to "Basic Usage""></a></h2><p>The default <code>type</code> is <code>date</code>, set <code>v-model</code> binding value (13-digit timestamp format), and listen to the <code>@confirm</code> event to get the selected value. The <code>min-date</code> minimum date defaults to 6 months before the current date, and the <code>max-date</code> maximum date defaults to 6 months after the current date. The calendar only displays dates between the minimum and maximum dates. The label is optional. You can set the title width through <code>label-width</code>, which defaults to '33%'.</p><blockquote><p>Try not to set <code>min-date</code> and <code>max-date</code> too large to avoid poor page performance due to calculation and transmission of large amounts of data.</p></blockquote><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Date Selection"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(Date.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">now</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleConfirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="multiple-date-selection" tabindex="-1">Multiple Date Selection <a class="header-anchor" href="#multiple-date-selection" aria-label="Permalink to "Multiple Date Selection""></a></h2><p>Set <code>type</code> to <code>dates</code> type, at this time <code>value</code> is an array.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dates"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]>([])</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleConfirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="week-selection" tabindex="-1">Week Selection <a class="header-anchor" href="#week-selection" aria-label="Permalink to "Week Selection""></a></h2><p>Set <code>type</code> to <code>week</code> type. If <code>value</code> has an initial value, it is recommended to set the week start day <code>first-day-of-week</code> to 1 (Monday) to avoid mismatch between selected style and display.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"week"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :first-day-of-week</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(Date.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">now</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleConfirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="month-selection" tabindex="-1">Month Selection <a class="header-anchor" href="#month-selection" aria-label="Permalink to "Month Selection""></a></h2><p>Set <code>type</code> to <code>month</code> type. When <code>value</code> has a value, its value is the first day of the month.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"month"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(Date.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">now</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleConfirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="range-selection" tabindex="-1">Range Selection <a class="header-anchor" href="#range-selection" aria-label="Permalink to "Range Selection""></a></h2><p><code>type</code> supports <code>daterange</code> (date range selection), <code>weekrange</code> (week range selection), <code>monthrange</code> (month range selection) types. At this time, <code>value</code> is in array format.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"daterange"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]>([])</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleConfirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="date-time-type" tabindex="-1">Date Time Type <a class="header-anchor" href="#date-time-type" aria-label="Permalink to "Date Time Type""></a></h2><p>Set <code>type</code> to <code>datetime</code> type to select down to hours, minutes, and seconds. Set <code>type</code> to <code>datetimerange</code> for range selection.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"datetime"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">""</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleConfirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>You can set <code>hide-second</code> to display time only to the minute level; set the <code>time-filter</code> property to customize the filtering of hour, minute, second options. This property accepts { type: string, values: array } parameters and returns a new array. The type value is 'hour', 'minute' or 'second', and values is the picker data list.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"datetime"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hide-second</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :time-filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"timeFilter"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">""</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> timeFilter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">values</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "minute"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Only show 0,10,20,30,40,50 minute options</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> values.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> values</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleConfirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="day-week-month-switch" tabindex="-1">Day/Week/Month Switch <a class="header-anchor" href="#day-week-month-switch" aria-label="Permalink to "Day/Week/Month Switch""></a></h2><p>Set the <code>show-type-switch</code> property to display the day/week/month switch function. It supports switching between date, week, and month types (<code>date</code>, <code>week</code>, <code>month</code>). You can set the initial type through the <code>type</code> property. If <code>type</code> is a range type like <code>daterange</code>, then the calendar can switch between <code>daterange</code>, <code>weekrange</code>, and <code>monthrange</code>.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Day/Week/Month Switch"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :first-day-of-week</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> show-type-switch</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="quick-operation" tabindex="-1">Quick Operation <a class="header-anchor" href="#quick-operation" aria-label="Permalink to "Quick Operation""></a></h2><p>Set the <code>show-confirm</code> property to <code>false</code> to not display the confirm button. This is only valid for <code>date</code>, <code>daterange</code>, <code>week</code>, <code>weekrange</code>, <code>month</code>, <code>monthrange</code> types.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Quick Operation"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :show-confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"false"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="allow-same-day-selection-in-range" tabindex="-1">Allow Same Day Selection in Range <a class="header-anchor" href="#allow-same-day-selection-in-range" aria-label="Permalink to "Allow Same Day Selection in Range""></a></h2><p>Set the <code>allow-same-day</code> property to allow users to select the same day, same week, or same month in range selection.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-calendar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"daterange"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> allow-same-day</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleConfirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="date-formatting" tabindex="-1">Date Formatting <a class="header-anchor" href="#date-formatting" aria-label="Permalink to "Date Formatting""></a></h2><p>Set the <code>formatter</code> parameter, which is a function type that receives an <code>object</code> parameter and returns an object. The properties of the object remain consistent with the input parameters. Its properties are as follows:</p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th><th>Version</th></tr></thead><tbody><tr><td>type</td><td>CalendarDayType</td><td>See <a href="#calendardaytype">CalendarDayType</a> for options</td><td>-</td></tr><tr><td>date</td><td>timestamp</td><td>13-digit timestamp</td><td>-</td></tr><tr><td>text</td><td>string</td><td>Date text content</td><td>-</td></tr><tr><td>topInfo</td><td>string</td><td>Top prompt information</td><td>-</td></tr><tr><td>bottomInfo</td><td>string</td><td>Bottom prompt information</td><td>-</td></tr><tr><td>disabled</td><td>boolean</td><td>Whether disabled</td><td>-</td></tr></tbody></table><h3 id="calendardaytype" tabindex="-1">CalendarDayType <a class="header-anchor" href="#calendardaytype" aria-label="Permalink to "CalendarDayType""></a></h3><table tabindex="0"><thead><tr><th>Type</th><th>Description</th><th>Version</th></tr></thead><tbody><tr><td>selected</td><td>Single date selected</td><td>-</td></tr><tr><td>start</td><td>Range start date</td><td>-</td></tr><tr><td>end</td><td>Range end date</td><td>-</td></tr><tr><td>middle</td><td>Date between range start and end</td><td>-</td></tr><tr><td>same</td><td>Range start and end date are the same day</td><td>-</td></tr><tr><td>current</td><td>Current date</td><td>-</td></tr><tr><td>multiple-middle</td><td>Multiple date range selection, dates between start and end</td><td>1.5.0</td></tr><tr><td>multiple-selected</td><td>Multiple date range selection, selected dates</td><td>1.5.0</td></tr></tbody></table><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to "Attributes""></a></h2><table tabindex="0"><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Options</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>v-model</td><td>Selected value, 13-digit timestamp or timestamp array</td><td>null / number / array</td><td>-</td><td>-</td><td>-</td></tr><tr><td>type</td><td>Date type</td><td>string</td><td>date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange</td><td>date</td><td>-</td></tr><tr><td>min-date</td><td>Minimum date, 13-digit timestamp</td><td>number</td><td>-</td><td>6 months before current date</td><td>-</td></tr><tr><td>max-date</td><td>Maximum date, 13-digit timestamp</td><td>number</td><td>-</td><td>6 months after current date</td><td>-</td></tr><tr><td>first-day-of-week</td><td>Week start day</td><td>number</td><td>-</td><td>0</td><td>-</td></tr><tr><td>formatter</td><td>Date formatting function</td><td>function</td><td>-</td><td>-</td><td>-</td></tr><tr><td>max-range</td><td>Maximum date range for range selection types</td><td>number</td><td>-</td><td>-</td><td>-</td></tr><tr><td>range-prompt</td><td>Error message when selection exceeds maximum date range</td><td>string</td><td>-</td><td>Selection cannot exceed x days</td><td>-</td></tr><tr><td>allow-same-day</td><td>Whether to allow selecting the same day in range selection</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>default-time</td><td>Specific time of day for selected date</td><td>string / array</td><td>-</td><td>00:00:00</td><td>-</td></tr><tr><td>time-filter</td><td>Filter function for time picker data, effective for 'datetime' or 'datetimerange' types</td><td>function</td><td>-</td><td>-</td><td>-</td></tr><tr><td>hide-second</td><td>Whether to hide second modification for 'datetime' or 'datetimerange' types</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>show-confirm</td><td>Whether to show confirm button</td><td>boolean</td><td>-</td><td>true</td><td>-</td></tr><tr><td>show-type-switch</td><td>Whether to show type switch function</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>shortcuts</td><td>Quick options, array of objects with required 'text' property</td><td>array</td><td>-</td><td>-</td><td>-</td></tr><tr><td>title</td><td>Popup title</td><td>string</td><td>-</td><td>Select Date</td><td>-</td></tr><tr><td>label</td><td>Picker left text</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>placeholder</td><td>Picker placeholder</td><td>string</td><td>-</td><td>Please select</td><td>-</td></tr><tr><td>disabled</td><td>Disabled state</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>readonly</td><td>Read-only state</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>display-format</td><td>Custom display text formatting function, returns a string</td><td>function</td><td>-</td><td>-</td><td>-</td></tr><tr><td>inner-display-format</td><td>Custom panel internal display for range selection types, returns a string</td><td>function</td><td>-</td><td>-</td><td>-</td></tr><tr><td>size</td><td>Set picker size</td><td>string</td><td>large</td><td>-</td><td>-</td></tr><tr><td>label-width</td><td>Set left title width</td><td>string</td><td>-</td><td>33%</td><td>-</td></tr><tr><td>error</td><td>Whether in error state, right content is red in error state</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>required</td><td>Required style</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>marker-side</td><td>Position of the required marker</td><td>'before' | 'after'</td><td>-</td><td>'before'</td><td>1.12.0</td></tr><tr><td>center</td><td>Whether to vertically center</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>ellipsis</td><td>Whether to hide overflow</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>align-right</td><td>Display picker value aligned to the right</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>before-confirm</td><td>Validation function before confirmation, receives { value, resolve } parameters, continue through resolve, resolve accepts a boolean parameter</td><td>function</td><td>-</td><td>-</td><td>-</td></tr><tr><td>close-on-click-modal</td><td>Whether to close when clicking mask</td><td>boolean</td><td>-</td><td>true</td><td>-</td></tr><tr><td>z-index</td><td>Popup layer z-index</td><td>number</td><td>-</td><td>15</td><td>-</td></tr><tr><td>safe-area-inset-bottom</td><td>Whether to set bottom safe area for popup panel (iPhone X type devices)</td><td>boolean</td><td>-</td><td>true</td><td>-</td></tr><tr><td>prop</td><td>Form field <code>model</code> field name, required when using form validation</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>rules</td><td>Form validation rules, used with <code>wd-form</code> component</td><td><code>FormItemRule []</code></td><td>-</td><td><code>[]</code></td><td>-</td></tr><tr><td>immediate-change</td><td>Whether to trigger the picker-view's change event immediately when the finger is released. If not enabled, the change event will be triggered after the scrolling animation ends. Available from version 1.2.25, only supported on WeChat Mini Program and Alipay Mini Program.</td><td>boolean</td><td>-</td><td>false</td><td>1.2.25</td></tr><tr><td>with-cell</td><td>Whether to use built-in cell picker</td><td>boolean</td><td>-</td><td>true</td><td>1.5.0</td></tr><tr><td>clearable</td><td>Show clear button</td><td>boolean</td><td>-</td><td>false</td><td>1.11.0</td></tr><tr><td>root-portal</td><td>Whether to detach from the page, used to solve various fixed positioning issues</td><td>boolean</td><td>-</td><td>false</td><td>1.11.0</td></tr></tbody></table><h3 id="formitemrule-data-structure" tabindex="-1">FormItemRule Data Structure <a class="header-anchor" href="#formitemrule-data-structure" aria-label="Permalink to "FormItemRule Data Structure""></a></h3><table tabindex="0"><thead><tr><th>Key</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>required</td><td>Whether required field</td><td><code>boolean</code></td></tr><tr><td>message</td><td>Error message</td><td><code>string</code></td></tr><tr><td>validator</td><td>Validate through function, can return a <code>Promise</code> for async validation</td><td><code>(value, rule) => boolean | Promise</code></td></tr><tr><td>pattern</td><td>Validate through regular expression, validation fails if regex doesn't match</td><td><code>RegExp</code></td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to "Events""></a></h2><table tabindex="0"><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th><th>Version</th></tr></thead><tbody><tr><td>confirm</td><td>Triggered when binding value changes</td><td><code>{ value, type }</code></td><td>-</td></tr><tr><td>change</td><td>Triggered when clicking panel date</td><td><code>{ value }</code></td><td>-</td></tr><tr><td>cancel</td><td>Triggered when clicking close button or mask</td><td>-</td><td>-</td></tr><tr><td>open</td><td>Triggered when calendar opens</td><td>-</td><td>-</td></tr><tr><td>clear</td><td>Triggered when clicking clear button</td><td>-</td><td>1.11.0</td></tr></tbody></table><h2 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to "Methods""></a></h2><table tabindex="0"><thead><tr><th>Method Name</th><th>Description</th><th>Parameters</th><th>Version</th></tr></thead><tbody><tr><td>open</td><td>Open panel</td><td>-</td><td>-</td></tr><tr><td>close</td><td>Close panel</td><td>-</td><td>-</td></tr></tbody></table><h2 id="slots" tabindex="-1">Slots <a class="header-anchor" href="#slots" aria-label="Permalink to "Slots""></a></h2><table tabindex="0"><thead><tr><th>Name</th><th>Description</th><th>Version</th></tr></thead><tbody><tr><td>default</td><td>Custom display</td><td>-</td></tr><tr><td>label</td><td>Left slot</td><td>-</td></tr></tbody></table><h2 id="external-classes" tabindex="-1">External Classes <a class="header-anchor" href="#external-classes" aria-label="Permalink to "External Classes""></a></h2><table tabindex="0"><thead><tr><th>Class Name</th><th>Description</th><th>Version</th></tr></thead><tbody><tr><td>custom-class</td><td>Root node style</td><td>-</td></tr><tr><td>custom-label-class</td><td>Label external custom style</td><td>-</td></tr><tr><td>custom-value-class</td><td>Value external custom style</td><td>-</td></tr></tbody></table><h2 id="source-code" tabindex="-1">Source Code <a class="header-anchor" href="#source-code" aria-label="Permalink to "Source Code""></a></h2>`,57);function o(k,c,g,E,y,u){const s=d("ExternalLink");return h(),n("div",null,[p,i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/calendar"},{default:a(()=>[t("Documentation")]),_:1}),t(" • "),i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-calendar"},{default:a(()=>[t("Component")]),_:1})])}const b=e(r,[["render",o]]);export{F as __pageData,b as default};
|