タイトルに悩みましたが、こんなことを実行したい場合のTipsです。
- 一覧などでたくさん日付の入力項目がある。
- 日付を選択した段階で非同期通信を使い情報を更新する。
まずポイントとしてはDatepickerのセレクターをIDではなくClassにすることです。
そうすることで同じフィールドがたくさんあったとしてもDatepickerの記述はひとつで済みます。
Datepickerプラグインは優秀なので、Classで指定してやっても、きちんとクリックしたフィールドに日付を代入してくれます。
同じClassで指定してしまったら、どのように非同期通信で更新をするのでしょうか？
答えはIDを指定してやることです。サンプルをご覧下さい。
javascript部[javascript] $(function(){
//datepicker
$(‘.hoge’).datepicker({
changeMonth: true,
changeYear: true,
showMonthAfterYear: false,
yearRange:’:‘,
onSelect:function(date){
$.get(“hoge.php”,
{Id: $(this).attr(“id”),
Date: $(this).val()});
}
});
});
[/javascript]
HTML部[html][/html]
$(this).attr(“id”)とすることでイベントが起こっているフィールドのIDを取得することができます。
この部分にレコードのIDを設定してやればよいでしょう。
Datepickerによって入力された日付は$(this).val()で取得できます。
Datepickerで設定できるイベントは
- beforeShow
カレンダー表示前に実行 - onSelect
カレンダーから日付を選択したときに実行 - onClose
カレンダーを閉じたときに実行
などがあります。目的に応じていろいろ出来ますね。