[stdf]Update Calendar compoent, demo and documents.

demo/src/routes/en_US/calendar/+page.svelte

@@ -2,33 +2,34 @@
 <script>
 	import { Cell, Calendar } from '../../../../../packages/stdf/components';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-	let visible16 = false;
-	let visible17 = false;
-	let visible18 = false;
-	let visible19 = false;
-	let visible20 = false;
-	let visible21 = false;
-	let visible22 = false;
-	let visible23 = false;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+	let visible16 = $state(false);
+	let visible17 = $state(false);
+	let visible18 = $state(false);
+	let visible19 = $state(false);
+	let visible20 = $state(false);
+	let visible21 = $state(false);
+	let visible22 = $state(false);
+	let visible23 = $state(false);
+	let visible24 = $state(false);
 
 	// The 6 days after the current date randomly takes out the INFODATES array, the Date format is yyyymmdd, and the month and day make up for 2 digits
 	const now = new Date();
-	const infoDates = [];
+	const infoDates = $state([]);
 	for (let i = 0; i < 6; i++) {
 		const date = new Date(now.getTime() + i * 24 * 60 * 60 * 1000);
 		infoDates.push(
@@ -68,76 +69,76 @@
 
 	const quickSelectsDay = [-5, -2, 3, 7];
 
-	let selectedDates = [];
-	const getSelectedDatesFunc = e => {
-		selectedDates = e.detail.dates;
+	let selectedDates = $state([]);
+	const getSelectedDatesFunc = dates => {
+		selectedDates = dates;
 	};
 
-	let selectedFormatDates = [];
-	const getSelectedFormatDatesFunc = e => {
-		selectedFormatDates = e.detail.dates;
+	let selectedFormatDates = $state([]);
+	const getSelectedFormatDatesFunc = dates => {
+		selectedFormatDates = dates;
 	};
 </script>
 
 <div class="py-4">
-	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
+	<Cell title="Basic usage" onclick={() => (visible1 = true)} />
 	<Calendar bind:visible={visible1} />
 
-	<Cell title="Choice" on:click={() => (visible7 = true)} />
+	<Cell title="Choice" onclick={() => (visible7 = true)} />
 	<Calendar bind:visible={visible7} mode="multiple" />
 
-	<Cell title="Range selection" on:click={() => (visible8 = true)} />
+	<Cell title="Range selection" onclick={() => (visible8 = true)} />
 	<Calendar bind:visible={visible8} mode="range" />
 
-	<Cell title="Starting from Sunday" on:click={() => (visible2 = true)} />
+	<Cell title="Starting from Sunday" onclick={() => (visible2 = true)} />
 	<Calendar bind:visible={visible2} startSunday />
 
-	<Cell title="Weekend text marking red" on:click={() => (visible3 = true)} />
+	<Cell title="Weekend text marking red" onclick={() => (visible3 = true)} />
 	<Calendar bind:visible={visible3} weekendRed />
 
-	<Cell title="No card style but add watermark" on:click={() => (visible4 = true)} />
+	<Cell title="No card style but add watermark" onclick={() => (visible4 = true)} />
 	<Calendar bind:visible={visible4} monthCard={false} monthMark />
 
-	<Cell title="Higher" on:click={() => (visible5 = true)} />
+	<Cell title="Higher" onclick={() => (visible5 = true)} />
 	<Calendar bind:visible={visible5} height={60} />
 
-	<Cell title="Customize the date of display information" on:click={() => (visible6 = true)} />
+	<Cell title="Customize the date of display information" onclick={() => (visible6 = true)} />
 	<Calendar bind:visible={visible6} {infoDates} />
 
-	<Cell title="Do not round the corner" on:click={() => (visible9 = true)} />
+	<Cell title="Do not round the corner" onclick={() => (visible9 = true)} />
 	<Calendar bind:visible={visible9} mode="range" radius="none" />
 
-	<Cell title="Increase the corner" on:click={() => (visible10 = true)} />
+	<Cell title="Increase the corner" onclick={() => (visible10 = true)} />
 	<Calendar bind:visible={visible10} mode="range" radius="2xl" />
 
-	<Cell title="Turn off the animation when rolling" on:click={() => (visible18 = true)} />
+	<Cell title="Turn off the animation when rolling" onclick={() => (visible18 = true)} />
 	<Calendar bind:visible={visible18} useAnimation={false} />
 
-	<Cell title="Configure confirmation button style" on:click={() => (visible11 = true)} />
+	<Cell title="Configure confirmation button style" onclick={() => (visible11 = true)} />
 	<Calendar bind:visible={visible11} button={{ radius: 'full' }} />
 
-	<Cell title="Top rounded corner" on:click={() => (visible19 = true)} />
+	<Cell title="Top rounded corner" onclick={() => (visible19 = true)} />
 	<Calendar bind:visible={visible19} popup={{ radius: 'xl' }} />
 
-	<Cell title="Definition start and end month" on:click={() => (visible12 = true)} />
+	<Cell title="Definition start and end month" onclick={() => (visible12 = true)} />
 	<Calendar bind:visible={visible12} startMonth="202101" endMonth="202106" />
 
-	<Cell title="Customize the unsalented date" on:click={() => (visible13 = true)} />
+	<Cell title="Customize the unsalented date" onclick={() => (visible13 = true)} />
 	<Calendar bind:visible={visible13} {disabledDates} mode="range" />
 
-	<Cell title="No showed days have been displayed" on:click={() => (visible14 = true)} />
+	<Cell title="No showed days have been displayed" onclick={() => (visible14 = true)} />
 	<Calendar bind:visible={visible14} mode="range" showSelectedDay={false} />
 
-	<Cell title="Customized initial display month" subTitle="Third month before the current month" on:click={() => (visible15 = true)} />
+	<Cell title="Customized initial display month" subTitle="Third month before the current month" onclick={() => (visible15 = true)} />
 	<Calendar bind:visible={visible15} {initMonth} />
 
-	<Cell title="Show some fast selection items" on:click={() => (visible16 = true)} />
+	<Cell title="Show some fast selection items" onclick={() => (visible16 = true)} />
 	<Calendar bind:visible={visible16} mode="range" quickSelects={['week', 'month', 'quarter', -3, -7, -30, 3, 7, 30]} />
 
-	<Cell title="Quickly choose to include that day" on:click={() => (visible23 = true)} />
+	<Cell title="Quickly choose to include that day" onclick={() => (visible23 = true)} />
 	<Calendar bind:visible={visible23} mode="range" quickSelects={quickSelectsDay} includeToday />
 
-	<Cell title="Select this week from Sunday" on:click={() => (visible17 = true)} />
+	<Cell title="Select this week from Sunday" onclick={() => (visible17 = true)} />
 	<Calendar bind:visible={visible17} mode="range" startSunday quickSelects={['week']} />
 
 	<div class="px-4">
@@ -152,8 +153,8 @@
 			<div class="text-center">{item}</div>
 		{/each}
 	</div>
-	<Cell title="Get the selection date of returning" on:click={() => (visible20 = true)} />
-	<Calendar bind:visible={visible20} mode="range" on:confirm={getSelectedDatesFunc} />
+	<Cell title="Get the selection date of returning" onclick={() => (visible20 = true)} />
+	<Calendar bind:visible={visible20} mode="range" onconfirm={getSelectedDatesFunc} />
 
 	<div class="px-4">
 		{#if selectedFormatDates.length}
@@ -167,9 +168,12 @@
 			<div class="text-center">{item}</div>
 		{/each}
 	</div>
-	<Cell title="Customized date format" on:click={() => (visible21 = true)} />
-	<Calendar bind:visible={visible21} mode="range" outFormat="M/D/Y" on:confirm={getSelectedFormatDatesFunc} />
+	<Cell title="Customized date format" onclick={() => (visible21 = true)} />
+	<Calendar bind:visible={visible21} mode="range" outFormat="M/D/Y" onconfirm={getSelectedFormatDatesFunc} />
 
-	<Cell title="Turn off today's highlight display" on:click={() => (visible22 = true)} />
+	<Cell title="Turn off today's highlight display" onclick={() => (visible22 = true)} />
 	<Calendar bind:visible={visible22} highlightToday={false} />
+
+	<Cell title="Do not clear the selected date when closing" onclick={() => (visible24 = true)} />
+	<Calendar bind:visible={visible24} mode="range" clear={false} />
 </div>

demo/src/routes/zh_CN/calendar/+page.svelte

@@ -2,33 +2,34 @@
 <script>
 	import { Cell, Calendar } from '../../../../../packages/stdf/components';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-	let visible16 = false;
-	let visible17 = false;
-	let visible18 = false;
-	let visible19 = false;
-	let visible20 = false;
-	let visible21 = false;
-	let visible22 = false;
-	let visible23 = false;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+	let visible16 = $state(false);
+	let visible17 = $state(false);
+	let visible18 = $state(false);
+	let visible19 = $state(false);
+	let visible20 = $state(false);
+	let visible21 = $state(false);
+	let visible22 = $state(false);
+	let visible23 = $state(false);
+	let visible24 = $state(false);
 
 	// 随机取出当前日期后的6天，组成 infoDates 数组，其中 date 格式为 YYYYMMDD，月和日补足2位
 	const now = new Date();
-	const infoDates = [];
+	const infoDates = $state([]);
 	for (let i = 0; i < 6; i++) {
 		const date = new Date(now.getTime() + i * 24 * 60 * 60 * 1000);
 		infoDates.push(
@@ -68,76 +69,76 @@
 
 	const quickSelectsDay = [-5, -2, 3, 7];
 
-	let selectedDates = [];
-	const getSelectedDatesFunc = e => {
-		selectedDates = e.detail.dates;
+	let selectedDates = $state([]);
+	const getSelectedDatesFunc = dates => {
+		selectedDates = dates;
 	};
 
-	let selectedFormatDates = [];
-	const getSelectedFormatDatesFunc = e => {
-		selectedFormatDates = e.detail.dates;
+	let selectedFormatDates = $state([]);
+	const getSelectedFormatDatesFunc = dates => {
+		selectedFormatDates = dates;
 	};
 </script>
 
 <div class="py-4">
-	<Cell title="基础用法" on:click={() => (visible1 = true)} />
+	<Cell title="基础用法" onclick={() => (visible1 = true)} />
 	<Calendar bind:visible={visible1} />
 
-	<Cell title="多选" on:click={() => (visible7 = true)} />
+	<Cell title="多选" onclick={() => (visible7 = true)} />
 	<Calendar bind:visible={visible7} mode="multiple" />
 
-	<Cell title="范围选择" on:click={() => (visible8 = true)} />
+	<Cell title="范围选择" onclick={() => (visible8 = true)} />
 	<Calendar bind:visible={visible8} mode="range" />
 
-	<Cell title="从周日开始" on:click={() => (visible2 = true)} />
+	<Cell title="从周日开始" onclick={() => (visible2 = true)} />
 	<Calendar bind:visible={visible2} startSunday />
 
-	<Cell title="周末文字标红" on:click={() => (visible3 = true)} />
+	<Cell title="周末文字标红" onclick={() => (visible3 = true)} />
 	<Calendar bind:visible={visible3} weekendRed />
 
-	<Cell title="不使用卡片样式且加水印" on:click={() => (visible4 = true)} />
+	<Cell title="不使用卡片样式且加水印" onclick={() => (visible4 = true)} />
 	<Calendar bind:visible={visible4} monthCard={false} monthMark />
 
-	<Cell title="高一点" on:click={() => (visible5 = true)} />
+	<Cell title="高一点" onclick={() => (visible5 = true)} />
 	<Calendar bind:visible={visible5} height={60} />
 
-	<Cell title="自定义显示信息的日期" on:click={() => (visible6 = true)} />
+	<Cell title="自定义显示信息的日期" onclick={() => (visible6 = true)} />
 	<Calendar bind:visible={visible6} {infoDates} />
 
-	<Cell title="不要圆角" on:click={() => (visible9 = true)} />
+	<Cell title="不要圆角" onclick={() => (visible9 = true)} />
 	<Calendar bind:visible={visible9} mode="range" radius="none" />
 
-	<Cell title="加大圆角" on:click={() => (visible10 = true)} />
+	<Cell title="加大圆角" onclick={() => (visible10 = true)} />
 	<Calendar bind:visible={visible10} mode="range" radius="2xl" />
 
-	<Cell title="滚动时关闭动画" on:click={() => (visible18 = true)} />
+	<Cell title="滚动时关闭动画" onclick={() => (visible18 = true)} />
 	<Calendar bind:visible={visible18} useAnimation={false} />
 
-	<Cell title="配置确认按钮样式" on:click={() => (visible11 = true)} />
+	<Cell title="配置确认按钮样式" onclick={() => (visible11 = true)} />
 	<Calendar bind:visible={visible11} button={{ radius: 'full' }} />
 
-	<Cell title="顶部来点圆角" on:click={() => (visible19 = true)} />
+	<Cell title="顶部来点圆角" onclick={() => (visible19 = true)} />
 	<Calendar bind:visible={visible19} popup={{ radius: 'xl' }} />
 
-	<Cell title="定义开始与结束月" on:click={() => (visible12 = true)} />
+	<Cell title="定义开始与结束月" onclick={() => (visible12 = true)} />
 	<Calendar bind:visible={visible12} startMonth="202101" endMonth="202106" />
 
-	<Cell title="自定义不可选日期" on:click={() => (visible13 = true)} />
+	<Cell title="自定义不可选日期" onclick={() => (visible13 = true)} />
 	<Calendar bind:visible={visible13} {disabledDates} mode="range" />
 
-	<Cell title="多选或范围选择时不显示已选天数" on:click={() => (visible14 = true)} />
+	<Cell title="多选或范围选择时不显示已选天数" onclick={() => (visible14 = true)} />
 	<Calendar bind:visible={visible14} mode="range" showSelectedDay={false} />
 
-	<Cell title="自定义初始显示月份" subTitle="开始月份为当前月份前第三个月" on:click={() => (visible15 = true)} />
+	<Cell title="自定义初始显示月份" subTitle="开始月份为当前月份前第三个月" onclick={() => (visible15 = true)} />
 	<Calendar bind:visible={visible15} {initMonth} />
 
-	<Cell title="展示一些快速选择项" on:click={() => (visible16 = true)} />
+	<Cell title="展示一些快速选择项" onclick={() => (visible16 = true)} />
 	<Calendar bind:visible={visible16} mode="range" quickSelects={['week', 'month', 'quarter', -3, -7, -30, 3, 7, 30]} />
 
-	<Cell title="快速选择天数时包含当天" on:click={() => (visible23 = true)} />
+	<Cell title="快速选择天数时包含当天" onclick={() => (visible23 = true)} />
 	<Calendar bind:visible={visible23} mode="range" quickSelects={quickSelectsDay} includeToday />
 
-	<Cell title="从周日开始快速选择本周" on:click={() => (visible17 = true)} />
+	<Cell title="从周日开始快速选择本周" onclick={() => (visible17 = true)} />
 	<Calendar bind:visible={visible17} mode="range" startSunday quickSelects={['week']} />
 
 	<div class="px-4">
@@ -152,8 +153,8 @@
 			<div class="text-center">{item}</div>
 		{/each}
 	</div>
-	<Cell title="获取返回的选定日期" on:click={() => (visible20 = true)} />
-	<Calendar bind:visible={visible20} mode="range" on:confirm={getSelectedDatesFunc} />
+	<Cell title="获取返回的选定日期" onclick={() => (visible20 = true)} />
+	<Calendar bind:visible={visible20} mode="range" onconfirm={getSelectedDatesFunc} />
 
 	<div class="px-4">
 		{#if selectedFormatDates.length}
@@ -167,9 +168,12 @@
 			<div class="text-center">{item}</div>
 		{/each}
 	</div>
-	<Cell title="自定义返回的日期格式" on:click={() => (visible21 = true)} />
-	<Calendar bind:visible={visible21} mode="range" outFormat="Y年M月D日" on:confirm={getSelectedFormatDatesFunc} />
+	<Cell title="自定义返回的日期格式" onclick={() => (visible21 = true)} />
+	<Calendar bind:visible={visible21} mode="range" outFormat="Y年M月D日" onconfirm={getSelectedFormatDatesFunc} />
 
-	<Cell title="今日日期关闭高亮显示" on:click={() => (visible22 = true)} />
+	<Cell title="今日日期关闭高亮显示" onclick={() => (visible22 = true)} />
 	<Calendar bind:visible={visible22} highlightToday={false} />
+
+	<Cell title="关闭时不清空已选日期" onclick={() => (visible24 = true)} />
+	<Calendar bind:visible={visible24} mode="range" clear={false} />
 </div>

doc/components/calendar/api.md

@@ -1,44 +1,44 @@
 ## Calendar Props
 
-| 属性            | 类型         | 默认值                               | 可选值                                    | 必传 | 说明                                         |
-| --------------- | ------------ | ------------------------------------ | ----------------------------------------- | ---- | -------------------------------------------- |
-| visible         | Boolean      | false                                | true/false                                | N    | 是否显示。                                   |
-| startMonth      | String       | 当前月份前第 6 个月                  | 年月日组成的 YYYYMM 格式字符串。          | N    | 开始月份。                                   |
-| endMonth        | String       | 当前月份后第 6 个月                  | 年月日组成的 YYYYMM 格式字符串。          | N    | 结束月份。                                   |
-| initMonth       | String       | 当前月份                             | 年月日组成的 YYYYMM 格式字符串。          | N    | 初始化时显示月份。                           |
-| mode            | String       | 'single'                             | 'single'/'multiple'/'range'               | N    | 选择模式。                                   |
-| startSunday     | Boolean      | false                                | true/false                                | N    | 是否从周日开始。                             |
-| weekendRed      | Boolean      | false                                | true/false                                | N    | 是否周末红色。                               |
-| monthCard       | Boolean      | true                                 | true/false                                | N    | 月数据是否使用卡片样式。                     |
-| monthMark       | Boolean      | false                                | true/false                                | N    | 是否显示月份水印。                           |
-| monthMarkSize   | String       | '7xl'                                | '3xl'/'4xl'/'5xl'/'6xl'/'7xl'/'8xl'/'9xl' | N    | 月份水印文字大小。                           |
-| height          | Number       | 50                                   | 0-100                                     | N    | 显示高度占页面高度百分比。                   |
-| infoDates       | Array        | []                                   | 参考 infoDates Props 。                   | N    | 需要显示信息的日期。                         |
-| disabledDates   | Array        | []                                   | 由年月日 YYYYMMDD 格式组成的数组。        | N    | 不可选的日期。                               |
-| radius          | String       | 'xl'                                 | 'none'/'base'/'xl'/'2xl'                  | N    | 选定日期的圆角风格。                         |
-| showSelectedDay | Boolean      | true                                 | true/false                                | N    | 多选和范围选择时确定按钮是否显示已选天数。   |
-| confirmText     | String       | 当前语言的 calendarLang.confirmText  | -                                         | N    | 确定按钮文案。                               |
-| selectedText    | String       | 当前语言的 calendarLang.selectedText | -                                         | N    | showSelectedDay 为 true 时确定按钮部分文案。 |
-| dayText         | String       | 当前语言的 calendarLang.dayText      | -                                         | N    | showSelectedDay 为 true 时确定按钮部分文案。 |
-| quickSelects    | Array/Number | []                                   | 'week'/'month'/'quarter'/正整数/负整数    | N    | 快捷选择配置参数。                           |
-| includeToday    | Boolean      | false                                | true/false                                | N    | 快速选择天数时是否包含今天。                 |
-| highlightToday  | Boolean      | true                                 | true/false                                | N    | 是否高亮今天。                               |
-| useAnimation    | Boolean      | true                                 | true/false                                | N    | 自动滚动到指定月份时是否使用动画。           |
-| outFormat       | String       | 'YMD'                                | 包含 Y M D 组合的字符。                   | N    | 返回日期数据格式。                           |
-| popup           | Object       | {}                                   | 参考 Popup Props                          | N    | 弹出层参数。                                 |
-| button          | Object       | {}                                   | 参考 Button Props                         | N    | 确定按钮参数。                               |
+| 名称            | 类型                                              | 默认值                               | 必传 | 说明                                                                             |
+| --------------- | ------------------------------------------------- | ------------------------------------ | ---- | -------------------------------------------------------------------------------- |
+| visible         | `boolean`                                         | `false`                              | N    | 是否显示。                                                                       |
+| startMonth      | `string`                                          | 当前月份前第 6 个月                  | N    | 开始月份，格式为 YYYYMM。                                                        |
+| endMonth        | `string`                                          | 当前月份后第 6 个月                  | N    | 结束月份，格式为 YYYYMM。                                                        |
+| initMonth       | `string`                                          | 当前月份                             | N    | 初始化时显示月份，格式为 YYYYMM。                                                |
+| mode            | `'single'\|'multiple'\|'range'`                   | `'single'`                           | N    | 选择模式。                                                                       |
+| startSunday     | `boolean`                                         | `false`                              | N    | 是否从周日开始。                                                                 |
+| weekendRed      | `boolean`                                         | `false`                              | N    | 是否周末红色。                                                                   |
+| monthCard       | `boolean`                                         | `true`                               | N    | 月数据是否使用卡片样式。                                                         |
+| monthMark       | `boolean`                                         | `false`                              | N    | 是否显示月份水印。                                                               |
+| monthMarkSize   | `'3xl'\|'4xl'\|'5xl'\|'6xl'\|'7xl'\|'8xl'\|'9xl'` | `'7xl'`                              | N    | 月份水印文字大小。                                                               |
+| height          | `number`                                          | `50`                                 | N    | 显示高度占页面高度百分比。                                                       |
+| infoDates       | `InfoDate[]`                                      | `[]`                                 | N    | 需要显示信息的日期。                                                             |
+| disabledDates   | `string[]`                                        | `[]`                                 | N    | 不可选的日期。                                                                   |
+| radius          | `'none'\|'base'\|'xl'\|'2xl'`                     | `'xl'`                               | N    | 选定日期的圆角风格。                                                             |
+| showSelectedDay | `boolean`                                         | `true`                               | N    | 多选和范围选择时确定按钮是否显示已选天数。                                       |
+| confirmText     | `string`                                          | 当前语言的 calendarLang.confirmText  | N    | 确定按钮文案。                                                                   |
+| selectedText    | `string`                                          | 当前语言的 calendarLang.selectedText | N    | showSelectedDay 为 true 时确定按钮部分文案。                                     |
+| dayText         | `string`                                          | 当前语言的 calendarLang.dayText      | N    | showSelectedDay 为 true 时确定按钮部分文案。                                     |
+| quickSelects    | `('week'\|'month'\|'quarter'\|number)[]`          | `[]`                                 | N    | 快捷选择配置参数。                                                               |
+| includeToday    | `boolean`                                         | `false`                              | N    | 快速选择天数时是否包含今天。                                                     |
+| highlightToday  | `boolean`                                         | `true`                               | N    | 是否高亮今天。                                                                   |
+| useAnimation    | `boolean`                                         | `true`                               | N    | 自动滚动到指定月份时是否使用动画。                                               |
+| outFormat       | `string`                                          | `'YMD'`                              | N    | 返回日期数据格式。                                                               |
+| popup           | `Popup`                                           | `{}`                                 | N    | 弹出层参数 [Popup Props](https://stdf.design/#/components?nav=popup&tab=1)。     |
+| button          | `Button`                                          | `{}`                                 | N    | 确定按钮参数 [Button Props](https://stdf.design/#/components?nav=button&tab=1)。 |
+| clear           | `boolean`                                         | `true`                               | N    | 关闭时是否清空已选日期。                                                         |
 
 ## Calendar Events
 
-| 名称    | 参数                                                                                      | 描述                 |
-| ------- | ----------------------------------------------------------------------------------------- | -------------------- |
-| open    | -                                                                                         | 打开时触发。         |
-| close   | -                                                                                         | 关闭时触发。         |
-| confirm | event：事件对象，其中 detail 内有一个参数 dates：所有格式化后的选定日期字符串组成的数组。 | 点击确定按钮时触发。 |
+| 名称      | 类型                        | 参数                                           | 描述                 |
+| --------- | --------------------------- | ---------------------------------------------- | -------------------- |
+| onclose   | `() => void`                | -                                              | 关闭时触发。         |
+| onconfirm | `(dates: string[]) => void` | dates - 所有选定日期格式化后字符串组成的数组。 | 点击确定按钮时触发。 |
 
-## infoDates Props
+## InfoDate Props
 
-| 属性 | 类型   | 默认值 | 可选值                           | 必传 | 说明       |
-| ---- | ------ | ------ | -------------------------------- | ---- | ---------- |
-| date | String | -      | 由年月日 YYYYMMDD 格式组成的数组 | Y    | 日期。     |
-| info | String | -      | -                                | Y    | 信息内容。 |
+| 名称 | 类型     | 默认值 | 必传 | 说明                               |
+| ---- | -------- | ------ | ---- | ---------------------------------- |
+| date | `string` | -      | Y    | 由年月日 YYYYMMDD 格式组成的数组。 |
+| info | `string` | -      | Y    | 信息内容，长度尽量短。             |

doc/components/calendar/api_en.md

@@ -1,44 +1,44 @@
 ## Calendar Props
 
-| Property        | Type         | Default Value                        | Optional Values                                             | Required | Description                                                       |
-| --------------- | ------------ | ------------------------------------ | ----------------------------------------------------------- | -------- | ----------------------------------------------------------------- |
-| visible         | Boolean      | false                                | true/false                                                  | N        | Whether the calendar is visible.                                  |
-| startMonth      | String       | 6 months ago from current month      | A YYYYMM formatted string representing a date.              | N        | The starting month.                                               |
-| endMonth        | String       | 6 months after current month         | A YYYYMM formatted string representing a date.              | N        | The ending month.                                                 |
-| initMonth       | String       | Current month                        | A YYYYMM formatted string representing a date.              | N        | The initial month to display.                                     |
-| mode            | String       | 'single'                             | 'single'/'multiple'/'range'                                 | N        | The selection mode.                                               |
-| startSunday     | Boolean      | false                                | true/false                                                  | N        | Whether the week starts on Sunday.                                |
-| weekendRed      | Boolean      | false                                | true/false                                                  | N        | Whether weekends are displayed in red.                            |
-| monthCard       | Boolean      | true                                 | true/false                                                  | N        | Whether to use card style for month data.                         |
-| monthMark       | Boolean      | false                                | true/false                                                  | N        | Whether to display the month watermark.                           |
-| monthMarkSize   | String       | '7xl'                                | '3xl'/'4xl'/'5xl'/'6xl'/'7xl'/'8xl'/'9xl'                   | N        | The size of the month watermark text.                             |
-| height          | Number       | 50                                   | A number representing the percentage of height.             | N        | The height of the calendar as a percentage.                       |
-| infoDates       | Array        | []                                   | Refer to infoDates Props.                                   | Y        | Dates that need to display information.                           |
-| disabledDates   | Array        | []                                   | Array of dates in YYYYMMDD format.                          | Y        | Dates that are not selectable.                                    |
-| radius          | String       | 'xl'                                 | 'none'/'base'/'xl'/'2xl'                                    | Y        | The style of rounded corners on selected dates.                   |
-| showSelectedDay | Boolean      | true                                 | true/false                                                  | Y        | Whether to show the number of selected days.                      |
-| confirmText     | String       | The current language's confirm text  | -                                                           | Y        | The text shown on the confirm button.                             |
-| selectedText    | String       | The current language's selected text | -                                                           | Y        | Part of the text shown on the confirm button.                     |
-| dayText         | String       | The current language's day text      | -                                                           | Y        | Part of the text shown on the confirm button.                     |
-| quickSelects    | Array/Number | []                                   | 'week'/'month'/'quarter'/positive integer/ negative integer | Y        | Configuration parameters for quick date selection.                |
-| includeToday    | Boolean      | false                                | true/false                                                  | Y        | Whether to include today in quick date selection.                 |
-| highlightToday  | Boolean      | true                                 | true/false                                                  | Y        | Whether to highlight today.                                       |
-| useAnimation    | Boolean      | true                                 | true/false                                                  | Y        | Whether to use animation when auto-scrolling to specified months. |
-| outFormat       | String       | 'YMD'                                | A combination of characters including Y M D.                | Y        | The format of the returned date data.                             |
-| popup           | Object       | {}                                   | Refer to Popup Props.                                       | Y        | Parameters for the popup component.                               |
-| button          | Object       | {}                                   | Refer to Button Props.                                      | Y        | Parameters for the confirm button.                                |
+| Name            | Type                                              | Default                                    | Required | Description                                                                                  |
+| --------------- | ------------------------------------------------- | ------------------------------------------ | -------- | -------------------------------------------------------------------------------------------- |
+| visible         | `boolean`                                         | `false`                                    | N        | Whether to show the calendar.                                                                |
+| startMonth      | `string`                                          | 6 months before current month              | N        | Start month in YYYYMM format.                                                                |
+| endMonth        | `string`                                          | 6 months after current month               | N        | End month in YYYYMM format.                                                                  |
+| initMonth       | `string`                                          | Current month                              | N        | Initial display month in YYYYMM format.                                                      |
+| mode            | `'single'\|'multiple'\|'range'`                   | `'single'`                                 | N        | Selection mode.                                                                              |
+| startSunday     | `boolean`                                         | `false`                                    | N        | Whether week starts from Sunday.                                                             |
+| weekendRed      | `boolean`                                         | `false`                                    | N        | Whether weekend dates are in red.                                                            |
+| monthCard       | `boolean`                                         | `true`                                     | N        | Whether to use card style for month data.                                                    |
+| monthMark       | `boolean`                                         | `false`                                    | N        | Whether to show month watermark.                                                             |
+| monthMarkSize   | `'3xl'\|'4xl'\|'5xl'\|'6xl'\|'7xl'\|'8xl'\|'9xl'` | `'7xl'`                                    | N        | Month watermark text size.                                                                   |
+| height          | `number`                                          | `50`                                       | N        | Display height as percentage of page height.                                                 |
+| infoDates       | `InfoDate[]`                                      | `[]`                                       | N        | Dates that need to display information.                                                      |
+| disabledDates   | `string[]`                                        | `[]`                                       | N        | Disabled dates.                                                                              |
+| radius          | `'none'\|'base'\|'xl'\|'2xl'`                     | `'xl'`                                     | N        | Border radius style for selected dates.                                                      |
+| showSelectedDay | `boolean`                                         | `true`                                     | N        | Whether to show selected days count in confirm button for multiple/range mode.               |
+| confirmText     | `string`                                          | Current language calendarLang.confirmText  | N        | Confirm button text.                                                                         |
+| selectedText    | `string`                                          | Current language calendarLang.selectedText | N        | Part of confirm button text when showSelectedDay is true.                                    |
+| dayText         | `string`                                          | Current language calendarLang.dayText      | N        | Part of confirm button text when showSelectedDay is true.                                    |
+| quickSelects    | `('week'\|'month'\|'quarter'\|number)[]`          | `[]`                                       | N        | Quick selection configuration parameters.                                                    |
+| includeToday    | `boolean`                                         | `false`                                    | N        | Whether to include today when using quick select days.                                       |
+| highlightToday  | `boolean`                                         | `true`                                     | N        | Whether to highlight today.                                                                  |
+| useAnimation    | `boolean`                                         | `true`                                     | N        | Whether to use animation when auto-scrolling to specified month.                             |
+| outFormat       | `string`                                          | `'YMD'`                                    | N        | Output date format.                                                                          |
+| popup           | `Popup`                                           | `{}`                                       | N        | Popup parameters [Popup Props](https://stdf.design/#/components?nav=popup&tab=1).            |
+| button          | `Button`                                          | `{}`                                       | N        | Confirm button parameters [Button Props](https://stdf.design/#/components?nav=button&tab=1). |
+| clear           | `boolean`                                         | `true`                                     | N        | Whether to clear selected dates when closing.                                                |
 
 ## Calendar Events
 
-| Name    | Parameter                                                                                 | Description                                   |
-| ------- | ----------------------------------------------------------------------------------------- | --------------------------------------------- |
-| open    | -                                                                                         | Triggered when the calendar is opened.        |
-| close   | -                                                                                         | Triggered when the calendar is closed.        |
-| confirm | event: the event object, which includes a parameter `dates`: an array of formatted dates. | Triggered when the Confirm button is clicked. |
+| Name      | Type                        | Parameters                                        | Description                 |
+| --------- | --------------------------- | ------------------------------------------------- | --------------------------- |
+| onclose   | `() => void`                | -                                                 | Triggered when closing.     |
+| onconfirm | `(dates: string[]) => void` | dates - Array of formatted selected date strings. | Triggered on confirm click. |
 
-## infoDates Props
+## InfoDate Props
 
-| Property | Type   | Default Value | Optional Values                | Required | Description  |
-| -------- | ------ | ------------- | ------------------------------ | -------- | ------------ |
-| date     | String | -             | An array of dates in YYYYMMDD. | Y        | The date.    |
-| info     | String | -             | -                              | Y        | Information. |
+| Name | Type     | Default | Required | Description                           |
+| ---- | -------- | ------- | -------- | ------------------------------------- |
+| date | `string` | -       | Y        | Date in YYYYMMDD format.              |
+| info | `string` | -       | Y        | Information content, keep it concise. |

doc/components/calendar/version.md

@@ -1,3 +1,7 @@
+## 1.0.0
+
+- [!tag|A|0|]新增 `clear` 属性，关闭时可保留已选日期。
+
 ## 0.0.8
 
 - [!tag|B|2|]修复显示快捷选项时已选项的高亮样式。

doc/components/calendar/version_en.md

@@ -1,3 +1,7 @@
+## 1.0.0
+
+- [!tag|A|0|]Add `clear` property, keep the selected date when closed.
+
 ## 0.0.8
 
 - [!tag|B|2|]Fix the highlighted style that was selected when shortcut options were displayed.

packages/stdf/components/calendar/Calendar.svelte

@@ -47,8 +47,8 @@
 		outFormat = 'YMD',
 		popup = {},
 		button = {},
+		clear = true,
 		onconfirm,
-		onopen,
 		onclose,
 	} = $props();
 
@@ -108,13 +108,11 @@
 
 	// 循环 monthList，根据每个月份的数据，生成全部的日历数据，其中 month 为当前月，year 为年，data 为日期数组
 	// Loop monthList, generate all calendar data according to the data of each month, where month is the current month, year is the year, and data is the date array
-	const allMonthData = monthList.map(monthStr => {
-		return {
-			year: monthStr.slice(0, 4),
-			month: monthStr.slice(4),
-			data: getCalendarData(monthStr, startSunday),
-		};
-	});
+	const allMonthData = monthList.map(monthStr => ({
+		year: monthStr.slice(0, 4),
+		month: monthStr.slice(4),
+		data: getCalendarData(monthStr, startSunday),
+	}));
 
 	// 如果 infoDates 不为空，循环 allMonthData，循环 data，循环 infoDates，如果 infoDates 中的日期和 data 中的日期相同，将 infoDates 中的 info 赋值给 data 中的 info
 	// If infoDates is not empty, loop allMonthData, loop data, loop infoDates, if the date in infoDates is the same as the date in data, assign the info in infoDates to the info in data
@@ -171,9 +169,7 @@
 			if (rangeArr.length === 2) {
 				// 将 rangeArr 排序，保证第一个日期小于第二个日期
 				// Sort rangeArr to ensure that the first date is less than the second date
-				rangeArr.sort((a, b) => {
-					return Number(a) - Number(b);
-				});
+				rangeArr.sort((a, b) => Number(a) - Number(b));
 				selectedDate = getDateRange(rangeArr[0], rangeArr[1], disabledDates);
 				rangeArr = [];
 			} else {
@@ -191,9 +187,7 @@
 		}
 		// 对 selectedDate 按照日期排序
 		// Sort selectedDate by date
-		selectedDate.sort((a, b) => {
-			return Number(a) - Number(b);
-		});
+		selectedDate.sort((a, b) => Number(a) - Number(b));
 		selectedDateStr = selectedDate.join(',');
 	};
 
@@ -260,9 +254,7 @@
 		// 根据传入的 outFormat，循环 selectedDate，将 selectedDate 中的日期使用 getDateStrFunc 转换为 outFormat 格式的日期字符串
 		// Loop selectedDate according to the outFormat passed in, and use getDateStrFunc to convert the date in selectedDate to a date string in the outFormat format
 		if (selectedDate.length) {
-			selectedDate = selectedDate.map(item => {
-				return getDateStrFunc(outFormat, item);
-			});
+			selectedDate = selectedDate.map(item => getDateStrFunc(outFormat, item));
 		}
 		onconfirm && onconfirm(selectedDate);
 	};
@@ -278,11 +270,11 @@
 	// 监听 visible 的变化，派发事件
 	// Listen to the change of visible, dispatch events
 	$effect(() => {
-		if (visible) {
-			onopen && onopen();
-		} else {
-			selectedDate = [];
-			selectedDateStr = '';
+		if (!visible) {
+			if (clear) {
+				selectedDate = [];
+				selectedDateStr = '';
+			}
 			onclose && onclose();
 		}
 	});
@@ -300,10 +292,8 @@
 			{#if quickSelects.length > 0 && mode === 'range'}
 				<div class="flex flex-nowrap gap-4 px-4 pt-2 pb-1 overflow-x-auto calendar-container">
 					{#each quickSelects as item}
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div
-							class="text-xs px-2 py-1 cursor-pointer flex-none bg-white dark:bg-black dark:shadow-white/10 shadow rounded"
+						<button
+							class="text-xs px-2 py-1 flex-none bg-white dark:bg-black dark:shadow-white/10 shadow rounded"
 							class:!bg-primary={isQuickSelect && quickSelectItem === item}
 							class:text-white={isQuickSelect && quickSelectItem === item}
 							class:dark:!bg-dark={isQuickSelect && quickSelectItem === item}
@@ -323,39 +313,39 @@
 							{:else}
 								<!-- else content here -->
 							{/if}
-						</div>
+						</button>
 					{/each}
 				</div>
 			{/if}
 			<div class="flex justify-around items-center text-center gap-1 px-6 h-10 leading-10">
 				{#each weekTexts as item, index}
-					<div class={`flex-1 font-bold${weekendRed && isWeekendFunc(startSunday, index) ? ' text-error' : ''}`}>
+					<div class="flex-1 font-bold{weekendRed && isWeekendFunc(startSunday, index) ? ' text-error' : ''}">
 						{item}
 					</div>
 				{/each}
 			</div>
 		</div>
 		<div
-			class={`bg-gray-50 dark:bg-gray-800 py-2 px-4 flex flex-col gap-4 overflow-y-auto calendar-container ${
-				useAnimation ? 'scroll-smooth' : 'scroll-auto'
-			}`}
+			class="bg-gray-50 dark:bg-gray-800 py-2 px-4 flex flex-col gap-4 overflow-y-auto calendar-container {useAnimation
+				? 'scroll-smooth'
+				: 'scroll-auto'}"
 			style="height:{(window.innerHeight * height) / 100}px"
 			bind:this={scrollElement}
 		>
 			{#each allMonthData as item}
-				<div class={`${monthCard ? 'bg-white dark:bg-black shadow-md dark:shadow-white/5 rounded-xl ' : ''}relative`}>
+				<div
+					class="{monthCard ? `bg-white dark:bg-black shadow-md dark:shadow-white/5 ${radiusClass[radius] || 'rounded-xl'}` : ''} relative"
+				>
 					<div class="px-4 pt-4 text-xl text-black/30 dark:text-white/30">
 						<span class="font-bold text-black dark:text-white mr-2">
 							{calendarLang.monthTextList[Number(item.month) - 1]}
 						</span>
 						{item.year}
 					</div>
-					<div class={`grid grid-cols-7 gap-y-1 text-center p-2`}>
+					<div class="grid grid-cols-7 gap-y-1 text-center p-2">
 						{#each item.data as i}
-							<!-- svelte-ignore a11y_click_events_have_key_events -->
-							<!-- svelte-ignore a11y_no_static_element_interactions -->
-							<div
-								class={`p-px cursor-pointer${i.day ? ' bg-primary/10 dark:bg-dark/20' : ''}`}
+							<button
+								class="p-px{i.day ? ' bg-primary/10 dark:bg-dark/20' : ''}"
 								onclick={() => {
 									if (!i.disabled) clickDayFunc(item.year, item.month, i);
 								}}
@@ -390,9 +380,9 @@
 								class:!rounded={radius === 'base' && mode !== 'range'}
 							>
 								<div
-									class={`${radiusClass[radius] || 'rounded-xl'} relative w-full h-full flex flex-col justify-center ${
-										i.info ? 'py-1' : 'py-2'
-									}`}
+									class="{radiusClass[radius] || 'rounded-xl'} relative w-full h-full flex flex-col justify-center {i.info
+										? 'py-1'
+										: 'py-2'}"
 									class:bg-primary={(i.day && mode !== 'range' && selectedDateStr.includes(`${item.year}${item.month}${i.day}`)) ||
 										(i.day &&
 											selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
@@ -445,16 +435,15 @@
 										</div>
 									{/if}
 								</div>
-							</div>
+							</button>
 						{/each}
 					</div>
 					{#if monthMark}
 						<div
-							class={`absolute pointer-events-none w-full ${
-								monthMarkSizeClass[monthMarkSize] || 'text-7xl'
-							} text-center top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-bold text-black/5 ${
-								monthCard ? 'dark:text-white/10' : 'dark:text-white/5'
-							}`}
+							class="absolute pointer-events-none w-full {monthMarkSizeClass[monthMarkSize] ||
+								'text-7xl'} text-center top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-bold text-black/5 {monthCard
+								? 'dark:text-white/10'
+								: 'dark:text-white/5'}"
 						>
 							{calendarLang.monthTextList[Number(item.month) - 1]}
 						</div>