2010年1月8日のメモ
またまたjavaScriptとのお付き合いです。
javaScriptなんか全然勉強してないんですけど。
その場その場で必死にソースを拾って改変しての付け焼刃です。毎回そうだよ。
いい加減本格的に勉強したいかもと思いつつそんな機会は巡ってこない。
ことの始まりは、カレンダー+時間を選択させてリストボックスにどんどん追加していきたい、というもの
既にカレンダーの方は誰かが作っており、カレンダーの日付を押すだけでリストボックスへどんどん追加されていくようになっていました。
そしてその下に時間
やりたい事はですね
何日に何時から何時まで。ってことを選択させてそれをDBに保管したいわけですよ。
今のままだと例えば11日と12日選んで9時〜10時としかできないのです。
11日9時〜10時、12日14時〜15時
という風に一日ずつ登録したいんですね。
これがまた大苦戦!!
カレンダー+時間が選択できちゃうすぐれものはあったのですよ。
http://labs.spookies.co.jp/2007/11/20/protocalendar-js-10-relese/
↑これです。
しかし、時間が一つしか入力できない。
色々手を加えなきゃならんだろうし、他の人が作ってるカレンダーを崩すことになっちゃってそっちの設定も弄らなきゃならなくなるかもしんない!!!
うわー!(@△@;)
ってことで、非常に便利そうですが断念。
他人の手で作られたプログラムは怖くておいそれと触れないチキンな那月です。
カレンダーはそのままに時間だけどうにかすることにしました。
これです。
↓
http://pttimeselect.sourceforge.net/example/index.html
しかしこいつ…日本で利用してる人が少ないみたいでなかなか資料が見つからず大変だったorz
使用方法ぐぐっても日本語では二つしか見つかんなかったよ…。
何とか自分で頑張って使いやすいように編集
ソースと写真は後で載せます。
今回はptTimeSelectの改変についてメモ投下しておきます。
更に、AMPMで分けるのが嫌だった。
時間比較もしたいので、00時から23時にしたかったのです。
そこでptTimeSelectの中身も弄っちゃいました。
良いのかな。
よく分からんけど。
src/jquery.ptTimeSelect.jsファイルで
var hr = 9;
var min = '00';
var tm = '';
if (i.val()) {
var re = /([0-9]{1,2}).*:.*([0-9]{2}).*(PM|AM)/i;
var match = re.exec(i.val());
if (match) {
hr = match[1] || 9;
min = match[2] || '00';
tm = match[3] || '';
}
}
という風に変更
AMを抜いて1:00の代わりに9:00にしただけです。
デフォは9:00くらいが良いかなーと思って。
いや、クライアントがいつぐらいが良いのかは知らんけど。
それから、同じくsrc/jquery.ptTimeSelect.jsファイル
+ ' <div class="ptTimeSelectHrAmPmCntr">'
+ ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);" '
+ ' style="display: block; width: 45%; float: left;">AM</a>'
+ ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);" '
+ ' style="display: block; width: 45%; float: left;">PM</a>'
+ ' <br style="clear: left;" /><div></div>'
+ ' </div>'
こいつらをコメントアウト
これでAM/PMが消えます。
で、こいつのすぐ下に1〜12まで数字割り振ってるところがあるので13〜23まで追加。
これでhourが1〜23まで選べるようになりました。
改変終わり。
さて、まだ作業途中なわけですが、うまく時間比較とか、できるかなー…
今はテキストボックスに表示した時間をリストボックスに追加していくとこまでできました。
次回はその辺りを載せますね。
では。

0