(datepicker)jQueryでhtml構築

入出力を想定した一覧テーブルでページングを非同期で行うときに、htmlの構築をしています。
それで、その中に日付の項目があり、datepickerが使えなくて悩んでいます。

jQueryでhtmlを構築する際のdatepickerを含む入力ボックスの書き方がわかりません。
下記の通りに書くと、datepickerのアイコンをクリックしたときにアイコンが表示されません。

適切な書き方をお教えください。

(追記 2015/06/15)
fuelPHP(jQuery,bootstrap)で開発しております。

lang
1コード
2jQuery.ajax({
3
4(中略)
5
6rows += "<div class=\"col-sm-3\">";
7rows += "<input id=\"aday" + "\" maxlength=\"10\" class=\"form-control input-w3 datePicker hasDatepicker\" placeholder=\"\" name=\"aday" + "\" value=\"" + selectData[i].aday + "\" type=\"text\" />";
8rows += "<img class=\"ui-datepicker-trigger\" src=\"" +  _UriBase + "public/assets/img/datepicker.png\" alt=\"...\" title=\"...\">";
9rows += "</div>";
10
11$("#aaa").append(rows);

行動規範の内容に同意します

回答2件

ベストアンサー

datepicker() をコールしないと動作しないと思いますが、
コールされていますでしょうか？

lang
1$(function() {
2    $( "#aday" ).datepicker();
3});

参考: Datepicker | jQuery UI

-- 追記
一旦、最小限動く物が出来たので載せます。
画像をトリガーで開きたいなら、datepicker()の引数に指定すれば良さそうです。
参考: jQuery UI Datepicker - Icon trigger

test.html

lang
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
6  </head>
7  <body>
8    <button id="get">get</button>
9    <div id="result"></div>
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
11    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
12    <script>
13<!--
14    $(function() {
15
16        $('#get').click(function() {
17
18            $.ajax({
19                type: 'GET',
20                url: 'data.json',
21                dataType: 'json',
22                success: function(json){
23
24                    var html = '';
25                    html += '<div class="col-sm-3">';
26                    html += '<input type="text" id="datepicker" value="' + json[0].date + '">';
27                    html += '</div>';
28
29                    $('#result').append(html);
30
31                    $('#datepicker').datepicker();
32                }
33            });
34
35        });
36
37    });
38//-->
39    </script>
40  </body>
41</html>

data.json

lang
1[
2    {
3        "date": "2015/06/13"
4    }
5]

投稿2015/06/13 08:06

編集2015/06/13 10:21

ryunix

総合スコア1656

dthani

2015/06/13 08:21

ご回答ありがとうございます。なかったため、追記したのですが、上手く動きません。お手数ですが、 jQuery.ajaxで、htmlを書き足す分の記述から教えてください。

ryunix

2015/06/13 08:33

あまり理解しておらず、大変恐縮なのですが... jQuery.ajax はそもそも HTTP通信を行う部品で、そこで HTML の構築をするのはそもそも違う気がするのですが... http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

dthani

2015/06/13 08:46

入出力を想定した一覧テーブルでページングを非同期で行うときに、htmlの構築をしています。それで、その中に日付の項目があり、datepickerが使えなくて悩んでいるところです。

ryunix

2015/06/13 09:04

状況は理解出来ました :D ちょっと考えてみます...

ryunix

2015/06/13 10:21

追記しました :)

dthani

2015/06/13 12:24

ありがとうございます。月曜日、試して結果をお知らせします。

ryunix

2015/06/13 19:21

了解いたしました。うまく行くと良いのですが... :)

dthani

2015/06/15 02:33

ありがとうございます。上手くいきました。が、2点あります。１．最初、ロードしたとき、php側の処理でdatepickerを書いているものが実行されるのですが、その場合、右側のdatepickerのアイコンが表示されるのが、ajaxで処理をしたときにアイコンが消えてしまいます。 ※カーソルを合わせるとカレンダーが表示されます。これをdatepickerのアイコンを表示したときに表示という風にできますか？２．表で複数行出すので、実際は、下記のように書いているのですが、forループを使ってコンパクトに書けますでしょうか？ $('#datepicker_0').datepicker(); $('#datepicker_1').datepicker(); ・・・・・・ $('#datepicker_20').datepicker(); 以上、よろしくお願いします。

orange0190

2015/06/15 02:45

横から失礼。複数の箇所にdatepickerを適用したい場合には、 $(".datepicker").datepicker(); のようにクラスを指定してあげればできますよ。

ryunix

2015/06/15 02:46

1について追記は最低限動くコードしか載せていませんので、アイコンは出ません。アイコンを出す場合は、datepickerの引数で指定する方法が有効だと思います。 2についてもちろん for を用いる方法もありますが、オススメなのはクラスを指定する方法です。 inputにclassを追加し、以下で一括処理出来ます。 $('.className').datepicker(); パソコンによるインターネット接続環境がないので、具体的なコードは出せませんが、これでどうでしょうか？今日の夜でよければ具体的なコードを出せますが、それでは遅いでしょうか？

dthani

2015/06/15 02:48

追記です。 1について、最初、ロードしたときのdatepickerのアイコンは下記の通りになっています。それで下記のアイコンを表示したいと思っています。 <img class="ui-datepicker-trigger" src="/project/public/assets/img/datepicker.png" alt="..." title="...">

ryunix

2015/06/15 02:48

ShunsukeIzuiさんその通りですね、ありがとうございます :D

dthani

2015/06/15 02:58

ryunixさん、ShunsukeIzuiさんご回答ありがとうございます。情報をきちんと伝えていませんでした。すみません。 fuelPHP(jquery, bootstrap)で開発しており、bootstrap特有のclass名で書いています。それで、日付を使用する部分だけ、class名をform-control input-w3から、form-control input-w3 dateにして下記の通りにしたのですが、上手く行きませんでした。 $(".form-control input-w3 date").datepicker();

ryunix

2015/06/15 03:07

複数クラスを指定するのは以下が正しかった気がしますが、どうでしょうか？ $(".form-control.input-w3.date").datepicker();

dthani

2015/06/15 03:19

１の件、上手くいきました。ありがとうございます。あとは、２の件だけです。これはクローズさせて、別で質問あげた方がよいでしょうか？

ryunix

2015/06/15 03:22

今までの流れから、2が上手く行ったのでしょうか？

dthani

2015/06/15 03:31

2について、 $(".form-control.input-w3.date").datepicker({showOn: "button"}); をした場合、アイコンは表示されたのですが、bootstrapのアイコンではなく、点が3つ[...]のアイコンが表示されます。さらに、複数列(１列、２列、３列、４列）、日付があるのですが、1列目しか機能しなくなりました。 $(".form-control.input-w3.date").datepicker();でやった場合は、複数列(１列、２列、３列、４列）、機能しております。

ryunix

2015/06/15 03:41

https://jqueryui.com/resources/demos/datepicker/icon-trigger.html こちらを参考に、オプションを実装してみてください。私の環境では複数用意してやってみたところ、政情に表示されました。

dthani

2015/06/15 05:06

上手くいきました。長い間、ありがとうございます。複数列で表示しなかった理由は、divタグがなかったので、きちんと動きませんでした。 <td> <div class="col-sm-3">　←2列目以降、これがなかったた。 <input～ </div> <td>

ryunix

2015/06/15 05:09

上手くいきましたか、良かったです！ :D

dthani

2015/06/15 05:31

ありがとうございます。感謝します。