Ruby Bootstrap DateTimePicker

Tall boY 发表于 Dev

smiaro

我必须将Bootstrap 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();
  });

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: [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>

曼迪普

让我们完成使用bootstrap-datetimepicker-rails的步骤

一个。gem 'bootstrap-datetimepicker-rails'在您的gemfile中添加，然后进行捆绑安装。

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 %>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-10

我来说两句

0条评论

登录后参与评论

上一篇：为什么仅在支持向量机中使用超平面？

来自分类Dev