QHMの新タイプHAIKの活用と実験、オープンソースの活用

JQuery

• 2013-11-19

先ほどの設定で、JavaScriptの記述は別ファイルのJavaScriptファイルに保存し、それを読み込んで使うようにしてみます。

class指定はひとつのみ

class指定を複数指定した場合

ひとつは、値を自動で設定する為の識別名として「date_now」、もうひとつは書式の変更をする為の「redbg」。

例えば、前回決算期間

このページのソース部分は、次の様になります。

#html{ {
<style type="text/css">
    .redbg { background-color: #FFDDDD; }
    .bluebg { background-color: #DDDDFF; }
    .greenbg { background-color: #DDFFDD; }
</style>
 
<link rel="stylesheet" href="./jquery/css/redmond/jquery-ui-1.10.3.custom.css">
<script src="./jquery/js/jquery-1.9.1.js"></script>
<script src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
<script src="./myjs/my-date-lib.js"></script>
 
} }
 
 
*** class指定はひとつのみ
#html{ {
<INPUT type="TEXT" name="date1" class="date_now" value="">
} }
 
 
*** class指定を複数指定した場合 [#p40f349f]
ひとつは、値を自動で設定する為の識別名として「date_now」、もうひとつは書式の変更をする為の「redbg」。
 
#html{ {
<INPUT type="TEXT" name="date2" class="date_now redbg" value="">
 
<INPUT type="TEXT" name="date2" class="date_now0 redbg" value="">
<INPUT type="TEXT" name="date2" class="date_now1 redbg" value="">
<INPUT type="TEXT" name="date2" class="date_now2 redbg" value="">
 
} }
 
*** 例えば、前回決算期間
 
#html{ {
<INPUT type="TEXT" name="date3" class="LastKessanStart redbg" value=""> 〜 <INPUT type="TEXT" name="date4" class="LastKessanEnd bluebg" value="">
} }

ただ、実質的には、以下ような記述を各ページで記載して使うことになると思います。スタイルシートの記述をなくしたので、redbgなどの表示スタイルは利用されていないことになります。

#html{ {
 
<script src="./jquery/js/jquery-1.9.1.js"></script>
<script src="./myjs/my-date-lib.js"></script>
 
現在：
<INPUT type="TEXT" name="date2" class="date_now redbg" value="">
 
 
前回会計期間：
<INPUT type="TEXT" name="date3" class="LastKessanStart redbg" value=""> 〜 <INPUT type="TEXT" name="date4" class="LastKessanEnd bluebg" value="">
 
} }
 
 

これ以外が、

<script src="./myjs/my-date-lib.js"></script>

で分かるように、my-date-lib.jsというファイル名にして、QHMのindex.phpが存在するフォルダの下にmyjsを作ってアップロードした事になります。

my-date-lib.jsは、いかの様な感じになります。
説明を追加するなどして、分かりやすくしておきます。

// =========================================================================
// 日付の自動入力ライブラリ
//                                          2013-11-18 by I.I
// =========================================================================
// 決めておいたクラス指定をしたテキストボックスに
// 現在のPCの時計から日時等を自動入力する
//
//   class            : 表示例
//  ------------------------------------------
//   date_now0        : 2013/11/18
//   date_now1        : 2013/11/18 15:54:23
//   LastKessanStart  : 2012/06/01
//   LastKessanEnd    : 2013/05/31 
// =========================================================================
 
$(function() {
 
    $(".date_now0").val(DateYYYMMDD(1));
    $(".date_now1").val(DateYYYMMDD(1));
    $(".date_now").val(DateYYYMMDD());
    $(".date_now1").val(DateYYYMMDD(1));
    $(".date_now2").val(DateYYYMMDD(2));
    $(".LastKessanStart").val(DateLastKessanStart());
    $(".LastKessanEnd").val(DateLastKessanEnd());
 
});
 
 
 
// typeno
//   0 : yyyy/mm/dd
//   1 : yyyy/mm/dd hh:mm:ss
 
function DateYYYMMDD(typeno) {
  var now = new Date();
  var year = now.getYear();   // 年
  var month = now.getMonth(); // 月
  var day = now.getDate();    // 日
  var hour = now.getHours();  // 時
  var min = now.getMinutes(); // 分
  var sec = now.getSeconds(); // 秒
  if (year < 2000) { year += 1900; }
   month +=1; 
  // 数値が1桁の場合、頭に0を付けて2桁で表示する指定
  if (month < 10) { month = "0" + month; }
  if (day   < 10) { day   = "0" + day; }
  if (hour  < 10) { hour  = "0" + hour; }
  if (min   < 10) { min   = "0" + min; }
  if (sec   < 10) { sec   = "0" + sec; }
 
  switch (typeno) {
    case 1 : r = year+"/"+month+"/"+day;
           break;
    case 2 : r = year+"/"+month+"/"+day+" "+hour+":"+min+":"+sec;
           break;
    default :
             r = year+"/"+month+"/"+day;
   }
 
  return r;
}
 
 
function DateLastKessanStart() {
 
  return "2012/06/01";
}
 
function DateLastKessanEnd() {
 
  return "2013/05/31";
}

課題

上記に今月の開始日を自動入力出来る仕組みを追加して、新しく作成したページのテキストボックスで、そのページが表示されたら自動的に入力されるようにしてください。