SmartPad4iでは、日付入力欄でカレンダー機能を利用することができます。カレンダー機能は、入力欄をクリックした際にカレンダー表示する方法と、入力欄の横にアイコンを配置してアイコンがクリックされた際にカレンダー表示する方法になります。また、ブラウザの機能を利用してカレンダー表示する方法についてご紹介します。
SmartPad4iカレンダー機能の利用
SmartPad4iでは日付入力欄でカレンダー機能を利用することができます。カレンダー機能はDesignerの設定から行えます。
SmartPad4iのカレンダー機能を利用する場合には、[IBMi Type]を[Date]に設定後、[Edit Code]列のボタンをクリックして表示される[日付形式の選択]ダイアログで詳細を決定します。
なお、RPGⅢを利用いただいている場合には、コンパイル時にCVTOPTへ*DATETIMEが必要です。
CRTRPGPGM PGM(SP4IREP21/EDT010)
SRCFILE(SP4IREP21/QRPGSRC)
SRCMBR(EDT010)
CVTOPT(*DATETIME)
REPLACE(*YES) 日付形式やIBMi側でのフォーマット設定、IBMi側での日付セパレータを設定できます。
カレンダーの表示/非表示は[Show a Calendar]のプルダウンで決定します。
- [Click on field] を選択すると、入力欄クリックでカレンダー表示
- [Click on icon] を選択すると、アイコンクリックでカレンダー表示
入力欄クリックでカレンダ―を表示する方法
[Click on field] 入力欄クリック時にカレンダ―を表示では、入力欄にフォーカスが設定されるとSmartPad4iのカレンダーが表示されます。日付を選択、クリックすると日付が入力欄に設定されます。[Click on field]を選択した場合には、入力欄に日付を直接入力することはできません。
アイコンクリック時にカレンダー表示する方法
[Click on icon] アイコンクリック時にカレンダーを表示では、入力欄の横に配置した画像をクリック時にカレンダーが表示されます。
[Click on icon] の場合は、入力欄に直接日付を入力することも可能です。また、入力欄横の画像は、HTML上で定義する必要があります。
例) 入力欄横に画像を配置
<input class="input icon-del" type="text" id="ITO"><img src="img/cal8.png" style="width:40px;height:40px">ブラウザの機能を利用する方法
ブラウザの機能を利用してカレンダー表示もできます。
HTML5で追加された [ type=”date” ]を利用します。
Designerの設定では、[IBMi Type]に[Alpha]を設定して [IBMi length]には”10″を設定してください。
IBMi側プログラムとは文字列10桁の日付データとして通信を行います。上記画像はChromeブラウザでのカレンダー表示です。ブラウザごとに表示されるカレンダーが異なります。
以上で、SmartPad4iでカレンダーを表示する方法についてのTipsは終了です。