> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 日付範囲

> YiDAの日付範囲コンポーネントの使い方を解説します。表示フォーマットやデフォルト値の設定、日付差分の計算、特定日付の無効化まで、基本機能から高度な使い方まで、業務フォーム作成時のユースケースを紹介します。

## 1. ユースケース

休暇申請、出張期間、サービス処理時間など、2つの日付を選択する必要があるシーンに適しています。

<Note>
  コンポーネントの属性、使い方、および例については、[**こちら**](/ja/open/yida/components/interface)をご参照ください。
</Note>

## 2. 基本機能

### 2.1 表示フォーマット

日付の表示フォーマットを設定します。

**パス**：コンポーネント >> 属性 >> フォーマット

フォーマットを「年-月-日」に設定した場合の表示は以下の通りです（他のフォーマットも同様に動作します）。

### 2.2 固定時刻の設定（デフォルト値）

日付範囲に固定値を設定します。デフォルト値を設定すると、日付範囲コンポーネントは指定したデフォルト値をそのまま表示します（デフォルト値が設定されていても、日付は手動で選択できます）。

**パス**：属性 >> デフォルト

デフォルト値を設定する際、デフォルトフォーマットは「年-月-日 00:00:00」ですが、コンポーネントの実際の表示は設定された「フォーマット」に従います。

結果は以下の通りです。

フォーマットを「年-月-日」に設定した場合、

実際に表示される日付フォーマットは以下の通りです。

## 3. 高度な使い方

### 3.1 日付差分の計算

日付範囲で選択された2つの日付の差分を計算し、その結果を数値コンポーネントに設定します。

#### 3.1.1 設定手順

1. フォームまたはワークフローフォームのフォーム設計ページで、日付範囲コンポーネントと数値コンポーネントをキャンバスにドラッグします。

2. 数値コンポーネントをクリックし、左側の「デフォルト」で数式編集を選択します。

3. 「数式編集」をクリック >> 時刻関数を選択 >> 「CASCADEDATEINTERVALV2」関数を選択します。詳細な設定については以下の図をご参照ください。

4. 結果は以下の通りです。

この関数の詳細な使い方については、以下のドキュメントをご参照ください。

Yuqueコンテンツカードです。リンクをクリックしてご覧ください：[時刻関数](/ja/yida/form/dh7m8n)

### 3.2 日付無効関数

カスタム関数を使用して、日付範囲で選択可能な範囲を定義します（日付コンポーネントのカスタム設定と同様）。予約シーンに適しています。

**パス**：属性 >> 日付無効関数 >> アクションのバインド

#### 3.2.1 日付無効関数の設定手順と例

2021-04-16から2021-04-30までの日付を選択不可にするには、以下の設定をご参照ください。

「アクションのバインド」をクリック >> 「Page JS」を選択 >> 「新規アクション追加」をクリック >> 「確認」をクリックします。

「確認」をクリックすると、以下の画面が表示されます。以下のパスに従ってください。

以下のコードをご参考ください（そのままコピーできます）。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function disabledDate(current) {
  // 日付が2021-02-11から2021-02-17の間にあるかどうかをチェック
  if (current >= new Date('2021-02-11 00:00:00') && current < new Date('2021-02-18 00:00:00')) {
    // trueを返して無効化
    return true;
  }
  return false;
}
```

コードのハイライト部分のみをコピーしてください。

設定後、「保存」をクリックします。4月16日から4月30日までの日付が選択不可になります。結果は以下の通りです。

## 4. よくある質問

### 4.1 日付を変更すると時刻がリセットされるのはなぜですか？

フォーマットが「年-月-日-時-分」または「年-月-日-時-分-秒」に設定されている場合、属性パネルに「日付選択時に時刻をリセット」オプションが表示されます。以下の通りです。

この機能はデフォルトで無効になっています。無効の場合、日付を変更しても元の「時-分」の値が保持されます。有効の場合、日付を変更するたびに「時-分」が「00:00」にリセットされます。

この動作は、日付コンポーネントの表示フォーマットに関するよくある質問と共通です。詳細については、[**日付コンポーネント**](/ja/yida/form/alex84)を参照し、日付フォーマットのよくある質問をご確認ください。