Question

我在Rails 5.2.0上。我正在使用以下代码实现bootstrap datetimepicker：

  <div class="form-group">
    <div class='input-group date' id='datetimepicker1' data-target-input='nearest'>
      <input type='text' class="form-control datetimepicker-input" data-target="#datetimepicker1" name="params['start_time']" />
      <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
      </div>
    </div>
  </div>

的Gemfile：

gem 'momentjs-rails', '~> 2.20', '>= 2.20.1'
gem 'bootstrap', '~> 4.1.1'
gem 'bootstrap4-datetime-picker-rails'
gem 'jquery-rails'

的application.js

//= require jquery3
//= require jquery_ujs
//= require turbolinks
//= require popper
//= require moment
//= require bootstrap
//= require tempusdominus-bootstrap-4.js
//= require_tree .

application.scss

@import "bootstrap";
@import "tempusdominus-bootstrap-4.css";

我正在遇到一个问题，即datetimepicker的页面上没有显示任何图标。

附件是截图供参考。任何人都可以在这里指出任何错误吗？

提前致谢。

Answer 1

我已经通过以下代码更新了DateTimePicker图标prop的默认设置，对我来说一切正常

$.extend(true, $.fn.datetimepicker.defaults, {
                icons: {
                    time: 'far fa-clock',
                    date: 'far fa-calendar',
                    up: 'fas fa-arrow-up',
                    down: 'fas fa-arrow-down',
                    previous: 'fas fa-chevron-left',
                    next: 'fas fa-chevron-right',
                    today: 'fas fa-calendar-check',
                    clear: 'far fa-trash-alt',
                    close: 'far fa-times-circle'
                }
            });

Answer 2

您必须包含Font-Awesome CSS，然后将其包含在HTML头标记中：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Bootstrap 4 DateTimePicker图标未显示

2 个答案: