datetimepicker in bootstrap 5 experiencing issues

Recently, I delved into the world of JS and attempted to implement a datetimepicker in my web-demo. Everything was running smoothly with bootstrap 3.3.7, but as soon as I upgraded to version 5, the calendar disappeared.

Below is the minimal working html code:

<!-- this works perfectly fine -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- this doesn't work! -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b883f6edf2edf0">[email protected]</a>/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 am reliant on 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b1aab5aab7">[email protected]</a>
for the project and changing it just for one datetimepicker is not an option for me. Despite trying multiple approaches, none seem to be working. Any suggestions on how to make it functional?

According to , 

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js
is not compatible with Bootstrap 5 and is meant for Bootstrap 3.

Which version should I use instead? (and how can I determine that?)

It is worth noting that I require the {locale: "ru"} parameter, which I believe is unavailable in Bootstrap 3.

javascriptbootstrap-5bootstrap-datetimepicker

Answer №1

If you're looking to include a date and time picker in your website, using plain HTML can be a simple and effective solution. The code snippet below shows how you can achieve this:

<input type="datetime-local">

Answer №2

The new version has arrived:

Now without the need for Bootstrap, jQuery, or Moment. Take a look at the setup guide here.

Answer №3

To ensure compatibility with Bootstrap version 5, some adjustments need to be made to the bootstrap-datetimepicker.min.js file for DateTimePicker.

When working with the file, locate the "in" class and switch it to the "show" class.

If you are utilizing 'input-group-text' rather than 'input-group-addon' class in conjunction with 'input-group' in bootstrap version 5, make sure to update this class in bootstrap-datetimepicker.min.js as well.

Substitute the "In" Class with "Show"

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging HTTP/2 in conjunction with angularJS

As I was exploring ways to improve the performance of my web application, I came across HTTP/2. After learning about its features that can enhance website speed, I decided to implement it. Upon upgrading my browser to the latest version to enable HTTP/2 s ...

javascriptangularjshttp2web-performance

Seeking out the correct method for structuring loops and callbacks within nodejs with an emphasis on asynchronous operations

I've been researching multiple posts and articles on this topic, but I'm still struggling to grasp it. In my Mongoose model, there's a piece of code dedicated to inviting people to a project. When given a list of invitees, the code checks i ...

javascriptnode.jsasynchronouscallbackmongoose

What could be causing BeautifulSoup to overlook certain elements on the page?

For practice, I am in the process of developing an Instagram web scraper. To handle dynamic webpages, I have opted to utilize Selenium. The webpage is loaded using: driver.execute_script("return document.documentElement.outerHTML") (Using this javascript ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

The ApexChart Candlestick remains static and does not refresh with every change in state

I am currently working on a Chart component that retrieves chart data from two different sources. The first source provides historic candlestick data every minute, while the second one offers real-time data of the current candlestick. Both these sources up ...

javascriptreactjsapexcharts

The cloud function in Firebase was unable to connect to the dialogflow route

I am currently working on creating a chatbot using Dialogflow integrated with OpenAI in Firebase Cloud Function. However, I am facing an issue where I cannot access the /dialogflow endpoint and keep receiving the error message: "Cannot GET /dialogflow". My ...

javascriptfirebaseexpressgoogle-cloud-functionsopenai-api

I noticed that the node_modules folder has mysteriously vanished from my

When I tried running npm install in the terminal of VS Code. PS D:\work\backEnd> npm install npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an older version of npm, npm WARN old lockfile so ...

javascriptnode.jsnpmbackend

Configuring vue-jest: Does anyone know how to set up aliases for template/script src attributes in Vue?

Dependencies: "@vue/cli-plugin-unit-jest": "^4.5.13", "@vue/test-utils": "^1.2.1", "vue-jest": "^3.0.7" I am dealing with an application that utilizes an alias (referred to as "foo") de ...

javascriptvue.jsvuejs2jestjsvue-jest

The jQuery function throws an Error that is not caught by the surrounding try / catch block

Recently, I've been enhancing error handling in my JavaScript objects that heavily utilize jQuery. However, I've run into an issue where throwing a new Error from within a jQuery method is not caught by the surrounding catch statement. Instead, i ...

javascriptjqueryerror-handlingjavascript-objects

span element causing border-spacing problem

Is there a way to adjust the spacing between these borders? I've tried using border-spacing but it doesn't seem to be working. https://i.sstatic.net/ZY05g.png {{#each spacing}} <span class='space'> {{business}} ({{Count}}) < ...

javascripthtmlcsshandlebars.js

The page is constantly updating on its own

In my React app, the App component checks for a token in local storage upon loading. If a token is found, it is verified. If the token is valid, the user is directed to the dashboard; otherwise, they are taken to the login page. The issue I am facing is ...

javascriptreactjsreduxwindow.location

What is the best way to begin IMA HTML5 SDK ads with sound off?

One challenge I encountered was getting autoplay video to work on iOS 10 using HTML5. To achieve this, I utilized the following code: <video autoplay loop muted playsinline controls> <source src="http://distribution.bbb3d.renderfarming.net/vi ...

javascriptioshtmlimasdk

Breaking down classes and cross-referencing them with a different DIV using JQuery

Trying to create a variable named relatedBoxes that will store checkboxes sharing similar classes as the box div. To do this, I am splitting up the classes and storing them in a variable called splitClass. Now, all that's left is to find out if any o ...

javascriptjqueryclassjquery-selectors

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular

Automatic placement of the cursor at the left end of the username field in the registration form is required

Hey there! I'm looking to customize the registration form on my WordPress website so that when a user clicks on any field, such as the username field, the cursor automatically moves to the left end of that field and the keyboard switches to ENG-US. ...

javascriptjquerywordpress

What is the purpose of using square brackets in the angular.module() function in AngularJS?

const myapp=angular.module('myApp',[]); As someone venturing into the realm of angularjs, I have a question. What is the significance of using [] in angular.module()? If anyone could shed some light on this, it would be greatly appreciated. ...

javascriptjqueryangularjs

Is there an issue with the precedence of jison rules?

I've been stuck for hours trying to solve what seems like a simple problem but I just can't figure it out :/ I'm working on defining a small javascript-like language in jison. The issue I'm facing is that both the Parameter rule and th ...

javascriptgrammaroperator-precedencejison

Implementing the ui-tinymce Directive Within a Different Directive

I am attempting to implement the ui-tinymce directive within another directive: angular.module("risevision.widget.common.font-setting", ["ui.tinymce"]) .directive("fontSetting", ["$templateCache", function ($templateCache) { return { restrict: ...

javascriptangularjstinymce

Requesting Access-Control-Request-Headers using jQuery Ajax POST method

I am attempting to send an AJAX request to my server. Initially, I referenced a library (in the web) within a <script> tag in my HTML document and executed it using the following code: $.ajax({ url: api_url + "movie/create", type : "POST", con ...

javascriptjqueryajax

Tips for integrating Google Analytics with React

In my react application, I have various pages: Main Service Contact Profile (private) etc.. To monitor user activity using Google Analytics, I came across the react-ga library which serves the purpose well. However, I find myself having to initialize G ...

javascriptreactjsgoogle-analyticsreact-ga

In situations where there may be a duplicate, what alternative can I utilize in place of the id attribute?

I understand that almost any element in the DOM can have an "id" attribute, and I've used it to track each client in a table of clients. Although ids should not be repeated, my rows are assigned unique identifiers based on each person's "clientId ...

javascripthtml