日付

949 views

日付

ユーザーが日付を選択できる入力フィールドを提供します。これはカレンダーインターフェイスを表示し、ユーザーが日付を選択できるようにします。以下にその詳細な説明と使いどころの例を示します。

日付の使いどころ

予約システム

レストランや病院などの予約システムで、ユーザーが予約日を選択する際に使用します。
誕生日入力フォーム

ユーザー登録フォームで、ユーザーの誕生日を入力してもらう際に使用します。
イベントの日付選択

イベント作成フォームで、イベントの日付を指定する際に使用します。

ユーザーに対して直感的な日付選択インターフェイスを提供し、日付入力の正確性を向上させます。予約システム、ユーザー登録、イベント作成など、さまざまなシナリオで有用です。

日付を入力する［エディット］コントロールに対応したコントロールです。Web Clientでは［入力］(matinput)または［ラベル］(label)、時刻を入力（Time）として扱われます。Magic Xpa側では同じ［エディット］コントロールを使います。使う方法によってデータ入力がさまざまなシナリオに変わります。

Magic Xpa側では［エディット］コントロール関して以下の設定を行います。

①：［エディット］コントロールに設定する変数を作成する

②：フォームに［エディット］コントロール設置する

③：作成した変数を［エディット］コントロールに設定する

④：SmartUX側と関連するプロパティを設定する

⁂必要に応じてご活用ください。

可視

コントロールを表示させるかどうか指定します。論理値を返す式で指定することもできます。

有効

コントロールを有効にするかどうかを指定します。有効にするかどうかを表す論理値を返す式を使用できます。

SmartUX側には時刻ウィジェットを使います。

日付ウィジェットは以下のような感じになっております。

Magic Xpaと関連するためData入力の隣にある歯車ボタンをクリックして設定します。

設定した後は以下の通りになっております。

これでMagic Xpa側とSmartUX側は連携取れた状態になります。

Magic Xpa側で先ほどの”可視”プロパティを設定した場合は、SmartUX側で以下の通りに設定をします。

表示ロジックの”Display if”プロパティに歯車ボタンをクリックして設定します。

設定した後は以下の通りになっております。

コンポーネント（日付ウィジェット）を配置すると、デフォルトで以下のコードが定義されます。

<mat-form-field appearance=”outline” data-comp-id=”mat-date.1″ id=”mat-date.1″>

<mat-label>Date</mat-label>

<mat-datepicker-toggle matSuffix [for]=”Date”></mat-datepicker-toggle>

<mat-datepicker #Date></mat-datepicker>

</mat-form-field>

以下のプロパティがあります

プロパティ	内容
Data	Magic プログラムで定義されたコントロールを指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Label	表示するテキストを指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Error	エラーメッセージとして表示させるテキストを指定します。エラーは初期状態では非表示で、無効なフォームフィールドに表示されるのは、ユーザがそのエレメントを操作した後か、親フォームが送信された後です。エラーはヒントと同じスペースを占めるため、エラーが表示されるとヒントは隠されます。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
is inside Table	テーブル内に配置するかどうかを指定します。テーブル内に配置する場合はチェックをつけます。追加することで[rowId]=”row.rowId”タグが追加されます。テーブル内にあるのにチェックをつけなかった場合は常に1行目のイベントとして取り扱われます。
Show Control	コントロールを表示するかどうかを指定します。以下から選択できます。 “Is Inside Table” がチェックされている場合のみ有効です。 None …… 常に表示されます。 Is Row Edit …… 修正モード時のみ表示されます。 Is Row Read …… 照会８モード時のみ表示されます。
Tooltip	コントロールに関連付けるツールチップを指定します。マウスカーソルをこのコントロールに置くと指定された文字が表示されます。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 mg.getTitle(mgc.XXXXXXXXXX)にてMagicで設定されたツールチップを表示させることが可能です。
Appearance	表示方法を以下から指定します. outline …… 外観はフォームフィールドを全周に枠線が表示されます。 fill …… 外観はフォームフィールドを塗りつぶした背景ボックスと下線で表示されます。
Required	エンドユーザがコントロールに値を入力する必要があるかどうかを指定します。
Hint	コントロールに関連付けるヒントを指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Disabled	無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Display If	コントロールを表示させるかどうか指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 Is Visibleと似ていますが論理型の式を設定し、 True,Falseで指定します。他　mg.getValue(mgc.XXXXXXXXXX) !=””　と入力するとXXXXXXXXXXが空白以外の場合はTrueになるので表示されます.
Class	任意のクラスを定義することができます。

日付

日付