I have to include Bootstrap DateTimePicker to my university project but I've tried and nothing happened. I used this documentation and did:
gem 'bootstrap-datetimepicker-rails' to Gemfile and run bundle install//= require bootstrap-datetimepicker to application.jsWiev:
<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><a href="#">ZOZ Student</a></h1>
<p>Twoja najblizsza i ulubiona przychodnia</p>
<p>Latwe zarzadzanie poprzez Internet!</p>
</div>
<div class="fl_right"><a href="#"><img src="/images/demo/banner.gif" alt="" /></a></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: [email protected]</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><a href="#">Panel zarzadzania dla lekarzy i pracownikow</a>
<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 - <a href="#">L15 Team</a></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 %>