前回までの顧客マスターを見ると、誕生日の日付が「Mon Jan 19 00:00:00 UTC+0900 1970」のような表示になっています。
これはデータベースAccessから取り出した値をそのまま表示しているからです。テーブルT04Customerをデザインビューで見るとBIRTHが「日付/時刻型」となっています。
テーブルT04Customerをデータシートビューで見ると、「yyyy/mm/dd」の形式で表示されていますが、これをそのままとりだすと、「Mon Jan 19 00:00:00 UTC+0900 1970」のような形式になってしまうわけです。
この問題を解決する方法は簡単で、日付の書式を整える関数を作り、変換したい時に呼び出すだけです。日付はいろんな場面で使われますので、共通して使えるように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」の形式で表示されることを確認してください。
【解説】
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;
以上でデータベースから取り出した日付を任意の形式に加工することができました。
