Skip to main content

​
1. ユースケース

休暇申請、出張期間、サービス処理時間など、2つの日付を選択する必要があるシーンに適しています。
コンポーネントの属性、使い方、および例については、こちらをご参照ください。

​
2. 基本機能

​
2.1 表示フォーマット

日付の表示フォーマットを設定します。 パス：コンポーネント >> 属性 >> フォーマット フォーマットを「年-月-日」に設定した場合の表示は以下の通りです（他のフォーマットも同様に動作します）。

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

日付範囲に固定値を設定します。デフォルト値を設定すると、日付範囲コンポーネントは指定したデフォルト値をそのまま表示します（デフォルト値が設定されていても、日付は手動で選択できます）。 パス：属性 >> デフォルト デフォルト値を設定する際、デフォルトフォーマットは「年-月-日 00:00:00」ですが、コンポーネントの実際の表示は設定された「フォーマット」に従います。 結果は以下の通りです。 フォーマットを「年-月-日」に設定した場合、 実際に表示される日付フォーマットは以下の通りです。

​
3. 高度な使い方

​
3.1 日付差分の計算

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

​
3.1.1 設定手順

  1. フォームまたはワークフローフォームのフォーム設計ページで、日付範囲コンポーネントと数値コンポーネントをキャンバスにドラッグします。
  2. 数値コンポーネントをクリックし、左側の「デフォルト」で数式編集を選択します。
  3. 「数式編集」をクリック >> 時刻関数を選択 >> 「CASCADEDATEINTERVALV2」関数を選択します。詳細な設定については以下の図をご参照ください。
  4. 結果は以下の通りです。
この関数の詳細な使い方については、以下のドキュメントをご参照ください。 Yuqueコンテンツカードです。リンクをクリックしてご覧ください：時刻関数

​
3.2 日付無効関数

カスタム関数を使用して、日付範囲で選択可能な範囲を定義します（日付コンポーネントのカスタム設定と同様）。予約シーンに適しています。 パス：属性 >> 日付無効関数 >> アクションのバインド

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

2021-04-16から2021-04-30までの日付を選択不可にするには、以下の設定をご参照ください。 「アクションのバインド」をクリック >> 「Page JS」を選択 >> 「新規アクション追加」をクリック >> 「確認」をクリックします。 「確認」をクリックすると、以下の画面が表示されます。以下のパスに従ってください。 以下のコードをご参考ください（そのままコピーできます）。
コードのハイライト部分のみをコピーしてください。 設定後、「保存」をクリックします。4月16日から4月30日までの日付が選択不可になります。結果は以下の通りです。

​
4. よくある質問

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

フォーマットが「年-月-日-時-分」または「年-月-日-時-分-秒」に設定されている場合、属性パネルに「日付選択時に時刻をリセット」オプションが表示されます。以下の通りです。 この機能はデフォルトで無効になっています。無効の場合、日付を変更しても元の「時-分」の値が保持されます。有効の場合、日付を変更するたびに「時-分」が「00:00」にリセットされます。 この動作は、日付コンポーネントの表示フォーマットに関するよくある質問と共通です。詳細については、日付コンポーネントを参照し、日付フォーマットのよくある質問をご確認ください。