日付入力項目の入力補助にカレンダーを使用したい

画面表示 - カレンダー

日付入力項目の入力補助にカレンダーを使用したい

入力補助にカレンダーを表示する方法は、下記の3通りがあります。

①DateEditクラスを利用する
　disableHelperプロパティにfalseを設定するだけで、カレンダー表示ボタンの表示、及び
　カレンダー選択処理が自動的に行われます。
　ただし、カレンダーのレイアウトを変更するような設定はできません。

②DisplayObjectクラスのshowCalendarメソッドを利用する
　テキストボックス、ボタン等任意のオブジェクトにカレンダーを表示する事が
　できます。

　showCalendarメソッドでは下記の設定が可能です。

　　・デフォルト選択日付
　　・カレンダーダイアログのタイトル
　　・選択可能な最小日付、最大日付
　　・カレンダーダイアログのx座標、y座標
　　・カレンダーダイアログの縦幅、横幅

③Calendarクラスを利用する
　Calendarオブジェクトを生成し、フォームやテキストボックス、ボタン等任意のオブジェクトに
　対し子オブジェクトとして接続する事でカレンダーを表示する事が可能です。

　Calendarクラスでは下記の設定が可能です。

　　・週開始の曜日指定
　　・グリッドの表示・非表示
　　・カレンダーを表示する日付の範囲の最大値・最小値指定
　　・選択している日付の取得
　　・週番号の表示・非表示
　　・指定日付への背景色・文字色設定
　　・指定年月の表示

簡易的なカレンダー表示であれば①②、カレンダーのレイアウトを独自に制御したい場合は
③をご利用ください。

Form form1 {
 width = 519;
 height = 601;
 DateEdit dateedit1 {
  x = 24;
  y = 102;
  width = 136;
  height = 27;
  disableHelper = false;
  format = "YYYY/MM/DD";
 }
 TextBox:Date textbox1 {
  x = 24;
  y = 182;
  width = 136;
  height = 24;
  title = "YYYY/MM/DD";
  verticalAlign = ALIGN_MIDDLE;
  format = "YYYY/MM/DD";
  value = new Date();
 }
 Button button1 {
  x = 160;
  y = 182;
  width = 16;
  height = 24;
  horizontalAlign = ALIGN_CENTER;
  verticalAlign = ALIGN_MIDDLE;
  title = "▼";
  font = new Font("MS UI Gothic", 7);
  Function onTouch(e){
   var date1 = new Date(^.textbox1.value);
   var xpos = new Number(root.getFrameWindow().x + ^.textbox1.x);
   var ypos = new Number(root.getFrameWindow().y + ^.textbox1.y + 50);
   var cal = this.showCalendar( date1,"日付入力", new Date("1900/01/01"), new Date("2100/12/31"), xpos, ypos, 250, 210 );
   if( cal != null ){
    ^.textbox1.value = cal;
   }
  }
 }
 
 Button button2 {
  x = 160;
  y = 268;
  width = 16;
  height = 24;
  horizontalAlign = ALIGN_CENTER;
  verticalAlign = ALIGN_MIDDLE;
  title = "▼";
  font = new Font("MS UI Gothic", 7);
  Function onTouch(e){
   var calobj = new Calendar{
    width = 250;
    height = 210;
    
    Function onSelectionChanged(e){
     form1.textbox2.value = e.from.selected;
     form1.textbox2.setFocus();
     this.delete();
    }
   };
   form1.append(calobj,"cal");
   form1.cal.x = ^.textbox2.x;
   form1.cal.y = ^.textbox2.y + ^.textbox2.height;
  }
 }
 
 TextBox:Date textbox2 {
  x = 24;
  y = 268;
  width = 136;
  height = 24;
  title = "YYYY/MM/DD";
  verticalAlign = ALIGN_MIDDLE;
  format = "YYYY/MM/DD";
  value = new Date();
 }
 
 Label label1 {
  x = 24;
  y = 72;
  width = 238;
  height = 32;
  value = "①DateEditクラスを利用する";
  verticalAlign = ALIGN_MIDDLE;
 }
 
 Label label2 {
  x = 24;
  y = 152;
  width = 311;
  height = 29;
  value = "②DisplayObjectクラスのshowCalendarメソッドを利用する";
  verticalAlign = ALIGN_MIDDLE;
 }
 
 Label label3 {
  x = 24;
  y = 240;
  width = 256;
  height = 21;
  value = "③Calendarクラスを利用する";
  verticalAlign = ALIGN_MIDDLE;
 }
 
 
 Label label4 {
  x = 16;
  y = 16;
  width = 238;
  height = 32;
  value = "「▼」押下でカレンダーを表示します。";
  verticalAlign = ALIGN_MIDDLE;
 }
 Function onClicked(e){
  if(e.from != form1.cal){
    if(form1.cal != null){
     textbox2.setFocus();
     form1.cal.delete();
    }
  }
 }
}


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser DT・Biz/Designer DT TIPS集トップへ