单击时 Bootstrap DateTimePicker 不显示日历

Question

recently I tried to use Bootstrap DateTimePicker in my ASP.NET MVC project, and the calendar just wont show up. I believe I already put the Scripts and CSS in the right order.

Here is my CSS and Scripts :

 <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
 <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/moment.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
@RenderSection("Scripts", required: false)

And this is my View Page :

<div class="col-md-3">
   <div class="form-group">
       <label>Tanggal Survey </label>                          
          <div class='input-group date' id='datetimepicker1'>
               <input type='text' class="form-control" />
                  <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                  </span>                      
               </div>
              </div>
           </div>

@section Scripts{
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker({
                format: 'DD MMMM YYYY'
            });
        });

    </script>
}

And when I click the input, it just show the date and never show the pop-up calendar , here is the example

Answer 1

Check the examples here: minimum setup

For your datepicked to open with clicking on the input you need to remove the glyph and go with the minimum setup.

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <input type='text' class="form-control" id='datetimepicker4' />
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker();
            });
        </script>
    </div>
</div>

Otherwise you can do this:

$(function() {
  $('.datetimepicker').datetimepicker();

  $('.datetimepicker-addon').on('click', function() {
    $(this).prev('input.datetimepicker').data('DateTimePicker').toggle();
  });
});