datetimepicker with bootstrap 5 not working properly

Question

I am quite new to JS and trying to add datetimepicker to my web-demo. The tutorial works properly with bootstrap 3.3.7, but when I change it to version 5, the calendar is not showing anymore.

Minimal working html is the following

<!-- this works OK -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- this does not! -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

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

<script>
  $(".date").datetimepicker({locale: "ru"});
</script>

I use [email protected] in the project and don't want to change it because of one datetimepicker. I've already tried many variants, but none worked. How can I get it to work?

As https://stackoverflow.com/a/68683409/8900030 stated, https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js is for Bootstrap 3, not Bootstrap 5.

What version should I use instead? (and how do I know that?)

Also note that I need {locale: "ru"} parameter, which is not available at bootsrap 3 AFAIK.

Answer 1

The successor is here: https://getdatepicker.com/

It no longer requires Bootstrap, jQuery or Moment. Checkout the installation documentation https://getdatepicker.com/6/installing.html here.

Answer 2

You can use plain html to get a date and time pick this seems to work well for me

<input type="datetime-local">

Answer 3

DateTimePicker requires some changes to bootstrap-datetimepicker.min.js to work properly with Bootstrap version 5.

Open the bootstrap-datetimepicker.min.js file, search the "in" class and replace it with the "show" class.

If you are using 'input-group-text' instead of 'input-group-addon' class with 'input-group' in bootstrap version 5 then change this class also in bootstrap-datetimepicker.min.js.

Replace "In" Class with "Show"

Replace 'input-group-addon' with 'input-group-text'

<div class="input-group date">
  <input type="text" class="form-control"/>
  <div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>