カレンダー・コントロール

見出しのアイコン

カレンダー・コントロールとは

日付のフィールドに対してカレンダーを表示して、その中から日付を選択することができる機能が
カレンダー・コントロールです。

日付フィールドに対してカレンダー・コントロールを補助機能として付加しておくとエンド・ユーザーの
入力操作性は、より易しくなります。

カレンダーコントロール

作成方法（8桁日付）

8桁数字フィールド（日付）を DDS で EDTCDE(W)編集するとカレンダー・コントロールを使用することが
できます。

DDS で 8桁数字を編集コード W で編集しておくと、自動的に 8桁日付であると解釈されて HTML5 による
カレンダー・コントロールの機能が付加されます。
手動で HTML を修正する必要はありません。

QTRSRC/QDSPSRC(PGM201FM) 受注日

A                                  3 62' 受注日 '
A            JUDATE         8Y 0B  3 71TEXT(' 受注日 ')
A  64                                  ERRMSG(' 受注日の誤りです  -
A                                                              '63')
A*    編集コード :W  を日付のフィールドとみなしてカレンダーを追加します。
A                                      EDTCDE(W)

AutoWeb はこの EDTCDE(W) を DSPF オブジェクトから読み取って、次のようなカレンダー・コントロールを
自動的に追加します。

EDTCDE(W) が指定されたフィールドを出力すると、AutoWeb は

<input type="text" ではなく <input type="date"

としてブラウザへ出力します。
input type="date" がサポートされている次のブラウザでは、そのままブラウザの機能によって
カレンダー・コントロールを利用することができます。

  • ChromeChrome
  • SafariSafari
  • OperaOpera

次のブラウザで表示される場合は、AutoWeb が自動的にカレンダー・コントロール機能を追加します。

  • IEIE (MS Internet Explorer )
  • FirefoxFirefox

6桁日付のカレンダー・コントロール

6桁日付もカレンダー・コントロールを定義できるようになりました。
6桁数字 ( 6Y 0 ) を EDTCDE(Y) で編集を指定すると
カレンダー・コントロールが付与されます。
日付の形式は TEXTキー・ワードを使って 

EDTCDE(Y) TEXT('*YMD')

EDTCDE(Y) TEXT('*MDY')

EDTCDE(Y) TEXT('*DMY')

のように明示的に指定するかまたは指定がなければ
実行するジョブの「日付の形式」に従います。
上記の TEXTによる明記があればそれが優先して解釈されます。

年(西暦4桁) + 月 + 日 が分離されている日付

年(西暦4桁) + 月 + 日 の型式で年・月・日が別々のフィールドとして
分離されている場合の日付型式でもカレンダー・コントロールを設定することが
できます。

【例】

分離されている日付

【DDSソース】

TEXT に *CYEAR, *MONTH, *DAY を指定してください。 

        A            UCYY           4Y 0B  3 13TEXT(' 受付年 *CYEAR')
        A            UCMM           2Y 0B  3 18TEXT(' 受付月 *MONTH')
        A            UCDD           2Y 0B  3 21TEXT(' 受付日 *DAY')
【カレンダー・コントロール】

カレンダー・コントロールは「日」の直後に追加されます。

分離されている日付

カレンダー・コントロール

カレンダー部分

カレンダー・コントロールを閉じるには

カレンダー・コントロールが表示されると、元のカレンダー・コントロールのアイコンは ×印の
アイコンに変化します。この ×印のアイコンをクリックするとカレンダー・コントロールは閉じられます。

閉じるボタン

祝日の追加・変更

カレンダー・コントロールでは祝日は赤字で表示されます。
AutoWeb出荷時は、その年の国民の休日が赤字になるよう設定されています。

国民の休日が変更になったり、あるいは会社独自の休日を追加したりする場合は
下記のように変更が行えます。

祝日は、IFS上にある下記ファイル内で管理されています。
FTPやNetServerなどを使ってこのファイルをPCにダウンロードし、編集する必要があります。

/AS400-NET.USR/JS/CALENDAR.JS

このファイルを開くと先頭部分が下記のようになっています。

    
// *****************************************************************************
//                                CALENDAR.JS
//                        AUTOWEB  JavaScript ライブラリー
// *****************************************************************************

function Calendar(){
	this.target="";
	this.targetId = null;        // カレンダー表示中のinput要素のID
	this.delimiter="/";// 年、月、日の区切り文字を設定します。
	this.currentyear="";
	this.holiday={ //国民の祝日
		"1/1":"元旦"
		,"2/11":"建国記念の日"
//		,"3/21":"春分の日" // 年によって変わるため別で判定
		,"4/29":"昭和の日"
		,"5/3":"憲法記念日"
		,"5/4":"みどりの日"
		,"5/5":"こどもの日"
		,"8/11":"山の日"
//		,"9/23":"秋分の日" // 年によって変わるため別で判定
		,"11/3":"文化の日"
		,"11/23":"勤労感謝の日"
		,"12/23":"天皇誕生日"
	};
	this.happymonday={ //ハッピーマンデー  月:週 で記述します。
		"1:2":"成人の日"
		,"7:3":"海の日"
		,"9:3":"敬老の日"
		,"10:2":"体育の日"
	};
	this.yy="";
	this.mm="";
	this.dd="";

ここの this.holiday 及び this.happymondayの部分を書き換えることで
祝日の追加や変更が可能です。

このファイルの内容は各PCのWebブラウザにキャッシュされていますので
反映させるためにはWebブラウザのキャッシュを消去するか、
キャッシュの有効期限が切れるのを待つ必要があります。

従いまして祝日の変更は、本番環境リリース前か長期休暇の前に行うことを
お勧め致します。

またこのファイルはAutoWebのPTF適用により上書きされる可能性がありますので
PTF適用前には変更内容のバックアップをお願い致します。