Date Range

​

日付範囲コンポーネントは、ユーザーがカレンダーインターフェイスから日付の範囲を選択できるUIコンポーネントです。 通常、ユーザーが開始日と終了日付の範囲を指定する必要があるフォームまたはデータ入力インターフェイスで使用されます。

日付範囲コンポーネントがキャンバスに追加されると、2つのカレンダーインターフェイスが並行して表示されます。 開始日を選択するにはカレンダーインターフェイスを使用し、終了日を選択するにはカレンダーインターフェイスを使用します。 ユーザーは、別の月に移動する前または次の矢印をクリックしてカレンダーをナビゲートすることができます。 または特定の日付をクリックして選択します。 選択した日付が入力フィールドに表示されます。

​

Properties

日付範囲の利用可能なプロパティ JavaScript はコンポーネントに関する情報を読み取りまたは変更するために書かれることがあります。

​

Methods

他のコンポーネントを使用してコンポーネントを制御できます。 以下の 2 つの方法をサポートします。

• setStartValue

開始日時の値を設定するには {{“value1”}}

• setEndValue

終了日時の値を設定するには {{“value2”}}

• clearValue

選択したコンポーネントの値をクリアするには

• validate

入力情報が合法であることを確認するには

• clearValidate

検証メッセージを消去するには

​

イベントハンドラ：

​

データ

コンポーネントには一般的に使用されているデータがいくつか含まれており、アプリで {{componentName.propertyName}} を介して呼び出すことができます。

例: {{dateRange1.value[0]}}

​

大文字小文字を区別する

次に、データソースからのデータを日付範囲にマッピングし、ボタンで今日の日付に終了値を設定する方法を説明します。

​

ステップ 1 アクションを追加

promoteCodeと呼ばれるREST APIで、6つの列を含むテーブルを作成しましょう: code、id、createdAt、expiredAt、startedAt、`updatedAt**。 startedAt と expiredAt を使用してサンプルを使用します。

次に、アクションリストからREST APIの新しいアクションを作成し、promotecodeのすべてのデータをリストし、restapi1という名前を付けます。

Save と Runをクリックしてアクションを有効にします。

​

ステップ2 コンポーネントを追加

次に、date range コンポーネントと button コンポーネントをキャンバスに追加します。 日付範囲コンポーネントのデフォルトの開始日時の値には、残りの api データから最初のプロモーションコードの startedAt を使用します。

{{restapi1.data.promoteCodes[0].startedAt}}

同様に、デフォルトの終了日値では、expiredAt を使用します残りの api データから最初のプロモーションコードを使用します。

{{restapi1.data.promoteCodes[0].expiredAt}}

次に示すように、このボタンも「更新」とラベル付けしました。

​

ステップ 3 コンポーネントの設定

button コンポーネントについては、終了日時の値を date range コンポーネントに今日の日付に設定します。

1. Edit event handlerでControl component を実行中に選択します。 イベントのターゲットとして更新する date range コンポーネントを選択します。
2. setEndValueアクションを選択し、終了日を{{currentUserInfo.updatedAt}}`に設定します。

​

ステップ4 テスト

「更新」ボタンをクリックすると、終了日が今日の日付に変更されます。 ここでは、2023-5-6がありますが、テストしている場合は異なる場合があります。