teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コメントに対する追記

2015/06/13 10:21

投稿

ryunix
ryunix

スコア1656

answer CHANGED
@@ -7,4 +7,64 @@
7
7
  });
8
8
  ```
9
9
 
10
- 参考: [Datepicker | jQuery UI](https://jqueryui.com/datepicker/)
10
+ 参考: [Datepicker | jQuery UI](https://jqueryui.com/datepicker/)
11
+
12
+
13
+ -- 追記
14
+ 一旦、最小限動く物が出来たので載せます。
15
+ 画像をトリガーで開きたいなら、`datepicker()`の引数に指定すれば良さそうです。
16
+ 参考: [jQuery UI Datepicker - Icon trigger](https://jqueryui.com/resources/demos/datepicker/icon-trigger.html)
17
+
18
+ test.html
19
+ ```lang-html
20
+ <!DOCTYPE html>
21
+ <html lang="ja">
22
+ <head>
23
+ <meta charset="utf-8">
24
+ <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
25
+ </head>
26
+ <body>
27
+ <button id="get">get</button>
28
+ <div id="result"></div>
29
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
30
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
31
+ <script>
32
+ <!--
33
+ $(function() {
34
+
35
+ $('#get').click(function() {
36
+
37
+ $.ajax({
38
+ type: 'GET',
39
+ url: 'data.json',
40
+ dataType: 'json',
41
+ success: function(json){
42
+
43
+ var html = '';
44
+ html += '<div class="col-sm-3">';
45
+ html += '<input type="text" id="datepicker" value="' + json[0].date + '">';
46
+ html += '</div>';
47
+
48
+ $('#result').append(html);
49
+
50
+ $('#datepicker').datepicker();
51
+ }
52
+ });
53
+
54
+ });
55
+
56
+ });
57
+ //-->
58
+ </script>
59
+ </body>
60
+ </html>
61
+ ```
62
+
63
+ data.json
64
+ ```lang-json
65
+ [
66
+ {
67
+ "date": "2015/06/13"
68
+ }
69
+ ]
70
+ ```