teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【Rails5】Bootstrap4(alpha-6)でのDatetimepickerの実装

編集履歴

質問編集履歴

4

整形

2017/06/29 01:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -172,15 +172,15 @@
172
172
 
173
173
 
174
174
 
175
- | 対策 | 内容 |
175
+ |対策 | 内容 |
176
176
 
177
177
  |:-----------|:------------|
178
178
 
179
- | 対策1 |Bootstrap4でDatetimepickerを実装できるよう努力 |
179
+ |対策1 |Bootstrap4でDatetimepickerを実装できるよう努力 |
180
-
180
+
181
- | 対策2 |対策1が無理な場合、 [参考](http://rails.densan-labs.net/form/datetime_register_form.html)を見て、「日程」と「時間」を**2つのフォームを分け**、バックグラウンドで**1つのカラム(日時)にDB保存**できるようプログラム。 |
181
+ |対策2 |対策1が無理な場合、 [参考](http://rails.densan-labs.net/form/datetime_register_form.html)を見て、「日程」と「時間」を**2つのフォームを分け**、バックグラウンドで**1つのカラム(日時)にDB保存**できるようプログラム。 |
182
-
182
+
183
- | 対策3 |対策2が難しい場合、DBの設計をdateとtimeに**2つカラムに別々に保存**する。 |
183
+ |対策3 |対策2が難しい場合、DBの設計をdateとtimeに**2つカラムに別々に保存**する。 |
184
184
 
185
185
 
186
186
 
@@ -210,9 +210,9 @@
210
210
 
211
211
  |:-----------|:------------|
212
212
 
213
- | 質問1 |Bootstrap4でDatetimepickerを実装にあたって、上記症状の原因、あるいは情報をご助言ください。 |
213
+ |質問1 |Bootstrap4でDatetimepickerを実装にあたって、上記症状の原因、あるいは情報をご助言ください。 |
214
-
214
+
215
- | 質問2 | **日時** のDB保存時、日付と時間を **２つのカラムに分ける** にあたって致命的なことはありますか。 |
215
+ |質問2 | **日時** のDB保存時、日付と時間を **２つのカラムに分ける** にあたって致命的なことはありますか。 |
216
216
 
217
217
 
218
218
 

3

仕様が質問に関係ないので削除。

2017/06/29 01:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,228 +10,206 @@
10
10
 
11
11
 
12
12
 
13
+
14
+
15
+ # [問題点]Datetimepicker実装できない
16
+
17
+ Bootstrap4だからでしょうか。
18
+
19
+ 長時間試行錯誤していますが、やはりダメです
20
+
21
+
22
+
23
+ ![1](c411b56b6bece3a51b0fa451e4ff474c.png)
24
+
25
+ フォームをクリックすると、**時計マークのみ**。 **時計マーククリック**すると
26
+
27
+ ![2](8056b503cb1f38278ded7fdeae790109.png)
28
+
29
+ 時間が表示される。**カレンダーマークがあるのでクリック**すると
30
+
31
+ ![3](1689823796ffae9a650851501752d46e.png)
32
+
33
+
34
+
35
+ ![4](8d04e731b249ce254f60f7ead0b76a8b.png)
36
+
37
+ **アイコン**以外が変わらない。同じ症状の方いませんか。
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+ # 関連コード
46
+
47
+
48
+
49
+ ```Javascript
50
+
51
+
52
+
53
+ //= require jquery
54
+
55
+ //= require jquery_ujs
56
+
57
+ //= require turbolinks
58
+
59
+
60
+
61
+ //= require moment # datetimepickerに必要
62
+
63
+ //= require moment/ja # datetimepickerに必要
64
+
65
+ //= require bootstrap-datetimepicker # datetimepickerに必要
66
+
67
+
68
+
69
+
70
+
71
+ //= require_tree ./shared
72
+
73
+ //= require_tree ./host
74
+
75
+
76
+
77
+
78
+
79
+ ```
80
+
81
+
82
+
83
+ ```CSS
84
+
85
+
86
+
87
+ /*
88
+
89
+ *= require font-awesome
90
+
91
+ *= require bootstrap-datetimepicker # datetimepickerに必要
92
+
93
+ *= require_tree ./shared
94
+
95
+ *= require_tree ./host
96
+
97
+ */
98
+
99
+
100
+
101
+ ```
102
+
103
+
104
+
105
+ ```Ruby
106
+
107
+
108
+
13
- # 製作中Webサービスの仕様
109
+ # Gemfileです
110
+
14
-
111
+ gem 'momentjs-rails', '>= 2.9.0' # datetimepickerに必要
112
+
15
-
113
+ gem 'bootstrap3-datetimepicker-rails', '~> 4.14.30' # datetimepickerに必要
114
+
115
+
116
+
117
+
118
+
16
-
119
+ ```
120
+
121
+
122
+
123
+ ```HTML
124
+
125
+
126
+
127
+ .col-lg-9 : input.form-control.datetimepicker[type="text"]
128
+
129
+
130
+
131
+ ```
132
+
133
+
134
+
135
+ ```Javascript
136
+
137
+
138
+
139
+ $(document).on "ready turbolinks:load", ->
140
+
141
+ $('.datetimepicker').datetimepicker
142
+
143
+ icons:
144
+
145
+ time: 'fa fa-clock-o'
146
+
147
+ date: 'fa fa-calendar'
148
+
149
+ up: 'fa fa-arrow-up'
150
+
151
+ down: 'fa fa-arrow-down'
152
+
153
+ previous: 'fa fa-arrow-left'
154
+
155
+ next: 'fa fa-arrow-right'
156
+
157
+ return
158
+
159
+
160
+
161
+ ```
162
+
163
+
164
+
165
+
166
+
167
+ # 諦めの境地です
168
+
169
+
170
+
171
+ 今後考えうる対策および流れとして
172
+
173
+
174
+
17
- | 仕様 | 内容 |
175
+ | 対策 | 内容 |
18
176
 
19
177
  |:-----------|:------------|
20
178
 
21
- | まとめ1 | ある **「団体(Host)」** が **ある日程** で催す **Event** に **「User」** が **参加** できるサービス。 |
22
-
23
- | 詳細1 | ある **「団体(Host)」** は **複数のEvent** をもつ。 |
24
-
25
- | 詳細2 | **個々のEvent** は、更に **複数の開催日時** を持つ。 |
26
-
27
- | 詳細3 | **個々の開催日時** は、 **複数の参加者(User)** を持つ。 |
28
-
29
-
30
-
31
- より詳細な仕様は下記より。
32
-
33
- [クックパッド料理教室のようなモデル関連付け(81910)｜teratail](https://teratail.com/questions/81910)
34
-
35
-
36
-
37
- # [問題点]Datetimepicker実装できない
38
-
39
- Bootstrap4だからでしょうか。
40
-
41
- 長時間試行錯誤していますが、やはりダメです
42
-
43
-
44
-
45
- ![1](c411b56b6bece3a51b0fa451e4ff474c.png)
46
-
47
- フォームをクリックすると、**時計マークのみ**。 **時計マーククリック**すると
48
-
49
- ![2](8056b503cb1f38278ded7fdeae790109.png)
50
-
51
- 時間が表示される。**カレンダーマークがあるのでクリック**すると
52
-
53
- ![3](1689823796ffae9a650851501752d46e.png)
54
-
55
-
56
-
57
- ![4](8d04e731b249ce254f60f7ead0b76a8b.png)
58
-
59
- **アイコン**以外が変わらない。同じ症状の方いませんか。
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
- # 関連コード
68
-
69
-
70
-
71
- ```Javascript
72
-
73
-
74
-
75
- //= require jquery
76
-
77
- //= require jquery_ujs
78
-
79
- //= require turbolinks
80
-
81
-
82
-
83
- //= require moment # datetimepickerに必要
84
-
85
- //= require moment/ja # datetimepickerに必要
86
-
87
- //= require bootstrap-datetimepicker # datetimepickerに必要
88
-
89
-
90
-
91
-
92
-
93
- //= require_tree ./shared
94
-
95
- //= require_tree ./host
96
-
97
-
98
-
99
-
100
-
101
- ```
102
-
103
-
104
-
105
- ```CSS
106
-
107
-
108
-
109
- /*
110
-
111
- *= require font-awesome
112
-
113
- *= require bootstrap-datetimepicker # datetimepickerに必要
114
-
115
- *= require_tree ./shared
116
-
117
- *= require_tree ./host
118
-
119
- */
120
-
121
-
122
-
123
- ```
124
-
125
-
126
-
127
- ```Ruby
128
-
129
-
130
-
131
- # Gemfileです
132
-
133
- gem 'momentjs-rails', '>= 2.9.0' # datetimepickerに必要
134
-
135
- gem 'bootstrap3-datetimepicker-rails', '~> 4.14.30' # datetimepickerに必要
136
-
137
-
138
-
139
-
140
-
141
- ```
142
-
143
-
144
-
145
- ```HTML
146
-
147
-
148
-
149
- .col-lg-9 : input.form-control.datetimepicker[type="text"]
150
-
151
-
152
-
153
- ```
154
-
155
-
156
-
157
- ```Javascript
158
-
159
-
160
-
161
- $(document).on "ready turbolinks:load", ->
162
-
163
- $('.datetimepicker').datetimepicker
164
-
165
- icons:
166
-
167
- time: 'fa fa-clock-o'
168
-
169
- date: 'fa fa-calendar'
170
-
171
- up: 'fa fa-arrow-up'
172
-
173
- down: 'fa fa-arrow-down'
174
-
175
- previous: 'fa fa-arrow-left'
176
-
177
- next: 'fa fa-arrow-right'
178
-
179
- return
180
-
181
-
182
-
183
- ```
184
-
185
-
186
-
187
-
188
-
189
- # 諦めの境地です
190
-
191
-
192
-
193
- 今後考えうる対策および流れとして
194
-
195
-
196
-
197
- | 対策 | 内容 |
179
+ | 対策1 |Bootstrap4でDatetimepickerを実装できるよう努力 |
180
+
181
+ | 対策2 |対策1が無理な場合、 [参考](http://rails.densan-labs.net/form/datetime_register_form.html)を見て、「日程」と「時間」を**2つのフォームを分け**、バックグラウンドで**1つのカラム(日時)にDB保存**できるようプログラム。 |
182
+
183
+ | 対策3 |対策2が難しい場合、DBの設計をdateとtimeに**2つカラムに別々に保存**する。 |
184
+
185
+
186
+
187
+
188
+
189
+ ... を検討しています。
190
+
191
+
192
+
193
+ 対策2の[参考](http://rails.densan-labs.net/form/datetime_register_form.html)は難易度が若干高く、
194
+
195
+ 対策3が1番簡単な気がします、
196
+
197
+ 今後Bootstrap4が安定しDatetimepicker利用可能になれば、
198
+
199
+ また柔軟に対応も検討していきたいところです。
200
+
201
+
202
+
203
+
204
+
205
+ # 質問をまとめます。
206
+
207
+
208
+
209
+ | 質問 | 内容 |
198
210
 
199
211
  |:-----------|:------------|
200
212
 
201
- | 対策1 |Bootstrap4でDatetimepickerを実装できるよう努力 |
202
-
203
- | 対策2 |対策1が無理な場合、 [参考](http://rails.densan-labs.net/form/datetime_register_form.html)を見て、「日程」と「時間」を**2つのフォームを分け**、バックグラウンドで**1つのカラム(日時)にDB保存**できるようプログラム。 |
204
-
205
- | 対策3 |対策2が難しい場合、DBの設計をdateとtimeに**2つカラムに別々に保存**する。 |
206
-
207
-
208
-
209
-
210
-
211
- ... を検討しています。
212
-
213
-
214
-
215
- 対策2の[参考](http://rails.densan-labs.net/form/datetime_register_form.html)は難易度が若干高く、
216
-
217
- 対策3が1番簡単な気がします、
218
-
219
- 今後Bootstrap4が安定しDatetimepicker利用可能になれば、
220
-
221
- また柔軟に対応も検討していきたいところです。
222
-
223
-
224
-
225
-
226
-
227
- # 質問をまとめます。
228
-
229
-
230
-
231
- | 質問 | 内容 |
232
-
233
- |:-----------|:------------|
234
-
235
213
  | 質問1 |Bootstrap4でDatetimepickerを実装にあたって、上記症状の原因、あるいは情報をご助言ください。 |
236
214
 
237
215
  | 質問2 | **日時** のDB保存時、日付と時間を **２つのカラムに分ける** にあたって致命的なことはありますか。 |

2

誤字修正

2017/06/28 23:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -154,7 +154,7 @@
154
154
 
155
155
 
156
156
 
157
- ```Coffee
157
+ ```Javascript
158
158
 
159
159
 
160
160
 

1

誤字修正

2017/06/28 23:54

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 【Rails5】Bootstrap4(alpha-6)DでのDatetimepickerの実装
1
+ 【Rails5】Bootstrap4(alpha-6)でのDatetimepickerの実装
test CHANGED
File without changes