如何在HTML页面中放置datetimepicker？

Question

I have all of these files in my website header:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>
<script src="http://localhost:8080/Javascript/bootstrap.bundle.js" type="javascript/text"></script>
<link rel="stylesheet" href="http://localhost:8080/Css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js" type="javascript/text"></script>

Then I have the following in my body:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">

            <!-- Form code begins -->
            <form method="post">
                <div class="form-group"> <!-- Date input -->
                    <label class="control-label" for="date">Date</label>
                    <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
                </div>
                <div class="form-group"> <!-- Submit button -->
                    <button class="btn btn-primary " name="submit" type="submit">Submit</button>
                </div>
            </form>
            <!-- Form code ends --> 
        </div>
    </div>    
</div>

<script>
    $(document).ready(function(){
        $("#date").datepicker();
    });
</script>

I want it to look like this: https://formden.com/blog/date-picker .

But instead it looks like this:

What do I do? I have been trying for hours. I have tried different ordering of the files. When I try to do datetimepicker() . I get an error. I just do not know what to do please help.

Answer 1

It looks like you are Using JqueryUI as well as BootstrapDatepicker. Since bootstrapDatepicker and JqueryUI both has got the same function name for their datepicker to be initialized hence there is an ambiguity. Now your markup has got jqueryUI js loaded first so it is ideally using the jqueryUI datepicker function and expecting the CSS of jqueryUI which can be found here .

If you want to use the bootstrap datepicker then you might need to remove the jqueryUI.js or generate the jqueryUI js which is excluding the datepicker functionality.