Bootstrap 4 DateTimePicker不工作,未显示图标

k10s72fa 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(276)

我使用的是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>

宝石文件：

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";

我遇到了一个问题，页面上没有显示日期时间选择器的图标。

附件是截图供参考，有没有人可以指出这里的错误？
先谢谢你。

twitter-bootstrap

来源：https://stackoverflow.com/questions/50600985/bootstrap-4-datetimepicker-not-working-icons-not-showing

2条答案

按热度按时间

uxhixvfz1#

我已经更新了DateTimePicker的图标属性的默认设置，通过下面的代码，然后它对我来说是工作正常

$.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'
                }
            });

赞(0）回复(0）举报 2022-12-07

n3schb8v2#

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

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

最新版本（6 beta2）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 4 DateTimePicker不工作,未显示图标

2条答案

相关问题

热门标签

最新问答