我如何在输入类型上激活日期选择器=日期我使用Laravel＆amp; JavaScript？

Question

我将Laravel 9与Bootstrap 5一起使用，

我有以下输入：

​当前，当我单击日期输入日期时，datepicker会弹出，但当我选中输入时却没有。

这是我的一些HTML代码：

                {{-- Name --}}
                <div class="input-group mb-4">
                    <input wire:model="addName" class="form-control border-0 fs-14" placeholder="Name" aria-label="Name" type="text" name="name" required autofocus>
                </div>
                {{-- Surname --}}
                <div class="input-group mb-4">
                    <input wire:model="addSurname" class="form-control border-0 fs-14" placeholder="Surname" aria-label="Surname" type="text" name="surname" required>
                </div>
                {{-- Date of Birth --}}
                <div class="input-group mb-4">
                    <input id="DOB" wire:model="dateOfBirth" class="form-control border-0 fs-14" placeholder="Date of Birth" aria-label="Date" aria-describedby="email-icon" type="text" max="9999-12-31" onfocus="(this.type='date')" onblur="(this.type='text')" name="date_of_birth" required>
                </div>
                {{-- Email --}}
                <div class="input-group mb-4">
                    <input wire:model="addEmail" class="form-control border-0 fs-14" placeholder="Email" aria-label="Email" type="email" name="email" required>
                </div>
                @if ($this->userExistsAlready === true)
                    <span class="ms-1 ps-2 mb-3 fs-13 fw-600 text-danger">Email already taken</span>
                @endif
                {{-- Instagram --}}
                <div class="input-group mb-4">
                    <input wire:model="addInstagram" class="form-control border-0 fs-14" placeholder="Instagram username" aria-label="Instagram" type="text" name="number" required>
                </div>

这是我尝试过的JavaScript：

<script>
    $('#DOB').on('keydown', function(evt) {
        if (evt.key === 'Tab' || evt.key === 'Enter') {
            $('#DOB').click();
         }
    });
</script>

但是点击事件无能为力。

我还尝试了以下JavaScript：

<script>
    $('#DOB').on('keydown', function(evt) {
        if (evt.key === 'Tab' || evt.key === 'Enter') {
            $('#DOB').datepicker({
                startDate: "01/01/1900",
                endDate: "01/01/2100",
                format: "yyyy-mm-dd",
                autoclose: true,
                todayHighlight: true
            });
        //     $('#DOB').datepicker('show');
        //     console.log('Hit');
         }
    });
</script>

但是它说datePicker不是功能。

我还尝试了Bootstrap 5的以下JavaScript：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#datetimepicker').datetimepicker();
        });
    </script> 

但是它第二次添加了一个空盒子。

我在俯瞰小东西吗？