I don't understand why my charges stylesheet is not being picked up appropriately.
Any styling I do in charges.css.scss do not affect my view in any way.
application.css
*
*= require jquery.ui.datepicker
*= require_self
*= require bootstrap
*= require front
*= require lists
*= require tasks
*= require lightbox
*/
charges.css.scss
// Place all the styles related to the charges controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.row_form {
background-color: red;
}
new.html.erb
<div class="container row_form" style="width:990px;">
<div class="row">
<div class="span1 offset3">
<h2></h2>
<%= render '/charges/new' %>
</div>
</div>
</div>
Where _new is a popout payment form using stripe.js
Only inline styling is working and it doesn't pick up any bootsstrap classes either. What am I not understanding here? Also, I tried including *= require_tree . and *= require charges in the manifest to no avail.
UPDATED WITH HTML SOURCE
<html>
<head>
</head>
<body>
<div class="container row_form" style="width:990px;">
<div class="row">
<div class="span1 offset3">
<h2></h2>
<form accept-charset="UTF-8" action="/charges" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="dvlHeyYvCVfMox/UilOaNoPmT+eO3Z7PuMgE3kXpDPU=" /></div>
<article>
<label class="amount">
<span>Amount: $number</span>
</label>
</article>
<script src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
data-key="pk_test_3ZFJmvwy4tgn2XUPwUsL7mZQ"
data-description="Continued Full User Acess"
data-amount="integer">
</script>
</form>
</div>
</div>
</div>
</body>
check the followings
does you app runs on development mode ?
try rake assets:clean and re-start the sever
check your style sheet is updated (via the source of the html page)
hope one of this should get you going :)
Related
I am newbie with Rails and here is my problem
I created a rails program by this command
rails new freelancer -d=postgresql --javascript=webpack
And I had no problem
I wanted to use bulma extension in my rails program and I added these line to the gemfile
gem 'bulma-rails', '~> 0.9.4'
gem 'bulma-extensions-rails', '~> 1.0.30'
and these lines to the app -> assets -> stylesheets -> application.css
#import 'bulma';
#import 'bulma-extensions';
then I ran these commands
bundle install;
yarn add jquery;
and I had no error.
I created a rails page by this command
rails g controller pages home
and add the bulma code to the app -> views -> layouts -> application.html.erb file
Here is my application.html.erb file
<!DOCTYPE html>
<html>
<head>
<title>Freelancer</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<%= yield %>
</body>
</html>
I thought that my home page must be the design as here
https://bulma.io/documentation/components/navbar/
, but it liked this
my problem
I did not know why it became like this ? Could you please give me some advice for my problem ? Here is my code, if you need for reference
https://github.com/nguyencuc2586/freelancer01
Thank you in advance!
I cloned your repo locally and it seems that you're using SASS directives while the app is configured for CSS only.
I fixed the issue by replacing application.css content with:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*= require bulma
*= require bulma-extensions
*/
Here is the result:
I am new to rails development. I am creating one Rails app. In which I am using Bootstrap 4.0.0 beta. I have one navbar in particular div, (not on whole page). But problem is, dropdown is not working when I click on it. For that first I have to click on nav-brand first, then I can click on dropdown and it works. But it changes whole placings of navbar. and again if I click on nav-brand dropdown stops working.
I also tried putting it on whole page there is also same problem.
I have ruby-2.4.1, rails-5.1.3, bootstrap-4.0.0beta
Here is my /assets/stylesheets/application.css code
*= require bootstrap
And this is /assets/stylesheets/welcomeindex.css code
*= require bootstrap
*= require application
body, .jumbotron{
height: 100vh;
min-height: calc(100vh - 155px);
//overflow: hidden;
}
.jumbotron{
margin-bottom: 0px;
}
#media (max-width: 991px) {
.jumbotron{
height: 100%;
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #f5f5f5;
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
}
This application.js file:
//= require jquery
//= require jquery_ujs
//= require popper
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .
And this is welcomeindex.html.erb file:
<html>
<head>
<title> Fest Management </title>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'welcomeindex', media: 'all', 'data-turbolinks-track' => true %>
</head>
<body>
<div id="main-container" class="container-fluid">
<div class="row">
<div class="jumbotron col-lg-8 col-md-12">
</div>
<div class="jumbotron col-lg-4 col-md-12">
<nav class="navbar navbar-light bg-light">
<div class="navbar-header">
Brand
</div>
<div id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
</div>
</body>
</html>
So where am I missing? It would be great help.
EDIT
after solving the issue of dropdown click, I am getting the issue with CSS of navbar. when i expand dropdwon, rather than poping out of navabar area, it increases the height of navbar and shows whole list in it.
here is the edited index.html.erb file. Along with the edits suggested I have completely removed CSS references and still it giving the same problem for CSS.
<div id="main-container" class="container-fluid">
<div class="row">
<div class="jumbotron col-lg-8 col-md-12">
</div>
<div class="jumbotron col-lg-4 col-md-12">
<nav class="navbar navbar-light bg-light">
<div class="navbar-header">
Brand
</div>
<div id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="dropdown show">
<a data-toggle="dropdown" class="dropdown-toggle" href="#" id="CategoryDD" aria-haspopup="true" aria-expanded="false">Messages <b class="caret"></b></a>
<ul class="dropdown-menu" aria-labelledby="CategoryDD">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
</div>
Adding to application.js
//= require jquery-ui
right after
//= require jquery
worked for me like a charm.
Hopefully, this will solve someone's issue too.
You shouldn't add body and html tags in a view. You also shouldn't add
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
All of this is usually already defined in application.html.erb which is the "skeleton" of your views.
Regarding your issue:
According to the documentation, you're missing an id on the a tag.
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Try removing any custom classes you've added and simply use this snippet. Should work out of the box if you leave all their elements.
If it still doesn't work, try running this in your console:
$('.dropdown-toggle').dropdown()
And let us know if there is an error.
You have added bootstrap but not jquery. Since bootstrap depends on jquery you must also add it. Before Rails 5, jquery used to be default in Rails app but Rails team removed it after Rails 5. If you want to use it then you should add this gem to your Gemfile. Here is the link https://github.com/rails/jquery-rails
Same issue, but solved with this kind of doing...
Did you overwrite bootstrap CDN or install any kind of bootstrap things like example of:
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
If you're having this kind of in application.html.erb then kindly remove all kind of this...
and clear all cdn links and add again bootstap link
Thank you.
I am kind of new towards implementing rails with angular js.
What I want is I have a listing index page which gives me all the listings using
Listing.all
My page has several filters in it.Lets say I have a filter of gender, so what I needed is when that dropdown changes the page with listings in it should also get refreshed and now only show listings with the selected gender.
Here is what I have done:-
/application.js/
//= require jquery
//= require jquery_ujs
//= require semantic-ui
//= require dropzone
//= require cloudinary
//= require angular
//= require angular-resource
//= require app.js
//= require_tree ./angular
//= require_tree .
/ListingController(rails)/
def index
#listings=Listing.all
end
/index.html.erb/
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing.gender',class:'ui dropdown gender'})%>
<div class="ui divided items" ng-controller="ListingCtrl" ng-init="init( <%= #listings.to_json %> )" ng-repeat="listing in listings | filter:listing.gender">
<div class="item">
<div class="image">
<img src={{listing.photos.first.file_name.url}} class="header"/>
</div>
<div class="content">
<%=link_to '{{listing.title}}','{{listing}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
</span>
</div>
<div class="description">
<p>
<%='{{listing.love_for_pets}}'%>
</p>
</div>
<div class="extra">
<div class="ui teal tag label"><i class="rupee icon"></i><%='{{listing.price}}'%></div>
</div>
</div>
</div>
</div>
/angular/controllers/ListingController.js/
app.controller('ListingCtrl', ['$scope', '$resource', function($scope, $resource) {
$scope.init = (listings)
{
$scope.listings = angular.fromJson(listings)
}
}]);
/app.js/
var app = angular.module("PetForLife", ['ngResource'])
/Gemfile/
gem 'angularjs-rails'
The index page gets loaded but no listings are getting displayed,also no error on the console.
Can someone please help me with this?
So Finally after struggling and lot of google searches,I found the answer,so I am posting it here so that it can help someone.
Here are the changes required:-
<div class="ui page grid">
<div class="column">
<form class="ui form">
<div class="five fields">
<div class="field">
<label>Gender</label>
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing1.gender',class:'ui dropdown gender'})%>
</div>
<div class="field">
<label>Pet</label>
<%=select(:listing,:pet_type,options_for_select([['Dog','Dog',{class:'item'}],['Cat','Cat',{class:'item'}],['Bird','Bird',{class:'item'}]]),{prompt:'Pet'},{:'ng-model'=>'listing1.pet_type',class:'ui dropdown pet_type'})%>
</div>
<div class="field">
<label>Breed</label>
<%=select(:listing,:breed_type,options_for_select(Breed.all.collect{|x| [x.name,x.name,class:'item']}),{prompt:'Breed'},{:'ng-model'=>'listing1.breed_type',class:'ui search dropdown disabled breed_type'})%>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<!--div class="right floated field">
<label style="visibility:hidden;">Search</label>
<div class="ui left labeled icon button filter">
<i class="filter icon"></i>
Reset
</div>
</div-->
</div>
</form>
</div>
</div>
<div class="ui page grid tabmenu">
<div class="ui secondary pointing filter menu">
<!--a class="blue item" data-tab="saved">Saved</a-->
<a class="active green item" data-tab="all">All</a>
<a class="red item" data-tab="favorite">Favorite</a>
<a class="blue item" data-tab="user_listing">Your Listings</a>
</div>
</div>
<div class="ui divided items" ng-controller="ListingController" ng-init="init(<%=#listings.to_json %>)" >
<div class="item" ng-repeat="listing in listings | filter:{'gender':listing1.gender,'pet_type':listing1.pet_type,'breed_type':listing1.breed_type}:true">
<div class="image">
</div>
<div class="content listing_content">
<i class="right floated large like icon"></i>
<i class="right floated large star icon"></i>
<%=link_to '{{listing.title}}','{{listing.id}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
<%= #date = '{{listing.created_at}}' %>
</span>
</div>
<div class="description">
{{listing.love_for_pets}}
</div>
<div class="extra listing_price">
<div class="right floated ui circular facebook icon button">
<i class="facebook icon"></i>
</div>
<div class="right floated ui circular twitter icon button">
<i class="twitter icon"></i>
</div>
<div class="right floated ui circular google plus icon button">
<i class="google plus icon"></i>
</div>
<div class="ui teal tag label"><i class="rupee icon"></i>{{listing.price}}</div>
</div>
</div>
</div>
</div>
The only change required was creating a separate div for initialisation and a different div for ng-repeat.
Rest all remains the same.
Hope it will help someone.
I am not familiar with rails, but it appears you are trying to pass data to the view through some kind of render engine. Instead, you need to have angular fetch the data with an ajax call (or you could use websockets) and then pass it to the view with angular. You will need to load angular on the page you are using by attaching the ng-app="PetForLife" to the body tag (or html tag)
<html ng-app="PetForLife">
You attach your controller with the ng-controller attribute on the first div tag (or the body tag).
<body ng-controller="ListingCtrl">
You should look at this article, which goes over some different (good and bad) ways to pass data to angular from Ruby:
Pass Rails Data to Angular
Check the 4th method there. You can use an angular service to get the rails data, and then inject that data wherever you need to in your angular app.
I am using bootstrap datetimepicker version 3. Here datetimepicker de-faulty taking current date and time. But in next version this problem is resolved. So I will try to use Eonasdan bootstrap datetimepicker version v4. For that what are the js and css files I have include in my jsp page?
Check manual installation guide here.
You must include:
jQuery
Moment.js
Bootstrap + collapse + transitions
So the files needed would be:
bootstrap.min.js
bootstrap.min.css
moment-with-locales.js
bootstrap-datetimepicker.css
bootstrap-datetimepicker.js
Check this fiddle for a working example.
HTML:
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
</div>
JS:
$('#datetimepicker1').datetimepicker();
I have to include Bootstrap DateTimePicker to my university project but I've tried and nothing happened. I used this documentation and did:
added gem 'bootstrap-datetimepicker-rails' to Gemfile and run bundle install
added //= require bootstrap-datetimepicker to application.js
Wiev:
<div id="container">
<center>
<p>
<strong>First name:</strong>
<%= Doctor.find(session[:current_doctor_id2]).first_name%>
</p>
<p>
<strong>Last name:</strong>
<%= Doctor.find(session[:current_doctor_id]).last_name%>
</p>
<p>
<strong>Doctor spec:</strong>
<%= Doctor.find(session[:current_doctor_id]).spec%>
</p>
<input type="text" data-behaviour='datepicker' >
<%= submit_tag "Check", :name => nil %>
</center>
</div>
Now I see only input on my site, there is no calendar button which allow me to choose date and time.
application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-datepicker
//= require_tree .
$(document).on("click","[data-behaviour~=datepicker]",function(){
$(this).datepicker();
});
LayOut(Here was an error ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<%= favicon_link_tag 'favicon.ico' %>
<title>Student - Zaklad Opieki Zdrowotnej</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<%= stylesheet_link_tag 'application',media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
</head>
<body id="top">
<div class="wrapper">
<!-- ####################################################################################################### -->
<div id="header">
<div class="fl_left">
<h1>ZOZ Student</h1>
<p>Twoja najblizsza i ulubiona przychodnia</p>
<p>Latwe zarzadzanie poprzez Internet!</p>
</div>
<div class="fl_right"><img src="/images/demo/banner.gif" alt="" /></div>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<div id="topbar">
<div class="fl_left">
<p>Adres: Rzeszow, ul. Wincentego Pola 17/1</p>
<p>Tel: +48 175534322 | Mail: kontakt#zoz.pl</p>
</div>
<div id="topnav">
<ul>
<li><%= link_to 'O nas', welcome_index_path %></li>
<li><%= link_to 'Nasze poradnie oraz przychodnie', welcome_index2_path %></li>
<li>Panel zarzadzania dla lekarzy i pracownikow
<ul>
<%= render 'welcome/form' %>
</ul>
</li>
</ul>
</div>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<div id="container">
<%= yield %>
</div>
<!-- ####################################################################################################### -->
<div id="homecontent">
<ul>
<li>
<h2>System zarzadzania juz otwarty</h2>
<img class="imgl" src="/images/demo/x1.gif" alt="" />
<p>Dzieki internetowemu systemowi zarzadzania nasi lekarze w latwy sposob moga kontrolowowac, tworzyc i edytowac rejestracje, wizyty a co za tym idzie pacjenci poinformowani sa o wszystkim na biezaco droga elektroniczna. Ulatwi to z pewnoscia kontakt z pacjentami jak i usprawni funkcjonowanie calego systemu.<p>
</li>
<li>
<h2>Nowo otwarte przychodnie</h2>
<img class="imgl" src="/images/demo/x2.gif" alt="" />
<p>Jest nam bardzo milo poinformowac, ze nasz Zaklad Opieki Zdrowotnej podpisal umowe z trzema nowymi przychodniami. Co za tym idzie pacjenci moga skorzystac u nas z uslug wykwalifikowanych stomatologow, neurologow oraz psychologow.<p>
</li>
<li class="last">
<h2>Liczba pacjentow rosnie!</h2>
<img class="imgl" src="/images/demo/x3.gif" alt="" />
<p>Cieszymy sie, ze z naszych uslug korzysta coraz wiecej pacjentow. Swiadczy to o naszej profesjonalnej kadrze oraz wykwalifikowanych specjalistach. Wciaz staramy sie zwiekszyc zakres naszych uslug aby kazdy znalazl u nas to czego potrzebuje. Wkrotce otwarcie nowych przychodni!</p>
</li>
</ul>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<div id="imageline">
<ul>
<li><img src="/images/demo/1.gif" alt="" /></li>
<li><img src="/images/demo/2.gif" alt="" /></li>
<li><img src="/images/demo/3.gif" alt="" /></li>
<li><img src="/images/demo/4.gif" alt="" /></li>
<li class="last"><img src="/images/demo/5.gif" alt="" /></li>
</ul>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<!-- ####################################################################################################### -->
<div id="copyright">
<p class="fl_left">Copyright © 2014 - L15 Team</p>
<p class="fl_right">Strona przygotowana na potrzeby projektu</p>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<br class="clear" />
</div>
</body>
</html>
Lets go through the steps of using bootstrap-datetimepicker-rails
a. Add gem 'bootstrap-datetimepicker-rails' inside your gemfile and then do bundle install.
b. Add this line to app/assets/stylesheets/application.css.scss
#import 'bootstrap';
#import 'bootstrap-datetimepicker';
c. Add this line to app/assets/javascripts/application.js
//= require bootstrap-datetimepicker
d. How to use it inside your form or wherever you want to use:
Add an input field to show your calendar like:
<input type="text" data-behaviour='datepicker' >
and then call js on this input field by:
Add this code at the bottom of your application.js
$(document).on("click","[data-behaviour~=datepicker]",function(){
$(this).datetimepicker();
});
Edit
As per discussion you have not included javascript tag inside your layout file. You need to solve it by adding
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
b. Add this line to app/assets/stylesheets/application.css.sass
...
*= require bootstrap-datetimepicker
*= require_tree .
and at the bottom of this
#import "bootstrap-sprockets"
#import "bootstrap"