CODEWITHSUNDEEP
asp.net-core-mvcbootstrap-5.net-8.0bootstrap-datetimepickerfont-awesome-4
Morshed
Morshed

Reputation: 225

Bootstrap5 datetime picker calendar does not appear when click calendar icon ASP.NET Core 8 MVC

I have an ASP.NET Core 8 MVC application and I implemented a bootstrap datetimepicker (v4.17.47) and it showed the calendar. I also used font-awesome (v 4.7.0). Everything worked as expected. But when I downloaded bootstrap-icons library. It stopped showing calendar when I clicked calendar icon. But when I clicked date text box it populated today's date automatically without showing calendar.

I also deleted the bootstrap-icons library but still does not show calendar. I could not figure out the root cause. I also used F12 in browser to investigate but there is not error.

I investigated that if I create a new application and implemented the datetime picker feature again then it works.

It does not show the calendar control after installed bootstrap-icon library.

I searched in google and spent time but could not figure out the issue.

The following technology used:

  1. ASP.NET Core 8.0 MVC
  2. jQuery -3.6.0
  3. Bootstrap -5.1.0
  4. Bootstrap-datetimepicker -4.17.47
  5. font-awesome -4.7.0
  6. moment.js - 2.30.1
  7. bootstrap-icons - latest

If anyone give me some hints, suggestions, example or links that would be great. I am totally stuck.

Upvotes: 0

Views: 49

Answers (1)

Ruikai Feng
Ruikai Feng

Reputation: 11836

would the codes work on your side?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>


<div class="form-group">
    <div class="input-group date" id="datetimepicker">
        <input type="text" class="form-control" />
        <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
    </div>
</div>

<script>
        $('#datetimepicker').datetimepicker({

    });
</script>

Upvotes: 0

Related Questions