Encountering a problem with the date time picker drop down in Bootstrap 4 version 4.1.1

Is there anyone who can resolve the dropdown issue in Bootstrap's latest version (v4.1.1)? Alternatively, could you recommend a reliable date time picker that works well with the latest version of Bootstrap?

Check out this Codepen Link

 <section class="jumbotron text-center ">
    <form>
        <div class="form-row justify-content-md-center">

            <div class="form-group col-md-6">
                <label for="inputEmail4">Bootstrap 4 (v4.1.1 ) Date Time Picker</label>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Suggested time for visit*" aria-label="Suggested time for visit*" aria-describedby="basic-addon2" id="datetimepicker1">
                    <div class="input-group-append input-group-addon">
                        <span class="input-group-text" id="basic-addon2"><i class="far fa-calendar-alt"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
jqueryhtmlcssbootstrap-4bootstrap-datetimepicker

Answer №1

Recently, I implemented a datepicker using the latest version of Bootstrap framework:

https://github.com/Eonasdan/bootstrap-datetimepicker

To customize the datepicker further, I appended this snippet to my JavaScript code:

$('#datetimepicker1').datetimepicker({
   format: 'DD/MM/YYYY',
});

If you're interested, check out the Jsfiddle where I showcased the functionality: https://jsfiddle.net/jrafo826/. For aesthetics, I made some minor style adjustments, but do note that you'd have to add your own glyphicon for additional features.

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

What is the best way to align background shapes within a specific section on a webpage using CSS?

I've been attempting to strategically place multiple shapes in the background using CSS, but I'm facing challenges. While I was successful with my hero section at the top of the page, positioning elements in a section halfway down has proven prob ...

htmlcss

Tips for JavaScript code to tally occurrences of a designated word within HTML content

I am trying to create a script that will count the occurrence of a specific word or phrase in an HTML body, such as within a paragraph. One unique feature I am looking for is the ability to count by matching with a variable - which represents a string rath ...

javascriptjqueryhtml

Troubleshooting: Why is my console.log not working in JavaScript

Recently, I've been diving into the world of JavaScript, but for some reason, I can't seem to make console.log function properly. At the top of my HTML document in the head section, I added jQuery like this: <script type="text/javascript" sr ...

javascriptjqueryconsole

Minimize or conceal iframe

This iframe contains a Google form that cannot be edited. I am looking for a way to close or hide this iframe, either through a button, a popup window button, or without any button at all. The $gLink variable holds the Google form link through a PHP sessio ...

javascriptphphtmliframe

What is the best way to rearrange images within a grid container?

I apologize for asking numerous questions, but could someone please guide me on how to position an image slightly to the right of center or just 1 inch to the left of center? http://jsfiddle.net/96d7udd7/ Below is the HTML code snippet: <figure class ...

htmlcssimagealignment

Interactive jQuery Dropdown Menu with Multiple Divs

I have been working on this and I'm almost there, but the jQuery part is driving me crazy (I'm not very proficient in it yet, but I am learning). Here's the link to the fiddle: http://jsfiddle.net/5CRA5/4/ Since I can't demonstrate th ...

jquerycss

I'm having trouble with PHP not processing my Ajax post. Despite no errors being shown, the file is

There seems to be an issue with posting data to a PHP file through Ajax. I have done this before without any problems, but for some reason it's not working this time. The PHP file is not reading or echoing back any of the posted data. Strangely, the P ...

phpjqueryajax

Determining whether a mouse click occurred in the left or right side of a DIV element

Is there a way to determine whether a mouse click occurred on the left or right side of a div element? I'm curious about calculating this: $("div").click(function(e){ // code to calculate left or right half }); <div>Content that can change&l ...

javascriptjqueryhtml

After minimizing the window, the jQuery slider animation sped up significantly

I am currently using a coda slider on my website, but I have encountered an issue where the content slider plays too fast after the window is minimized. I believe this may be related to the use of SetTimeout, but I have not been able to find a perfect so ...

javascriptjqueryanimationtimeoutslider

What is the equivalent in AngularJS to triggering a form submission event like jQuery's $("#formID").submit()?

After the completion of a form with various fields, I require the user to either register or login in a modal window before submitting the form. The process involves opening a modal window with a login form when a user attempts to submit the main form. On ...

javascriptjqueryangularjs

Is it true that in IE7 and IE8 standards mode, "320 and up" reverts back to

I am currently navigating the 320 and up template for the first time, testing a website shell on ie9 while using developer tools to check compatibility with ie8 & 7 in standards mode. This site incorporates boilerplate html5 and wordpress. Despite my ...

csshtmlboilerplatehtml5boilerplate

Tips for passing multiple values to jQuery.Ajax success function

I've been attempting to pass multiple values back to jqueryAjax success, but I haven't been successful so far. Here is what I've tried... String emp = request.getParameter("ID"); ArrayList<String> al = new ArrayList(); al=ur. ...

jquery

A guide on displaying data dynamically in Laravel with jQuery without the need for a page refresh

I am eager to fetch data from the database without having to reload the page. Currently, I am utilizing Laravel for this task and have been able to successfully retrieve the data using jQuery. Below is a snippet of my jQuery code: function fetchData() { ...

jquerylaravel

Enabling or Disabling Inputs in Angular

I'm looking to customize my form behavior in a specific way - when I click on the modify button, I want only one line to be modified instead of all three. How can I achieve this? Images : edit save app.component.html : <table mat-table [dataSourc ...

htmlangulartypescriptinput

Link with javascript onClick attribute

Is there a way to combine a JavaScript "onClick" event with an HTML "a href" link? I would like for the first step to be triggered upon clicking the link using "onClick", and if that is successful, the user should then be redirected to another page using t ...

javascripthtmlonclickhyperlinkajax-request

Methods to prevent ExtentReports from transforming HTML references in your Selenium logs into real HTML code

Having an issue with ExtentReports 4 for .Net and HTML V3 reporter. Whenever a test fails, the failure message is displayed in the report. However, if the failure message contains an HTML tag, it gets converted to actual HTML on the report, causing layout ...

htmlseleniumnunitextentreports

emphasize area when file is being uploaded

In my "panel-body" section, I have the capability to drop a csv file and input some data into fields. Here is the code in the ejs file: <div class="panel-body"> <div id="fileUpload">click to upload file</div> </div> In the ...

javascriptjquerytwitter-bootstrap

How can we convert a group of HTML elements sharing a common attribute into an array containing their respective values?

Consider the following HTML structure: <span class="L5" letters="a"></span> <span class="L5" letters="b"></span> <span class="L5" letters="c"></span> <span class="L5" letters="d"></span> <span class="L5" ...

javascriptjquery

A function with a specific name defined as a parameter is unable to be accessed outside of that function

Using named function as a parameter in JavaScript, unable to access outside of the function It's important to note that arguments.callee() is forbidden in strict mode according to the 5th edition of ECMAScript. MDN Warning Instead of using callee, ...

javascriptjqueryfunctionscopeclosures

What is the best way to show my results in a single line?

$(document).ready(function() { $("#submitForecast").click(function() { return getForecast(); }); }); function getForecast() { var city = $("#city").val(); var days = $("#days").val(); if (city != '' && days != '' ...

javascripthtmlcssajaxapi