teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問railsにカレンダーDateTimePickerの導入

編集履歴

質問編集履歴

3

誤字

2015/10/15 02:13

投稿

koppe1989
koppe1989

スコア27

title CHANGED
File without changes
body CHANGED
@@ -70,7 +70,7 @@
70
70
  ⅱ）表示カレンダ－が意図していないcssの影響をうけている（/app/assets/stylesheets/scaffolds.scssに記載したもの）
71
71
  です。
72
72
 
73
- (ⅰ)はTurbolinksが影響している？との記事を見ました（http://qiita.com/devzooiiooz/items/07d45af1c9f307e69061）が、cssの訂正方法がわかりません。
73
+ (ⅰ)はTurbolinksが影響している？との記事を見ました（http://qiita.com/devzooiiooz/items/07d45af1c9f307e69061）が、jsの訂正方法がわかりません。
74
74
  (ⅱ)は現在調査中です。私には同じidやclassを共有しているようには見えないのですが
75
75
 
76
76
  以上、お心当たりがございましたら

2

内容の更新

2015/10/15 02:13

投稿

koppe1989
koppe1989

スコア27

title CHANGED
File without changes
body CHANGED
@@ -1,71 +1,77 @@
1
+ お世話になっております。
1
2
  プログラミング、railsとも初心者です。
2
3
 
3
4
  scaffoldで作成した入力フォームで
4
5
  日付を入力する際に、カレンダーで入力サポートする仕様
5
6
  としたく、挑戦しております。
6
7
 
7
- 下記記事を参考にしているのですが、うまくいきません
8
+ 下記記事を参考にしました。
8
9
  http://blog.hello-world.jp.net/javascript/1762/
9
10
 
10
11
  ご教授お願いします。
11
12
 
12
-
13
13
  ```ここに言語を入力
14
14
  （１）Gemfile の最終行に以下を追加してbundle install
15
15
  gem 'momentjs-rails'
16
16
  gem 'bootstrap3-datetimepicker-rails'
17
+ ```
17
18
 
19
+ ```ここに言語を入力
18
- （２）app/assets/javascripts/application.js 最終行に以下をコピペ
20
+ （２）app/assets/javascripts/application.js 最終行に以下をコピぺ
19
- -------------------------------------------------------------------------
20
21
  //= require moment
21
22
  //= require bootstrap-datetimepicker
22
-
23
- var data = {'data-date-format': 'YYYY-MM-DD hh:mm:ss' };
23
+ var data = {'data-date-format': 'YYYY-MM-DD' };
24
24
  $(function(){
25
25
  $('.datepicker').attr(data);
26
26
  $('.datepicker').datetimepicker();
27
27
  });
28
- ------------------------------------------------------------------------
28
+ ```
29
29
 
30
+ ```ここに言語を入力
30
- （３）app/assets/stylesheets/application.css 最終行に以下をコピペ
31
+ （３）app/assets/stylesheets/application.css 最終行に以下をコピぺ
31
- ------------------
32
- *= require bootstrap
33
32
  *= require bootstrap-datetimepicker
34
- ------------------
35
33
  コピペ後、こんな感じ
36
34
  /*
37
- * This is a manifest file that'll be compiled into application.css, which will include all the files
35
+ * This is a manifest file that'll be compiled into application.css, which...
38
- * listed below.
39
- *
40
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
36
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/asset...
41
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
42
- *~途中省略・・・
37
+ *~途中省略・・
43
38
  *= require_tree .
44
39
  *= require_self
40
+ *= require bootstrap-datetimepicker
45
41
  */
46
- *= require bootstrap
42
+ ```
47
- *= require bootstrap-datetimepicker
48
43
 
44
+ ```ここに言語を入力
49
45
  （４）viewの_form.html.erbを編集
50
46
  編集前
51
47
  ～
52
- <div class='field'>
48
+ <div class="field">
53
49
  <%= f.label :date %><br>
54
50
  <%= f.text_field :date %>
55
51
  </div>
56
52
  ~
57
-
58
53
  編集後
59
54
  ～
60
- <div class='input-group date datepicker'>
55
+ <div class="field">
61
- <%= f.label :date %><br>
56
+ <%= f.label :date %><br>
62
- <%= f.text_field :date, class: 'form-control' %>
57
+ <%= f.text_field :date, :class => 'datepicker' %>
63
- <span class="input-group-addon">
64
58
  </div>
65
59
  ~
60
+
66
61
  ```
62
+ 上記のように変更しました。
63
+ (2)(3)のコピペ部分がコメントアウトのようになるのが気にかかっていたのですが、
64
+ そのような文法だと把握しました。
67
65
 
66
+ 現在(4)を修正し、
67
+ f.text_fieldの部分をクリックすることでカレンダーが表示されるようなりましたが、
68
- 手を加えたのは上記のみです。
68
+ ２点問題があります。
69
- 挙動としてはエラーも生じておらず、変更前とかわりありません。
69
+ ⅰ）ページ遷移した後、カレンダーが表示されない（リロード後に表示される）
70
+ ⅱ）表示カレンダ－が意図していないcssの影響をうけている（/app/assets/stylesheets/scaffolds.scssに記載したもの）
71
+ です。
70
72
 
73
+ (ⅰ)はTurbolinksが影響している？との記事を見ました（http://qiita.com/devzooiiooz/items/07d45af1c9f307e69061）が、cssの訂正方法がわかりません。
74
+ (ⅱ)は現在調査中です。私には同じidやclassを共有しているようには見えないのですが
75
+
76
+ 以上、お心当たりがございましたら
71
- 何が足りないのか、助言をお願い致します。
77
+ ご教授お願い申し上げます。

1

文法の修正

2015/10/14 11:40

投稿

koppe1989
koppe1989

スコア27

title CHANGED
File without changes
body CHANGED
@@ -1,14 +1,16 @@
1
1
  プログラミング、railsとも初心者です。
2
2
 
3
- 今回scaffoldで作成した新規作成の画面で
3
+ scaffoldで作成した入力フォームで
4
4
  日付を入力する際に、カレンダーで入力サポートする仕様
5
5
  としたく、挑戦しております。
6
6
 
7
- 下記記事を参考にしているのですが、うまくいきません。
7
+ 下記記事を参考にしているのですが、うまくいきません
8
- 状況からアドバイスをお願い致します。
9
- 参考＝＞ http://blog.hello-world.jp.net/javascript/1762/
8
+ http://blog.hello-world.jp.net/javascript/1762/
10
- 参考＝＞ https://github.com/TrevorS/bootstrap3-datetimepicker-rails
11
9
 
10
+ ご教授お願いします。
11
+
12
+
13
+ ```ここに言語を入力
12
14
  （１）Gemfile の最終行に以下を追加してbundle install
13
15
  gem 'momentjs-rails'
14
16
  gem 'bootstrap3-datetimepicker-rails'
@@ -61,6 +63,7 @@
61
63
  <span class="input-group-addon">
62
64
  </div>
63
65
  ~
66
+ ```
64
67
 
65
68
  手を加えたのは上記のみです。
66
69
  挙動としてはエラーも生じておらず、変更前とかわりありません。