31 lines
1.7 KiB
Markdown
31 lines
1.7 KiB
Markdown
# PeriodDays
|
||
|
||
**コンポーネント機能**：クリック可能な日付範囲（開始日と終了日）を表示します。ユーザーは日付をクリックすることで、期間を前後に調整できます。日、月、年単位での進む・戻る操作をサポートしており、時間範囲の選択シーンでよく使用されます。
|
||
**タイプ**：コンテナーコントロール
|
||
**親コンポーネント**：bricks.HBox
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|-------------|--------|------|
|
||
| start_date | string | 初期開始日。フォーマットは「YYYY-MM-DD」 |
|
||
| end_date | string | 初期終了日。フォーマットは「YYYY-MM-DD」 |
|
||
| step_type | string | ステップの単位。選択肢は `'days'`、`'months'`、`'years'`。デフォルトは `'days'` |
|
||
| step_cnt | number | 1回の変更におけるステップ数。デフォルトは `1` |
|
||
| title | string | 任意のタイトルテキスト。コンポーネントの前に表示されます |
|
||
| splitter | string | 開始日と終了日を区切るセパレータ。デフォルトは `' 〜 '` |
|
||
|
||
> 注：`splitter` および `step_cnt` を指定しない場合、デフォルト値が使用されます。
|
||
|
||
## 主なイベント
|
||
|
||
### changed
|
||
- **発火タイミング**：ユーザーが開始日または終了日をクリックし、期間が変更されたときに発火します。
|
||
- **イベントデータ**：
|
||
```js
|
||
{
|
||
start_date: "YYYY-MM-DD", // 変更後の開始日
|
||
end_date: "YYYY-MM-DD" // 変更後の終了日
|
||
}
|
||
```
|
||
- **説明**：`bind('changed', callback)` を使用してこのイベントを監視でき、更新された日付範囲を取得できます。 |