• 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
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
[Rails]to_travel は DateTime.now に対応してない
[Rails]RailsアプリにPassengerから環境変数を渡す
[Rails]Rails4 で datetimepicker を使う
[Vagrant] VM上のUbuntuから名前解決できない
[Rails]Passengerがgitからinstallしたgemを認識しない
[Rails][MessagePack] APIレスポンスとしてのMessagePack検証
[mongodb][couchbase] MongoDBとCouchbaseを比べてみました
[Rails][MySQL] RailsでMySQLを使う
[MySQL] MacにMySQLをインストール
[Rails] APサーバの比較検証(Puma, Unicorn, Passenger)
Tags
railsPassengermysqlRails,Ruby,bootstrapChefCouchbasedatetimepickerMessagePackMongoDBnginxPuma,RSpecrubyubuntuUnicorn,Vagrant
Comments rssrss
yoku0825 yoku0825: nkfの方が使いやすいですが、glibcに含まれているiconvの方が 確実にどの環境にも入っている... 06/11 07:03
Hiroaki Akanuma Hiroaki Akanuma: ご指摘ありがとうございます。「嗜好度は大きい値がより嗜好度が強いことを意味すればどのような値でもよい... 11/08 12:50
akr akr: 初めての推薦エンジンのところ 「属性データはどんなものでも可能。」 は preference val... 11/08 11:18
Services from s21g
YOMU Web小説リーダー
小説投稿サイトの公式ページを開き、WebView表示と読み上げ向け表示を切り替えて、移動中や作業中にもWeb小説の続きを聴きやすくするiPhoneアプリです。
補助探
公開されている補助金・助成金情報を集約し、条件に合う制度を探しやすくするサービスです。
jotter.me
個人開発者のためのホスティング一体型ノートサービス
ハンドミラー
iPhone向けの手鏡アプリ
ツイプロ(twpro)
Twitterプロフィールの高速検索エンジン