スポンサードリンク

顧客マスター 日付表示

今回はデータベースに保存されている「日付/時刻型」のデータを、任意の日付書式に変換する方法を学びます。

前回までの顧客マスターを見ると、誕生日の日付が「Mon Jan 19 00:00:00 UTC+0900 1970」のような表示になっています。

javascript-123.gif

これはデータベースAccessから取り出した値をそのまま表示しているからです。テーブルT04Customerをデザインビューで見るとBIRTHが「日付/時刻型」となっています。

javascript-125.gif

テーブルT04Customerをデータシートビューで見ると、「yyyy/mm/dd」の形式で表示されていますが、これをそのままとりだすと、「Mon Jan 19 00:00:00 UTC+0900 1970」のような形式になってしまうわけです。

javascript-124.gif

この問題を解決する方法は簡単で、日付の書式を整える関数を作り、変換したい時に呼び出すだけです。日付はいろんな場面で使われますので、共通して使えるようにdatabase.js側に関数dateFormat()を作りました。


【1】以下のように database.js、customer.js を更新します。他は「顧客マスター 表示」と同じです。

database.js

var database;

function dbConnect() {
  //データベースに接続する関数
  database = new ActiveXObject("ADODB.Connection");
  database.Open("Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\\SampleDB010.mdb;");
  //alert("データベースに接続しました。");
}


function dbClose() {
  //データベースを切断する関数
  database.Close();
  database = null;
  //alert("データベースを切断しました。");
}


function addressRefer(townCd,_database) {
  //住所を表示する関数
  var mySql = "SELECT ('〒' & ZIP_CODE & ' ' & PREF_NAME & CITY_NAME & TOWN_NAME) AS address ";
  mySql = mySql + "FROM T03Town,T02City,T01Prefecture ";
  mySql = mySql + "WHERE T03Town.CITY_CD = T02City.CITY_CD ";
  mySql = mySql + "AND T02City.PREF_CD = T01Prefecture.PREF_CD ";
  mySql = mySql + "AND TOWN_CD = " + townCd;

  var recordSet = _database.Execute(mySql);
  var tempAddress = recordSet(0);


  //recordSet.Close();
  recordSet = null;

  return tempAddress;
}


function dateFormat(_date) {
  //日付を「yyyy/mm/dd」で返す関数
    var date = new Date(_date);

    var year = date.getYear();
    year = (year > 99)? year : year + 1900;

    var month =date.getMonth() + 1;
    month = (month >= 10)? month : "0" + month;

    var day = date.getDate();
    day = (day >= 10)? day : "0" + day;

    var tempDate = year + "/" + month + "/" + day;
    return tempDate;
}



customer.js

var w;
var cstCd;

var txtCstCd;
var txtCstName;
var txtTownCd;
var txtAddress;
var txtTel;
var txtBirth;
var txtSexCd;

onload = init;
onunload = dbClose;

function init() {
  //初期設定をする関数
  txtCstCd = document.getElementById("txtCstCd");
  txtCstName = document.getElementById("txtCstName");
  txtTownCd = document.getElementById("txtTownCd");
  txtAddress = document.getElementById("txtAddress");
  txtTel = document.getElementById("txtTel");
  txtBirth = document.getElementById("txtBirth");
  txtSexCd = document.getElementById("txtSexCd");

  txtCstCd.onfocus = function (){focus(this);}
  txtCstCd.onblur = function (){blur(this);}
  txtCstName.onfocus = function (){focus(this);}
  txtCstName.onblur = function (){blur(this);}
  txtTownCd.onfocus = function (){focus(this);addressOpen();}
  txtTownCd.onblur = function (){blur(this);}
  txtAddress.onfocus = function (){focus(this);}
  txtAddress.onblur = function (){blur(this);}
  txtTel.onfocus = function (){focus(this);}
  txtTel.onblur = function (){blur(this);}
  txtBirth.onfocus = function (){focus(this);}
  txtBirth.onblur = function (){blur(this);}
  txtSexCd.onfocus = function (){focus(this);}
  txtSexCd.onblur = function (){blur(this);}

  document.getElementById("btnInsert").onclick = function (){dataInsert();}
  document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
  document.getElementById("btnDelete").onclick = function (){dataDelete();}
  document.getElementById("linkMaxCd").onclick = function (){return maxCd();}

  dbConnect();
  cstDisplay();
}


function addressOpen(){
  txtAddress.focus();
  w = window.open("address.html","","WIDTH=400,HEIGHT=200,STATUS=1");
}


function focus(obj){
  obj.style.backgroundColor = "#ffff00";
}


function blur(obj){
  obj.style.backgroundColor = "#ffffff";
}


function cstDisplay() {
  //顧客を表示する関数

  var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("customerDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectCst\" id=\"selectCst\">\n";
  tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("customerDisplay").innerHTML = tempHtml;
  document.getElementById("selectCst").onchange = function (){cstChange(this);}

  recordSet.Close();
  recordSet = null;
}


function cstChange(obj) {
  //顧客を選択した時の関数
  if(obj.selectedIndex==0){
    textClear();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("顧客を選択してください。");
  }
  else{
    cstCd = Number(obj.value);
    var mySql = "select * from T04Customer where CST_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);
  
    txtCstCd.value = recordSet(0);
    txtCstName.value = recordSet(1);
    txtTownCd.value = recordSet(2);
    txtAddress.value = recordSet(3);
    txtTel.value = recordSet(4);
    txtBirth.value = dateFormat(recordSet(5));
    txtSexCd.value = recordSet(6);
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(2),database);
  
    recordSet.Close();
    recordSet = null;
  
    sqlDisplay("selectedIndex:" + obj.selectedIndex + " value:" + obj.value);
  }
}


function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}


function maxCd(){
  //最大値を取得する関数
  var mySql = "select max(CST_CD) from T04Customer";
  var recordSet = database.Execute(mySql);
  textClear();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  cstDisplay();
  txtCstCd.value = recordSet(0) + 1;
  txtCstName.focus();
  return false;
}


function textClear() {
  //テキストボックスをクリアする関数
  txtCstCd.value = "";
  txtCstName.value = "";
  txtTownCd.value = "";
  txtAddress.value = "";
  txtTel.value = "";
  txtBirth.value = "";
  txtSexCd.value = "";
}



【2】保存したら customer.html をダブルクリックしてWebブラウザで開きます。
★database.js、base.css、customer.html、customer.css、customer.js、address.html、address.css、address.js は必ず同じフォルダ内に置いてください。


【3】顧客マスターが表示されたら顧客を切り替え、BIRTHの日付が「yyyy/mm/dd」の形式で表示されることを確認してください。

javascript-126.gif


【解説】

customer.jsからは関数dateFormat()を呼び出しているだけです。実引数(関数に渡すデータ)の「recordSet(5)」は、データベースから取り出した「Mon Jan 19 00:00:00 UTC+0900 1970」のような形式を関数に渡しています。

function cstChange(obj) {
省略
    txtBirth.value = dateFormat(recordSet(5));
省略
  }
}

関数dateFormat()からは「yyyy/mm/dd」の形式で値が返ってきますので、テキストボックスtxtBirthに表示します。


次に関数dateFormat()を見てみましょう。仮引数(データを受け取る変数)の_dateは「Mon Jan 19 00:00:00 UTC+0900 1970」のような値を受け取ったとイメージしてください。

function dateFormat(_date) {
  //日付を「yyyy/mm/dd」で返す関数
    var date = new Date(_date);

    var year = date.getYear();
    year = (year > 99)? year : year + 1900;

    var month =date.getMonth() + 1;
    month = (month >= 10)? month : "0" + month;

    var day = date.getDate();
    day = (day >= 10)? day : "0" + day;

    var tempDate = year + "/" + month + "/" + day;
    return tempDate;
}


仮引数_dateをもとに、日付を管理するDateオブジェクトであるdateを作成しています。
var date = new Date(_date);

Dateオブジェクトを使って年を取り出しています。
var year = date.getYear();
ポイントは「19xx年」のxx部分2桁が返されるのですが、1899年以前と2000年以降はそのまま4桁で返ってきます。つまり1900年代だけ0〜99です。そのため少し工夫が必要です。

もしyearが99以上ならそのままyear、違う場合はyearに1900年をプラスして4桁にして、値をyearに戻します。(0〜99のときは1900をプラス)
year = (year > 99)? year : year + 1900;
year = (式)?真:偽 ←基本形


月は0〜11が返るので1をプラスします。0が1月になります。
var month =date.getMonth() + 1;

1桁の月は頭に0を付けて2桁にします。
month = (month >= 10)? month : "0" + month;

日はそのまま使えます。
var day = date.getDate();

1桁の日は頭に0を付けて2桁にします。
day = (day >= 10)? day : "0" + day;

スラッシュで「yyyy/mm/dd」の形式に加工します。
var tempDate = year + "/" + month + "/" + day;

加工した日付を返します。
return tempDate;


以上でデータベースから取り出した日付を任意の形式に加工することができました。


スポンサードリンク






JavaScript初心者入門講座TOPへ