> ## 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. 適用シーン

日付や時刻を選択する必要がある場合、本コンポーネントは残業や出張などのシーンに適しています。日付コンポーネントは常にローカル時間を使用します。

[コンポーネント基本情報](/ja/yida/form/snftao)

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

## 2. 基本機能

デフォルトの日付値、日付形式、ワンクリック削除、日付範囲、およびプレミアムカスタム範囲を設定できます。

### 2.1 固定時刻と日付形式の設定

#### 2.1.1 デフォルト値（固定時刻）

日付コンポーネントはデフォルト値に対応しています。設定後、フォーム送信時にデフォルト値が既定で表示されます（デフォルト値を設定した後も、手動で日付を選択できます）。

**パス**：コンポーネント >> 属性 >> デフォルト

**注意**：デフォルト値は「YYYY-MM-DD」として表示されますが、コンポーネントに実際に表示される内容は、設定した具体的な形式に従います。

例：

日付のデフォルト値

##### 2.1.2 日付形式

デフォルトの日付形式は「YYYY-MM-DD」です。日付形式をカスタマイズすることもできます。

例：

日付形式

### 2.2 選択可能な時間範囲

選択可能な時間を制限できます。休暇申請や残業などのシーンで便利です。

例：

選択可能な時間範囲

#### 2.2.1 時間範囲のシーン例

ユーザーが当日以降のみ休暇申請できるように制限するには、時間範囲を「本日以降（本日を含む）から選択可能」に設定します。設定後、本日より前の日付はグレー表示となり選択できなくなります。他の範囲も同様に動作します。

例：

#### 2.2.2 プレミアムカスタム範囲の設定とシーン

JavaScriptを使用して、指定した時間範囲のみ選択できるよう制限できます。予約や特殊な業務処理などのシーンに適しています。

**パス**：属性 >> 選択可能な時間範囲 >> カスタムを選択 >> アクションをバインド

アクションをバインド

カスタムアクションをバインドして、許可される時間範囲を制限できます。以下はアクションの例です（7日以内の日付のみ選択可能）。

設定手順：

1. 「アクションをバインド」をクリックすると、以下の画面が表示されます。スクリーンショットの手順に従います。

2. 「確認」をクリックすると、以下の画面が表示されます。スクリーンショットの手順に従います。

3. 既存のコードを削除した後、JavaScriptコードを記述し、「保存」をクリックします。スクリーンショットの手順に従います。コードの参考は、以下をご覧ください。

Developer Center：[https://docs.aliwork.com/docs/developer/components/form/dateField](/ja/open/yida/components/form/dateField)

設定後、7日以内の日付のみ選択できます。例：

### 2.3 削除ボタン

削除ボタンを有効化すると、選択した時刻が誤っている場合に「×」をクリックしてワンクリックで削除できます。例：

## 3. よくある質問

<AccordionGroup>
  <Accordion id="q1" title="3.1 日付を変更すると時刻がリセットされるのはなぜですか？">
    「YYYY-MM-DD HH:mm」または「YYYY-MM-DD HH:mm:ss」の形式を選択した場合、属性パネルに「日付選択のたびに時刻をリセット」オプションが表示されます。例：

    この機能はデフォルトで無効になっています。つまり、日付を変更しても「時-分」の値は変更されません。ただし、このオプションを有効化すると、日付を変更するたびに「時-分」の値が「00:00」にリセットされます。

    例：
  </Accordion>

  <Accordion id="q2" title="3.2 2つの日付コンポーネントの差を時間単位に変換するにはどうすればよいですか？">
    以下の設定を参考にしてください。
  </Accordion>

  <Accordion id="q3" title="3.3 一行テキストフィールドに曜日を入力したとき、下部の日付コンポーネントに当該週の該当曜日の日付を表示させるにはどうすればよいですか？">
    現時点ではノーコードでは実現できません。数式を使用して現在の日付を取得し、次にJavaScriptで対象の曜日と現在の日付を比較して日数差を算出し、JavaScriptを使用して対象曜日の実際の日付を判定してください。
  </Accordion>

  <Accordion id="q4" title="3.4 フォームに日付範囲コンポーネントを追加しました。最初のフィールドは12日の午後4時に設定し、2つ目のフィールドで12日の午後4時以降の時刻を許可したいのですが、2つ目のフィールドは13日からしか選択できません。現在は日単位の精度のみ対応しているようですが、時間単位の精度に対応できますか？">
    現在、日付範囲コンポーネントは日単位の精度のみ対応しています。機能リクエストを送信してください。
  </Accordion>

  <Accordion id="q5" title="3.5 2つの日付間の日数、時間、分を計算するにはどうすればよいですか？">
    2つの日時の差分を計算する数式を使うことで算出できます。
  </Accordion>
</AccordionGroup>

### 3.6 秒針が動く時計の実装

JavaScriptを使用して実現できます。フォームに日付コンポーネントを追加し、以下のコードを`didMount()`メソッドにコピーします。デフォルトで読み込まれます。

注意：以下の一意識別子は、日付コンポーネントの一意識別子である必要があります。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
 setInterval( function(){
var dt = new Date();
var y = dt.getFullYear();
var M = dt.getMonth()+ 1;
var d = dt.getDate();
var h = dt.getHours();
var m = dt.getMinutes();
var s = dt.getSeconds();
//alert("現在時刻: " + y + "-"+M+"-"+d +" "+ h + ":" + m + ":" + s);
 document.getElementById( "uniqueIdentifier").innerHTML = "現在時刻: " + y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s
 }, 1000);
```

JSパネル

最終結果：

<AccordionGroup>
  <Accordion id="q6" title="3.7 フィールド値が変更されたときに、日付コンポーネントの値をリアルタイムで現在時刻に更新するにはどうすればよいですか？">
    値が変更されるフィールドに新しいアクションを作成します >> 値変更時。

    以下のコードをコピーします：

    ```ruby theme={"theme":{"light":"github-light","dark":"github-dark"}}
    export function onChange({ value }) {
      this.$('DateComponentUniqueId').setValue(Date.parse(new Date()))
    }
    ```
  </Accordion>

  <Accordion id="q7" title="3.8 小数の日数（例：0.x 日）を計算するにはどうすればよいですか？">
    通常、2つの日付間の日数は整数です。ただし、開始時刻と終了時刻が同日の場合、結果は0日となります。これを0.x 日のような小数値に変換するには、以下のコードをコピーし、コンポーネント部分をフォーム内の日付コンポーネントに置き換えてください。

    ```ruby theme={"theme":{"light":"github-light","dark":"github-dark"}}
    {"text":"DAYS(DATE(StartTime),DATE(EndTime))+TIME(HOUR(DATE(EndTime)),MINUTE(DATE(EndTime)),SECOND(DATE(EndTime)))-TIME(HOUR(DATE(StartTime)),MINUTE(DATE(StartTime)),SECOND(DATE(StartTime)))","marks":[{"from":{"line":0,"ch":10,"sticky":null},"to":{"line":0,"ch":16,"sticky":null},"value":"dateField_l0g14aqu","invalid":false},{"from":{"line":0,"ch":23,"sticky":null},"to":{"line":0,"ch":29,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":47,"sticky":null},"to":{"line":0,"ch":53,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":68,"sticky":null},"to":{"line":0,"ch":74,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":89,"sticky":null},"to":{"line":0,"ch":95,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":114,"sticky":null},"to":{"line":0,"ch":120,"sticky":null},"value":"dateField_l0g14aqu","invalid":false},{"from":{"line":0,"ch":135,"sticky":null},"to":{"line":0,"ch":141,"sticky":null},"value":"dateField_l0g14aqu","invalid":false},{"from":{"line":0,"ch":156,"sticky":null},"to":{"line":0,"ch":162,"sticky":null},"value":"dateField_l0g14aqu","invalid":false}],"isCmData":true}
    ```
  </Accordion>
</AccordionGroup>