How to show datetimepicker correctly in /bootstrap 4.6 app?

I want to add datetimepicker into my in my laravel 8 app with jquery 3.4/bootstrap 4.6 , but adding 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>

But having datetimepicker on form(without any errors in browser's console) it looks like icons are not supported : https://prnt.sc/1r10yxn

If to uncomment line in

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

all icons of datetimepicker are shown ok, but I have some design breaks on my page. I think that is a not goodidea to add 3.3.7/css/bootstrap.min.css into my bootstrap 4.6 for icons support. If there is a way to fix it correctly?

Maybe are some some bettre datetimepicker libraries for my app?

Thanks!

It's not wise to use both version of Bootstrap. Some css elements may be changed or deprecated that cause your design broken.

I suggest using daterangepicker at here

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