質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

589閲覧

【Rails5】Bootstrap4(alpha-6)でのDatetimepickerの実装

退会済みユーザー

退会済みユーザー

総合スコア0

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2017/06/28 23:52

編集2017/06/29 01:31

バージョン

項目バージョン
Rails5.0.2
Bootstrap4-alpha-6

[問題点]Datetimepicker実装できない

Bootstrap4だからでしょうか。
長時間試行錯誤していますが、やはりダメです

1
フォームをクリックすると、時計マークのみ時計マーククリックすると
2
時間が表示される。カレンダーマークがあるのでクリックすると
3

4
アイコン以外が変わらない。同じ症状の方いませんか。

関連コード

Javascript

1 2//= require jquery 3//= require jquery_ujs 4//= require turbolinks 5 6//= require moment # datetimepickerに必要 7//= require moment/ja # datetimepickerに必要 8//= require bootstrap-datetimepicker # datetimepickerに必要 9 10 11//= require_tree ./shared 12//= require_tree ./host 13 14

CSS

1 2/* 3 *= require font-awesome 4 *= require bootstrap-datetimepicker # datetimepickerに必要 5 *= require_tree ./shared 6 *= require_tree ./host 7*/ 8

Ruby

1 2# Gemfileです 3gem 'momentjs-rails', '>= 2.9.0' # datetimepickerに必要 4gem 'bootstrap3-datetimepicker-rails', '~> 4.14.30' # datetimepickerに必要 5 6

HTML

1 2.col-lg-9 : input.form-control.datetimepicker[type="text"] 3

Javascript

1 2$(document).on "ready turbolinks:load", -> 3 $('.datetimepicker').datetimepicker 4 icons: 5 time: 'fa fa-clock-o' 6 date: 'fa fa-calendar' 7 up: 'fa fa-arrow-up' 8 down: 'fa fa-arrow-down' 9 previous: 'fa fa-arrow-left' 10 next: 'fa fa-arrow-right' 11 return 12

諦めの境地です

今後考えうる対策および流れとして

対策内容
対策1Bootstrap4でDatetimepickerを実装できるよう努力
対策2対策1が無理な場合、 参考を見て、「日程」と「時間」を2つのフォームを分け、バックグラウンドで1つのカラム(日時)にDB保存できるようプログラム。
対策3対策2が難しい場合、DBの設計をdateとtimeに2つカラムに別々に保存する。

... を検討しています。

対策2の参考は難易度が若干高く、
対策3が1番簡単な気がします、
今後Bootstrap4が安定しDatetimepicker利用可能になれば、
また柔軟に対応も検討していきたいところです。

質問をまとめます。

質問内容
質問1Bootstrap4でDatetimepickerを実装にあたって、上記症状の原因、あるいは情報をご助言ください。
質問2日時 のDB保存時、日付と時間を 2つのカラムに分ける にあたって致命的なことはありますか。

Bootstrap4が安定するまでDBカラム分けようかな...。強がらずに...。苦笑

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

まだv4は時期尚早ではないでしょうか? ベータですらないですし。

stack overflow にも質問がありましたが閉じられています。
https://stackoverflow.com/questions/33870344/bootstrap-v4-datepicker

日付と時間をわけるのもいいのではないでしょうか。

投稿2017/06/29 07:51

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問