SmartPad4iのカレンダー機能は、入力欄にフォーカスを設定した際に、カレンダーを表示して日付選択が可能です。入力欄への日付入力とカレンダー表示の両方を使用したい場合には、入力欄の横へカレンダー表示用アイコンをクリックしてカレンダーを表示することも可能です。
Tipsでは、アイコンを配置してカレンダーを表示する方法についてご紹介します。
カレンダー表示機能について
Designerでの設定方法
SmartPad4iでカレンダー機能を使用するには、Designerの設定で「IBMi Type」を「Date」に設定後、「Edit Code」で日付の表示設定を行います。
「Edit Code」の「Show a Calendar」、カレンダーの表示の設定を「Click on field」、
「Click on icon」に設定することでカレンダーを表示することができます。
「Click on field」を設定した場合は、入力欄にフォーカスが遷移した際にカレンダー画面が開きます。
「Click on icon」を設定した場合は、入力欄の横に配置した画像をクリックした際にカレンダーが開きます。
「Click on icon」を使用時のHTML例
アイコンクリック時にカレンダーを表示するには、入力欄の次要素に画像を配置するだけです。
<input type="text" id="INP01" >
<img src="appbar.page.edit.png" style="position:absolute;" >カレンダーの動作
カレンダー設定の「Click on field」の場合は、入力欄にフォーカスが設定された際にカレンダーが表示されます。そのため、入力欄にキーボード入力で日付を設定することはできません。
「Click on icon」の場合は、入力欄の横に配置した任意の画像(アイコン)をクリック時にカレンダーが表示されます。また、入力欄にフォーカスを設定した場合には、キーボード入力で日付を設定することも可能です。