https://rabeeui.com/_app/immutable/chunks/Bnihr7di.js

1const n=`# Calendar
2
3Calendarは、日付の表示や選択ができるコンポーネントです。
4
5<Preview path='calendar/Default.svelte' />
6
7## プロパティ
8
9Calendarは、以下のプロパティをサポートしています。
10
11| 名前 | 型 | デフォルト値 | 説明 |
12| --- | --- | --- | --- |
13| **\`value\`** | \`string\` | \`''\` | 日付(YYYY-MM-DD)を渡すことができます。 |
14| **\`min\`** | \`string\` | \`0001-01-01\` | 選択できる最小値を設定できます。 |
15| **\`max\`** | \`string\` | \`9999-12-31\` | 選択できる最大値を設定できます。 |
16| **\`start\`** | \`string\` | \`''\` | 範囲選択の開始日を指定できます。 |
17| **\`end\`** | \`string\` | \`''\` | 範囲選択の終了日を指定できます。 |
18| **\`months\`** | \`number\` | \`1\` | 表示する月数を指定できます。 |
19| **\`enableRange\`** | \`boolean\` | \`false\` | 範囲選択が可能になります。 |
20| **\`onChange\`** | \`(value: string) => void\` || 日付が選択されたときのコールバック関数です。 |
21| **\`onRangeChange\`** | \`(value: CalendarRange) => void\` || 日付が範囲選択されたときのコールバック関数です。
22| **\`autoFocusDate\`** | \`boolean\` | \`false\` | 日付に自動でフォーカスします。
23
24### CalendarDate
25
26CalendarDateは、1日分の情報を表すオブジェクトです。
27
28| 名前 | 型 | デフォルト値 | 説明 |
29| --- | --- | --- | --- |
30| **\`value\`** | \`number\` || 日付（数値）です。|
31| **\`outOfMonth\`** | \`boolean\` || 表示範囲外の月かどうか。 |
32| **\`disabled\`** | \`boolean\` || 選択できるかどうか。 |
33| **\`formatDate\`** | \`string\` || フォーマット済みの日付文字列です。 |
34
35### CalendarRange
36
37CalendarRangeは、範囲選択された日付の情報を表すオブジェクトです。
38
39| 名前 | 型 | デフォルト値 | 説明 |
40| --- | --- | --- | --- |
41| **\`start\`** | \`string\` | \`''\` | 開始日です。|
42| **\`end\`** | \`string\` | \`''\` | 終了日です。 |
43
44## インストールの手順
45
46以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。<br>
47パスは実際のプロジェクトの構成にあわせて更新します。
48
49<!-- MEMO: ちゃんと閉じタグ書かないと何故かバグる -->
50<ComponentCode path='modules/Calendar.svelte'></ComponentCode>
51
52## 使い方
53
54<Preview path='calendar/Default.svelte' onlycode='true' />
55
56---
57
58## サンプル
59
60### Default
61
62日付を表示・選択できます。
63
64<Preview path='calendar/Default.svelte' />
65
66### Min・Max
67
68選択可能な範囲を指定できます。
69
70<Preview path='calendar/Limit.svelte' />
71
72### Date
73
74指定の日付を渡すことができます。
75
76<Preview path='calendar/Date.svelte' />
77
78### Range
79
80日付を範囲選択することができます。
81
82<Preview path='calendar/Range.svelte' />
83
84### Month
85
86表示する月数を指定することができます。
87
88<Preview path='calendar/Months.svelte' />
89
90### OnChange
91
92コールバック関数で値を受け取ることができます。
93
94<Preview path='calendar/OnChange.svelte' />
95
96### With Input
97
98InputDateとも組み合わせることができます。
99
100<Preview path='calendar/WithInput.svelte' direction='top' />
101
102`;export{n as default};