紅寶石引導的DateTimePicker

我必須包括引導的DateTimePicker我的大學項目，但我已經試過什麼都沒有發生。我用這個documentation，做：紅寶石引導的DateTimePicker

添加gem 'bootstrap-datetimepicker-rails'到Gemfile中，然後運行bundle install
添加//= require bootstrap-datetimepicker到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>

現在我看到在我的網站只輸入，沒有日曆按鈕，這讓我選的日期和時間。

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(); 
    });

佈局（在這裏是一個錯誤）：

<!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 &copy; 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>

來源

2014-06-17 smiaro

底部已經使用完全相同例子中給出的代碼，所以我不認爲有你的代碼有問題。捆綁後是否重新啓動服務器？ – Mandeep

更新問題與您的確切'application.js'想要看到具體到哪裏你添加引導 –

已更新 – smiaro

讓去通過使用bootstrap-datetimepicker-rails

一個的步驟。添加gem 'bootstrap-datetimepicker-rails'您的Gemfile內，然後做捆綁安裝。

b。該行添加到應用程序/資產/樣式表/ application.css.scss

@import 'bootstrap'; 
@import 'bootstrap-datetimepicker';

℃。這條線添加到應用程序/資產/ Java腳本/ application.js中

//= require bootstrap-datetimepicker

d。如何使用您的窗體中或任何你想要的使用方法：通過在此輸入字段

<input type="text" data-behaviour='datepicker' >

，然後調用JS：

添加輸入字段，以顯示您的日曆中在你的application.js的底部添加以下代碼

$(document).on("click","[data-behaviour~=datepicker]",function(){ 
    $(this).datetimepicker(); 
    });

編輯

按照討論您還沒有您的佈局文件中的JavaScript代碼。您需要加入解決方案

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

來源

2014-06-17 07:42:26 Mandeep

我不明白如何在輸入上調用js，我在上面添加了這個腳本並doeasn't工作 – smiaro

@ user3742883更新我的答案與js代碼也爲了納入turbolinks（如果您使用rails 4） – Mandeep

仍然沒有東西彈出後點擊文本字段:( – smiaro

b。該行添加到應用程序/資產/樣式表/ application.css.sass

... 
*= require bootstrap-datetimepicker 
*= require_tree .

，並在此

@import "bootstrap-sprockets" 
@import "bootstrap"

來源

2014-10-30 17:33:18

紅寶石引導的DateTimePicker

回答

相關問題