query: tag:datetimepicker
Rails4で入力フォームから日時を選択できるように datetimepicker を使ったのですがちゃんと動くまでに軽くはまったのでメモ。 [bootstrap3-datetimepicker-rails](https://github.com/TrevorS/bootstrap3-datetimepicker-rails) まずはGemfileに下記エントリを追加して bundle install ruby>> gem 'momentjs-rails' gem 'bootstrap3-datetimepicker-rails' <<-- moment と datetimepicker のJavaScriptファイルを読み込むための設定を追加します。 私は coffeescript を使っているので application.js.coffee に下記エントリ を追加します。 bootstrapの設定が入っていない場合はあわせて追加します。 js>> #= require bootstrap #= require moment #= require bootstrap-datetimepicker <<-- 続いてstylesheetの設定も追加します。 私の場合は scss を使っているので、application.css.scss に下記を追加。 ちなみに順番もこの通りじゃないとちゃんと動きません。 css>> @import "bootstrap-sprockets"; @import "bootstrap"; @import "bootstrap-datetimepicker"; <<-- ここまででひとまずの下準備は終了なので、実際にdatetimepickerを適用したい部分の作業をします。 今回の対象のView部分は下記のような感じです。 html>>
<%= f.text_field :start_datetime, value: @user.start_datetime, class: "form-control", id: "user_start_datetime" %>
<<-- f.text_field で出力される input タグに対して datetimepicker() メソッドを 実行します。 下記内容でcoffeescriptのファイルを別途作成して読み込みます。 js>> $ -> $('#user_start_datetime').datetimepicker() <<-- これで入力ボックスを選択した時に日時選択用のポップアップが表示されるようになります。 また、日付のフォーマットのデフォルトは MM/DD/YYYY hh:mm A/PM なので、日本の形式に変更します。 inputタグに data-date-format 属性で指定するのですが、rails の text_field タグでは追加の属性を指定できないため、先ほどのcoffeescriptを変更して動的に属性を追加します。 js>> $ -> date_format = {'data-date-format': 'YYYY/MM/DD HH:mm'} $('#user_start_datetime').attr(date_format) $('#user_start_datetime').datetimepicker() <<-- これで日付フォーマットが変更されます。 今回は一番シンプルな形で datetimepicker を使いましたが、オプションの指定で表示形式などは色々変更できますので、試してみてもらえると良いかと思います。 参考ページ [http://eonasdan.github.io/bootstrap-datetimepicker/](http://eonasdan.github.io/bootstrap-datetimepicker/)
posted by akanuma akanuma on Sat 22 Nov 2014 at 14:03 with 0 comments
Contents rssrss
Leading Smart TV App Development Companies | USA | 4 Way Technologies
Apple TV Developer | TVOS Development | USA | 4 Way Technologies
光ファイバーを二次元振動させて走査するAR用ディスプレイ
因果の取り違え
Value Transformer
Swift2's defer for CoffeeScript
mongodb-3.0からcreateIndexのdropDupsが無くなったらしい
mongodb-3.0以降のWiredTigerの設定を動的に変更する方法
一般楕円の高速生成アルゴリズムへの道標
farro mantecatoのレシピ
Tags
datetimepicker
Comments rssrss
https://businessrost.ru/bitrix/redirect.php?goto=http%3A%2F%2Feximha.ch%2Fblog%2Findex.php%3Fid%3Dz85yj914%26abuse%3D1636 https://businessrost.ru/bitrix/redirect.php?goto=http%3A%2F%2Feximha.ch%2Fblog%2Findex.php%3Fid%3Dz85yj914%26abuse%3D1636: I have to thank you for the efforts you have put ... 04/26 06:43
http://ldm.sakura.ne.jp/balu+bbbs/album/album.cgi?mode=detail&no=210 http://ldm.sakura.ne.jp/balu+bbbs/album/album.cgi?mode=detail&no=210: Aw, this was an incredibly good post. Taking the t... 04/25 18:19
https://www.bigbeargum.com/2019/02/15/ambrose-redmoon/ https://www.bigbeargum.com/2019/02/15/ambrose-redmoon/: Hello would you mind letting me know which hosting... 04/25 17:39
http://zeroken.jp/1978td/album/album.cgi?mode=detail&no=20 http://zeroken.jp/1978td/album/album.cgi?mode=detail&no=20: Asking questions are genuinely fastidious thing if... 04/25 17:26
https://natucci-estetica.com/?attachment_id=1376 https://natucci-estetica.com/?attachment_id=1376: Hello there, You have done a fantastic job. I wi... 04/25 17:05
https://www.waimaoz.com/23019.html?unapproved=5151&moderation-hash=a14b2a811444fc3059edb7c1441d076e https://www.waimaoz.com/23019.html?unapproved=5151&moderation-hash=a14b2a811444fc3059edb7c1441d076e: Good day! Do you use Twitter? I'd like to follow y... 04/25 16:50
https://bysystem.ru/process-proizvodstva-kartonnyh-korobok-i/ https://bysystem.ru/process-proizvodstva-kartonnyh-korobok-i/: Требовалось производство картонных коробок в сжа... 04/25 15:33
https://marialionsa.ru/proizvodstvo-kartonnyh-korobok-i-upakovki/ https://marialionsa.ru/proizvodstvo-kartonnyh-korobok-i-upakovki/: Документооборот четкий, все закрывающие акты предо... 04/25 15:05