teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問datepickerを動的に使いたい

編集履歴

回答編集履歴

5

補足説明

2019/03/12 06:27

投稿

FKM
FKM

スコア3694

answer CHANGED
@@ -17,7 +17,7 @@
17
17
  }
18
18
  ```
19
19
 
20
- テスト結果
20
+ 最終的にこのようにして解決させました。イベントは複製先は継承されないが、複製元は維持されるという特性を利用しています。
21
21
 
22
22
  ```
23
23
  //カレンダーの設定

4

アイコンは任意

2019/03/12 06:27

投稿

FKM
FKM

スコア3694

answer CHANGED
@@ -20,24 +20,28 @@
20
20
  テスト結果
21
21
 
22
22
  ```
23
+ //カレンダーの設定
24
+ 　　var status = {
25
+ 　　buttonImage: "(画像URL)", // カレンダーアイコン画像
26
+ 　　buttonText: "カレンダーから選択", // ツールチップ表示文言
27
+ 　　buttonImageOnly: true, // 画像として表示
28
+ 　　showOn: "both", // カレンダー呼び出し元の定義
29
+ 　　dateFormat:'yy-mm-dd',
30
+ 　 };
31
+ //カレンダーイベント
23
- $('.test_date').datepicker();
32
+ 　　$('.test_date').datepicker(status);
24
33
  $(document).on('click', '[type="button"]', function(){
25
34
  var r = this.parentNode;
26
35
  var clone = $(r).clone();
27
36
  $(r).after(clone);
37
+ //clearDatePickerSelector(status);
28
38
  $('.test_date', clone).removeClass("hasDatepicker")
29
39
  .removeData("datepicker")
30
40
  .removeAttr("id")
31
- .datepicker();
41
+ .datepicker(status)
42
+ .parent().find('img').not(':first').remove();
32
43
  });
33
- function setDatePickerSelector($selector){
34
- $selector.each(function(){
35
- $o = $(this);
36
- $o.datepicker({ buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd' });
37
- $o.datepicker("option", "showOn", 'button');
38
- $o.datepicker("option", "buttonImageOnly", true);
39
- $o.datepicker("option", "buttonImage", 'images/calendar.png');
40
- });
44
+ })
41
- }
42
45
 
46
+
43
47
  ```

3

これでいけます

2019/03/12 06:16

投稿

FKM
FKM

スコア3694

answer CHANGED
@@ -15,4 +15,29 @@
15
15
  $o.datepicker("option", "buttonImage", 'images/calendar.png');
16
16
  })
17
17
  }
18
+ ```
19
+
20
+ テスト結果
21
+
22
+ ```
23
+ $('.test_date').datepicker();
24
+ $(document).on('click', '[type="button"]', function(){
25
+ var r = this.parentNode;
26
+ var clone = $(r).clone();
27
+ $(r).after(clone);
28
+ $('.test_date', clone).removeClass("hasDatepicker")
29
+ .removeData("datepicker")
30
+ .removeAttr("id")
31
+ .datepicker();
32
+ });
33
+ function setDatePickerSelector($selector){
34
+ $selector.each(function(){
35
+ $o = $(this);
36
+ $o.datepicker({ buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd' });
37
+ $o.datepicker("option", "showOn", 'button');
38
+ $o.datepicker("option", "buttonImageOnly", true);
39
+ $o.datepicker("option", "buttonImage", 'images/calendar.png');
40
+ });
41
+ }
42
+
18
43
  ```

2

eachはいらないかも

2019/03/11 12:40

投稿

FKM
FKM

スコア3694

answer CHANGED
@@ -3,18 +3,16 @@
3
3
  [動的に生成したDOM要素に対してjQueryでイベントを設定する場合](https://qiita.com/negi/items/6ec0d3cedba499eac81a)
4
4
 
5
5
 
6
- また、至る箇所にカレンダーAPIを使用するなら、ユニークにしか制御できないidではなくてクラスで指定して、その中でjQueryのeachメソッドを利用したらいいと思います。
6
+ また、至る箇所にカレンダーAPIを使用するなら、ユニークにしか制御できないidではなくてクラスで指定して、その中でjQueryのメソッドを利用したらいいと思います。
7
7
 
8
8
  ```
9
9
  function setDatePickerSelector($selector){
10
- $selector.each(function(){
11
- $(this).on("click",function(){
10
+ $(document).on("click",$selector,function(){
12
- $o = $(this);
11
+ $o = $(this);
13
- $o.datepicker({ buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd' });
12
+ $o.datepicker({ buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd' });
14
- $o.datepicker("option", "showOn", 'button');
13
+ $o.datepicker("option", "showOn", 'button');
15
- $o.datepicker("option", "buttonImageOnly", true);
14
+ $o.datepicker("option", "buttonImageOnly", true);
16
- $o.datepicker("option", "buttonImage", 'images/calendar.png');
15
+ $o.datepicker("option", "buttonImage", 'images/calendar.png');
17
- })
16
+ })
18
- });
19
17
  }
20
18
  ```

1

このようにする

2019/03/11 01:20

投稿

FKM
FKM

スコア3694

answer CHANGED
@@ -3,4 +3,18 @@
3
3
  [動的に生成したDOM要素に対してjQueryでイベントを設定する場合](https://qiita.com/negi/items/6ec0d3cedba499eac81a)
4
4
 
5
5
 
6
- また、至る箇所にカレンダーAPIを使用するなら、ユニークにしか制御できないidではなくてクラスで指定して、その中でjQueryのeachメソッドを利用したらいいと思います。
6
+ また、至る箇所にカレンダーAPIを使用するなら、ユニークにしか制御できないidではなくてクラスで指定して、その中でjQueryのeachメソッドを利用したらいいと思います。
7
+
8
+ ```
9
+ function setDatePickerSelector($selector){
10
+ $selector.each(function(){
11
+ $(this).on("click",function(){
12
+ $o = $(this);
13
+ $o.datepicker({ buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd' });
14
+ $o.datepicker("option", "showOn", 'button');
15
+ $o.datepicker("option", "buttonImageOnly", true);
16
+ $o.datepicker("option", "buttonImage", 'images/calendar.png');
17
+ })
18
+ });
19
+ }
20
+ ```