如何在 /bootstrap 4.6 应用程序中正确显示 datetimepicker？答案

【问题标题】：How to show datetimepicker correctly in /bootstrap 4.6 app?如何在 /bootstrap 4.6 应用程序中正确显示 datetimepicker？
【发布时间】：2021-10-31 19:52:01
【问题描述】：

我想使用 jquery 3.4/bootstrap 4.6 将 datetimepicker 添加到我的 laravel 8 应用程序中，但添加 m

@section('headerscripts')
    <link rel="stylesheet" href="{{admin_assets}}/css/jquery.fancybox.min.css"/>
    <link rel="stylesheet" href="{{admin_assets}}/css/selectize.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />


    {{--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}

@stop


...

@section('footerscripts')

    <script src="{{admin_assets}}/js/jquery.fancybox.min.js"></script>
    <script src="{!!admin_assets!!}/js/pages/crud/forms/widgets/select2.js"></script>
    <script src="{!!admin_assets!!}/js/pages/crud/forms/editors/summernote.js"></script>

    <script src="{!!admin_assets!!}/js/pages/crud/forms/editors/AutoNumeric/AutoNumeric.js"></script>

    <script src="{{admin_assets}}/js/jquery.caret.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>

...

        $(document).ready(function () {

            $('#dob').datetimepicker();
...

                <div class="form-group">
                    <label for="user_id">
                        User <span class="text-danger">*</span>
                    </label>
                    <div class="input-group" id="dob">
                        <input type="text" class="form-control" placeholder="Date Of Birth">
                        <div class="input-group-addon">
                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                        </div>
                    </div>

但在表单上有 datetimepicker（浏览器控制台中没有任何错误）好像不支持图标：https://prnt.sc/1r10yxn

如果取消注释行

@section('headerscripts')
section
    {{--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}

datetimepicker 的所有图标都显示正常，但我的页面上有一些设计中断。我认为将 3.3.7/css/bootstrap.min.css 添加到我的引导程序 4.6 中以支持图标不是一个好主意。有没有办法正确修复？

也许有一些更适合我的应用的 datetimepicker 库？

谢谢！

【问题讨论】：

标签： laravel bootstrap-4 bootstrap-datetimepicker

【解决方案1】：

同时使用两个版本的 Bootstrap 是不明智的。某些 css 元素可能会更改或弃用，从而导致您的设计损坏。

我建议在here 使用daterangepicker

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input id="my-calendar" type="text" name="date">
<i class="fa fa-calendar" aria-hidden="true"></i> <!-- Using Font Awesome -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
     $('#my-calendar').daterangepicker({
         "singleDatePicker": true,
         "showDropdowns": true,
         locale: { format: 'DD/MM/YYYY' },
     });
</script>

【讨论】：