jQueryでdatepickerを複数フォームで使う

業務系システムではよく日付けの入力というものが行われますが、手動で年月日を入力するのを嫌がりカレンダーを表示させてそこから選択できるようにしてほしいという要望が多くあります。

今回はその日付け入力に便利な jQuery UI の datepicker を使ってみます。

Datepickerを設置する

サンプル

フォーム内をクリックしてみてください。



 

html

jQuery

カレンダーにデザインが付いていないので以下から好みのテーマのスタイルを読み込んでください。

例として以下をヘッダに追記してみてください

いかがですか、こんな簡単にカレンダーが使えます。

 

datepickerを複数フォームで使用する

複数フォームでdatepickerを使ってみます

サンプル


 

html

jQuery

フォームに class を指定し、そのclassに対してdatepickerを行うだけで使えます。

 

追加フォームにdatepicker使用するが正常に動かない

jQueryによるフォームテーブル行の追加・削除」で紹介したテーブルにdatepickerを使ってみます。

サンプル

名前 メールアドレス 期限

html

jQuery

カレンダーが出るので上手く行ったと思いきや動きが変ですね。

何行追加しても一番上のフォームに入ってしまいます。

表示後にjQueryなどで動的にフォームを追加した場合、datepickerのイベントを付け直す必要があります。

行をcloneで複製して追加すると、複製元のdatepickerイベントをそのままコピーしてしまうためです。

 

追加フォームにdatepickerを使用する

修正ポイントと以下の通り

・カレンダーのフォームに付与された class=”datepicker ” を削除する

・カレンダーのフォームにユニークなidを付与する

 

サンプル

名前 メールアドレス 期限

 

html

trタグに data-row という行番号の値を設定します。

これは、後にカレンダーフォームにidを付与する時に使用します。

datepickerを表示させるinputフォームに id=”date4_1″の様にidを付与します、この最後の 1 を行追加時に変更させます。

jQuery

7行目で、trタグに設定した行番号を取得して +1 します。

9行目で、trタグの行番号idを +1 した新しい行番号に変更します

11行目で、カレンダーのフォームのidを +1 した新しい行番号に変更します

idを付与しないと、カレンダーのフォームにフォーカスが入りdatepickerで自動的にidが付与されます、行を追加するとidもコピーされてしまうので何行目でdatepickerを開いても最初のカレンダーフォームに値が入ってしまいます

13行目で、datepickerのイベントを付与し直します。

カレンダーのフォームにフォーカスが入るとdatepickerで自動的に hasDatepicker というクラスが付与されてしまいますので removeClass で削除します。

これを削除しないと何行目でdatepickerを開こうとしても最初の行でdatepickerが開いてしまいます。

off() でイベントを削除して、on() でdatepickerイベントを付け直します。

 

その他の設定

datepicker の紹介は多くのサイトでも紹介されていますので、オプションなどはそちらのサイトなどを参照してください。

http://js.studio-kingdom.com/jqueryui/widgets/datepicker

 

まとめ

datepicker はカレンダーから日付け選択できるとても便利なものです、ぜひ使ってみてください。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です