jQueryのDatepickerを複数のフィールドに適用し、イベントを実行する。

タイトルに悩みましたが、こんなことを実行したい場合のTipsです。

  • 一覧などでたくさん日付の入力項目がある。
  • 日付を選択した段階で非同期通信を使い情報を更新する。

まずポイントとしてはDatepickerのセレクターをIDではなくClassにすることです。
そうすることで同じフィールドがたくさんあったとしてもDatepickerの記述はひとつで済みます。
Datepickerプラグインは優秀なので、Classで指定してやっても、きちんとクリックしたフィールドに日付を代入してくれます。

同じClassで指定してしまったら、どのように非同期通信で更新をするのでしょうか?
答えはIDを指定してやることです。サンプルをご覧下さい。

javascript部

HTML部

$(this).attr(“id”)とすることでイベントが起こっているフィールドのIDを取得することができます。
この部分にレコードのIDを設定してやればよいでしょう。
Datepickerによって入力された日付は$(this).val()で取得できます。

Datepickerで設定できるイベントは

  • beforeShow
    カレンダー表示前に実行
  • onSelect
    カレンダーから日付を選択したときに実行
  • onClose
    カレンダーを閉じたときに実行

などがあります。目的に応じていろいろ出来ますね。

関連記事

コメントを残す

メールアドレスが公開されることはありません。

Trackback URL

管理者の承認後に表示します。