2

Bootstrap DateTimePicker を大学のプロジェクトに含める必要がありますが、試してみましたが何も起こりませんでした。このドキュメントを使用して、次のことを行いました。

  • gem 'bootstrap-datetimepicker-rails'Gemfile に追加して実行bundle install
  • //= require bootstrap-datetimepickerに追加application.js

ウィーヴ:

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

LayOut(ここにエラーがありました):

<!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: 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><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>
4

2 に答える 2

0

bootstrap-datetimepicker-railsを使用する手順を見てみましょう

a. gemfilegem 'bootstrap-datetimepicker-rails'内に追加してから、bundle install を実行します。

b. この行をapp/assets/stylesheets/application.css.scssに追加します

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

c. この行を app/assets/javascripts/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-17T07:42:26.560 に答える
0

b. この行を app/assets/stylesheets/application.css.sass に追加します

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

そしてこの一番下に

@import "bootstrap-sprockets"
@import "bootstrap"
于 2014-10-30T17:33:18.253 に答える