Я хочу построить поле ввода даты и времени в рельсах с bootstrap4. Переключатель отображается, но не раскрывается, показывая только значок часов.
Я написал следующее:
<div class='input-group date'>
<span class="input-group-addon">
<span class="fas fa-clock fa-2x" style="color:#44B5EB"></span>
</span><%= f.text_field (:start), :class => "form-control", id: 'datetimepickerA' %>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepickerA').datetimepicker({
defaultDate: "<%= DateTime.now %>",
format: "YYYY-MM-DD HH:mm:ss"
});
});
</script>
И когда я нажимаю на часы, они расширяются, кратко показывают календарь, затем выключаются, чтобы оставить изображение, которое вы видите.

Кто-нибудь знает, что может вызвать это?
Что я заметил:
Когда указан формат даты -> календарь показывает и работает (без времени, конечно)
Когда указан формат даты и времени -> Календарь отображается согласно рисунку.
Когда формат не указан -> Календарь отображается согласно рисунку.
Следующий код работает отлично, но он полностью HTML
. Сейчас я хочу преобразовать его, чтобы добавить :start
атрибут:
<div class="form-group">
<div class="input-group date" id="datetimepicker8" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker8"/>
<div class="input-group-append" data-target="#datetimepicker8" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>