TOOL更新_「64.日付項目をカレンダー選択できるようにする。」の祝日をAjaxにした。
TOOL更新_「64.日付項目をカレンダー選択できるようにする。」「http://d.hatena.ne.jp/kazpgm/20090403」の祝日をAjaxにした。
1.祝日をAjaxでサーバーから取得するようにした。見た目「/js/holidays.xml」なのであまり意味ないが、後で「休日テーブル」などを使いたいと思ったとき、簡単にハンドリングできる。という前準備みたいなもの。
・「jkl-calendar.js」を修正(この間作った「function isHoliday(prmDateStr)」をAjaxにした。http://kazpgm.ddo.jp/kaz01u/js/jkl-calendar_20090707u.js <−見る時は開かないで「保存」してください。開くと実行してしまいます。(修正BSDライセンス)
<= 7/16追加 start =>
「httpObject.open("GET","/kaz01u/js/holidays.xml",true);」の「/kaz01u/js/holidays.xml」は変更してください。kl-calendar_20090707u.js中のコメントを以下にした。
// 2009/07/07 - 植木 Ajaxで「holidays.xml」から祝日取得。かつ、font-family追加。 // 「holidays.xml」は置き場所に合わせて変更してください。
<= 7/16追加 end =>
// 祝日 20090707 start // 祝日配列 var holidayAry = new Array(); // 後々、祝日テーブルから取れるようにするため、 // サーバからXML形式で祝日を取り込む。 loadXMLholidays(); function createXMLHttpRequest(cbFunc){ var XMLhttpObject = null; try{ XMLhttpObject = new XMLHttpRequest(); }catch(e){ try{ XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ return null; } } } if(XMLhttpObject){ XMLhttpObject.onreadystatechange = cbFunc; } return XMLhttpObject; } function loadXMLholidays() { httpObject = createXMLHttpRequest(handleResponse); if (httpObject){ httpObject.open("GET","/kaz01u/js/holidays.xml",true); httpObject.send(null); } } function handleResponse(){ if ((httpObject.readyState == 4) && (httpObject.status == 200)){ xmlData = httpObject.responseXML; dateListTags = xmlData.getElementsByTagName("date"); dateLen = dateListTags.length; // 登録されているデータ数 for(i=0; i<dateLen; i++){ holidayAry[i] = dateListTags[i].firstChild.nodeValue; } } } // "yyyy/mm/dd"形式の日付文字列を渡す // 祝日のときtrueを戻す。 function isHoliday(prmDateStr) { // 祝日かどうかを戻す。 for ( var i=0; i < holidayAry.length; i++ ) { if (prmDateStr == holidayAry[i]) { return true; } } return false; } // 祝日 20090707 end
・「holidays.xml」はこんな感じ
<?xml version="1.0" encoding="UTF-8" ?> <holidaylist> <date>2009/04/29</date> <date>2009/05/03</date> <date>2009/05/04</date> <date>2009/05/05</date> <date>2009/05/06</date> <date>2009/07/20</date> <date>2009/09/21</date> <date>2009/09/22</date> <date>2009/09/23</date> <date>2009/10/12</date> </holidaylist>
2.「jkl-calendar.js」はプルダウンリストがカレンダー表示エリアにあるとカレンダーがうまく表示されないので修正BSDライセンスの「jkl-calendar_20070204_SSL.js」に変更した。しかし表示がちょっと変。あとで理由を調べよう。(こちらのカレンダーは日曜から始まっている。この並びのほうが見慣れている。)
・IE
・Firefox
・変だといいながら本番サーバに載せているのはどうかとも思うが、チョコチョコしらべようかなと思うのでこのままにしておく。
<=7/8 12:00 会社のデザイナーさんに聞いた。CSSに「font-family: MS UI Gothic;」を追加する。今はきれいに出ている。解決です。(カレンダー追加は5月27日から調査していて最終的に「jkl-calendar_20070204_SSL.js」をベースにしているが、途中、画面が変ということで使うのをやめようと思っていた。解決してよかった。)
<=7/8 とおもったら、入力した日付が入ってない。ということでまだNG状態です。(IEはOK、FirefoxがNG)
<=7/8 <form name="frm" id="frm" method="post" action="xxxx.xxxx">の「id="frm"」が抜けていた。入れたら動いた。
・完成。<=7/8 きれいに見れます。
追加)会社の人にAjax説明ページを教えてもらった。参考URL(http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html)
09:00−01:30