The Bootstrap DateTime Picker is not displaying correctly; it appears to be hidden behind the screen

Need assistance with displaying the full datetime picker on the screen. I attempted using position:relative but it's not working as expected. Can someone please help me with this issue? HTML code :

<div style="position:relative">
<div class="input-group date form_startdatetime" data-date-format="dd M yyyy - HH:ii P" data-link-field="dtp_startdate">
     <input class="form-control" size="16" type="text" name="sDateTime" tabindex="7">
</div>
</div>
<script type="text/javascript" src="./datetimepicker3/jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./datetimepicker3/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./datetimepicker3/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript">
$('.form_startdatetime').datetimepicker({
    //language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1

});
</script>

Take a look at the image of the output.. https://i.sstatic.net/Ay3K2.png

Answer №1

After reviewing your feedback, it appears that the documentation covers this topic.

Placement Selector

String. Default: 'bottom-right' (alternatively: 'bottom-left')

At present, this feature is exclusively accessible within the component implementation. It enables you to position the selector directly below the input field.

For a clearer understanding of Placement, I have provided a sample example below.

<div class="input-append date form_datetime">
    <input size="16" type="text" value="" readonly>
    <span class="add-on"><i class="icon-th"></i></span>
</div>
 
<script type="text/javascript">
    $(".form_datetime").datetimepicker({
        format: "dd MM yyyy - hh:ii",
        autoclose: true,
        todayBtn: true,
        pickerPosition: "bottom-left"
    });
</script> 

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

JavaScript's Array.map function failing to return a value

Here is a snippet of code from an api endpoint in nextJS that retrieves the corresponding authors for a given array of posts. Each post in the array contains an "authorId" key. The initial approach did not yield the expected results: const users = posts.ma ...

Transitioning JS/CSS effects when the window is inactive

My latest project involved creating a small slider using JavaScript to set classes every X seconds, with animation done through CSS Transition. However, I noticed that when the window is inactive (such as if you switch to another tab) and then return, the ...

Tips for resetting/removing a Chart.js canvas in a React JSX element

I have encountered an issue with chart.js while working on a specific report. Whenever I switch pages to another page that includes chartjs elements and then switch back, the chart displays data labels on the data points like "x: number, y: number". Afte ...

What are some tips for incorporating Fade effects into Bootstrap Datepicker?

I am currently implementing the Bootstrap Datepicker within a Symfony application. I desire to incorporate a fadeIn and fadeOut effect when the Datepicker is opened and closed. Since there is no specific documentation on this feature provided by the librar ...

The addition of a slash between the hashtag and the anchor name by Fullpage.js is causing conflicts with ng-include

My experience with using fullpage.js on a simple site alongside angular directives has been met with an issue. When including a .phtml file, the anchor functionality of fullpage.js stops working as it adds a slash before and after the anchor name. UPDATE ...

Dynamic HTML Table with Ajax Click Event Trigger

I have implemented an HTML table that refreshes automatically every 5 seconds and contains some buttons. The issue I am facing is that the event only triggers before the initial refresh. <?php require_once ('UserTableHtm ...

Switching between Custom tooltips and default tooltips in Chart.js and Angular

I need to show a tooltip based on certain conditions options: { tooltips: if (tooltipCondition === true) { { mode: 'index', position: 'nearest' } } else { { enabled: false, custom: function (tooltipMo ...

Challenge with the submission event listener

I am struggling to create my first event listener for the submit button that should respond to both a click and an enter key press. Currently, it is not working for either event, and I am unsure why. I do not intend to send any data to another page; I simp ...

AngularJS powered edit button for Laravel route parameter

I have a data list that needs to be edited using an edit button. When clicking the edit button, I need to send the ID to a Laravel controller in order to fetch the corresponding data. The initial listing was created using Angular JS. <a class="btn" hr ...

Next.JS - What is the reason behind data fetching occurring on both the server and client side?

When I call a regular fetch function in the index.js component and then log the response to the console, something unexpected happens. Despite the fetch being inside the component function, the response is also logged on the server side: it shows up in the ...

JavaScript and jQuery syntax are essential for web development. Understanding how

I've been searching everywhere but couldn't find syntax similar to this: var mz = jQuery.noConflict(); mz('#zoom01, .cloud-zoom-gallery').CloudZoom(); This basically means: jQuery.noConflict()('#zoom01, .cloud-zoom-gallery') ...

A guide on converting array values to objects in AngularJS HTML

Here is my collection of objects: MyCart = { cartID: "cart101", listProducts : [ {pid:101, pname:"apple", price: 200, qty:3}, {pid:102, pname:"banana", price: 100, qty:12} ] } I have incorporated a form in ...

How to verify for an empty array within a condition in JavaScript

I can't figure out why my conditional statement to handle the edge case of an empty input array is not working as expected. When I test it with my current example, it returns NaN (no clue why). However, if I change the conditional to if (array.length ...

Can the tab button be used to move to the next field?

Is it possible to navigate to the next field by pressing the tab button? If so, how can we achieve this? Currently, I am utilizing Bootstrap classes col-md-6. Thank you! <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4. ...

Challenges with creating a contact form using bootstrap modal

I'm facing an issue with a bootstrap modal contact form. It works fine on all browsers except for iPad/Safari. Can anyone help me figure out what's wrong? On iPad, the modal is positioned to the right and down the page instead of in the cente ...

"What sets Angular.js, D3.js, and Node.js apart from each other and what similarities do they

Recently, I've been delving into the world of JavaScript frameworks and stumbled upon these well-known ones: Angular.js Node.js D3.js Despite my efforts to research on Google, I found limited comparisons between them. Can anyone shed some light on ...

Unlock the power of Odoo by learning how to seamlessly add custom field attributes without the need for modification

Currently, I am facing an issue with using my custom attribute for fields known as sf_group. The problem is that this attribute is not included in the field description retrieved via fields_get(). Is there a way to incorporate this custom attribute into th ...

Using jQuery to duplicate elements by copying and pasting

I am facing a scenario where I need to dynamically create and manipulate a div element in my web application. The process involves appending the newly created div to another container upon clicking a button, followed by triggering a series of functions on ...

Achieving Ajax Request Activation through Button Click in Bootstrap

I am currently working on a modal form using Bootstrap that allows users to customize a specific item before adding it to the cart. My issue is that the "Add to Cart" button does not trigger the Ajax request as intended. I have followed a modified version ...

Ways to update all URLs on a page with ajax functionality

My userscript is designed to modify the href of specific links on an IP-direct Google search page: // ==UserScript== // @name _Modify select Google search links // @include http://YOUR_SERVER.COM/YOUR_PATH/* // @include http://62.0.54.118/* // ==/Us ...