Skip to main content

​
1. 適用シーン

日付や時刻を選択する必要がある場合、本コンポーネントは残業や出張などのシーンに適しています。日付コンポーネントは常にローカル時間を使用します。 コンポーネント基本情報
コンポーネントの属性、使用方法、および例については、こちらをクリックしてご確認ください。

​
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 設定後、7日以内の日付のみ選択できます。例：

​
2.3 削除ボタン

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

​
3. よくある質問

「YYYY-MM-DD HH:mm」または「YYYY-MM-DD HH:mm:ss」の形式を選択した場合、属性パネルに「日付選択のたびに時刻をリセット」オプションが表示されます。例：この機能はデフォルトで無効になっています。つまり、日付を変更しても「時-分」の値は変更されません。ただし、このオプションを有効化すると、日付を変更するたびに「時-分」の値が「00:00」にリセットされます。例：
以下の設定を参考にしてください。
現時点ではノーコードでは実現できません。数式を使用して現在の日付を取得し、次にJavaScriptで対象の曜日と現在の日付を比較して日数差を算出し、JavaScriptを使用して対象曜日の実際の日付を判定してください。
現在、日付範囲コンポーネントは日単位の精度のみ対応しています。機能リクエストを送信してください。
2つの日時の差分を計算する数式を使うことで算出できます。

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

JavaScriptを使用して実現できます。フォームに日付コンポーネントを追加し、以下のコードをdidMount()メソッドにコピーします。デフォルトで読み込まれます。 注意：以下の一意識別子は、日付コンポーネントの一意識別子である必要があります。
JSパネル 最終結果：
値が変更されるフィールドに新しいアクションを作成します >> 値変更時。以下のコードをコピーします：
通常、2つの日付間の日数は整数です。ただし、開始時刻と終了時刻が同日の場合、結果は0日となります。これを0.x 日のような小数値に変換するには、以下のコードをコピーし、コンポーネント部分をフォーム内の日付コンポーネントに置き換えてください。