Expand the size of bootstrap-datepicker to fill the entire screen

I've implemented the plugin from https://github.com/uxsolutions/bootstrap-datepicker

Check out the JSFiddle demo: https://jsfiddle.net/j3b089gr/

In my example, I have the calendar displayed along with the HTML code:

<div class="row">
  <div class="col-5">first column</div>
  <div class="col-7">
    <input class="datepicker" data-date-format="dd/mm/yyyy">
  </div>
</div>

Additionally, here is the corresponding JavaScript:

$('#datepicker').datepicker();

Despite my efforts, I'm facing an issue where the calendar only appears within the col-7 section. How can I make the calendar display in full screen mode?

jquerycssbootstrap-4bootstrap-datepicker

Answer №1

Utilizing the data-api to create a datepicker in your fiddle is preventing the execution of the js code. ( documentation regarding data api

For most datepickers, all you need to do is set data-provide="datepicker" on the desired element for initialization, and it will be initialized lazily, following the true bootstrap style. )

Experiment with creating a datepicker using js and include the 'container' option, then feel free to apply custom styling to achieve a full-screen effect:

var widthPerDay = window.innerWidth / 7; 
var heightPerDay = window.innerHeight / 6;

$('.datepicker').datepicker({container:'body',orientation:'auto bottom'}).on('show',function(){ 
$('.dropdown-menu').addClass('overlay'); // adjust positioning of the datepicker, or handle it within this function
 $('.datepicker td').css( {"width":widthPerDay,"height":heightPerDay } ); // modify the size of day elements for resizable datepicker table.
  $('.datepicker th').css( {"width":widthPerDay,"height":heightPerDay } );
 
});
.dropdown-menu.overlay{
  left:0 !important; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-5">First Column</div>
    <div class="col-7">
        <input class="datepicker" data-date-format="dd/mm/yyyy">
    </div>
  </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

The ::before pseudo element is malfunctioning when used in the makeStyles function

I am currently utilizing the makeStyles function in React, but I seem to be facing an issue where the content within the ::before pseudo-element is not displaying. Strangely enough, when the content is an image it works fine, but text does not render. Jus ...

javascriptcssreactjsmaterial-uimakestyles

Deactivate a particular function key with the help of jQuery

Is there a way to disable the F8 key on a web page using jquery, plugins, or just javascript? Thank you in advance! :) blasteralfred ...

javascriptjqueryjquery-uijquery-pluginsjavascript-framework

Ensure alignment of gradients between two divs, even if their widths vary

Among my collection of 10 inline divs, each one boasts a unique width and color gradient. While the 45-degree lines are uniform across all the divs, is there a way to ensure that these gradients match seamlessly? I've shared my CSS code snippet below ...

htmlcssgradientrepeating-linear-gradient

IE8 is giving me a tough time with CSS3 + HTML5SHIV + CSS3PIE Border-radius; it works fine on IE7, 9, and

Working on a site at , which is constructed using: Twitter Bootstrap HTML5 + CSS3 HTML5SHIV CSS3PIE Problem: Border-radius styling for the navbar link when active is not functioning in IE8 despite using CSS3PIE. However, it works fine in IE7,9,10 (confi ...

csstwitter-bootstrapcss3piehtml5shiv

C# MVC - Enabling dynamic row addition in an HTML table with multiple fields consolidated into a single cell

Hello, I'm new to c# MVC and could use some guidance. Currently, I am utilizing an example from Matt Lunn (here) to dynamically add new items to a bound list within an HTML table. However, the issue is that all the new items are being added to the fir ...

c#jqueryhtmlasp.net-mvc

Tips for altering the scrolling rate of a container

I am trying to adjust the scroll speed of specific divs among a group of 5 divs. I came across a solution that changes the scroll speed for the entire document: http://jsfiddle.net/36dp03ur/ However, what I really need is a scenario like this: <div i ...

javascriptjqueryhtmlcss

Is there a way to prevent the window.status from appearing?

I currently have the following code snippet: <a class="button accessLink" id="loginLink" href="#" data-action="Login" data-dialog="access" data-disabled="false" data-entity="n/a" ...

javascriptjquerycsshtml

the iframe is not properly displaying the embedded responsive page

The primary webpage incorporates the responsive mobile page created with the JQUERY SUPERSLIDES plugin. The mobile page appears correctly when viewed directly on an iPhone using Safari. However, when it is embedded in an iframe, it does not display as expe ...

cssresponsive-design

Why can't I capture the text within this particular div using .text?

Trying to extract specific text from a website in Chrome's developer console. For example, here is the code snippet: <div class="someClass">This is some text!</div> Expected it to work with this command, but it returns 'undefined&a ...

javascriptjquery

Use jQuery to retrieve query string values and then locate elements that correspond to those values

Attempting to extract digit values from the query string using a regex. This will then be used to find elements in the DOM with a data-value attribute matching one of the regex results. Regex Remove allow=1 and paged=0 Select only value pairs with digi ...

jqueryregex

The functionality of JQuery's `.on("click"... is sporadically functioning

I have a code block that dynamically generates elements and includes event handling. However, the event handling sometimes works and other times it doesn't. I'm not sure how to debug this issue. Can someone help me figure out what might be causin ...

javascriptjquery

Why does getElementById work when getElementsByClassName doesn't?

I created a script with the purpose of hiding images one and two, while keeping image 3 visible and moving it into their place. The script functions correctly when using div Id's instead of div Classes. However, I prefer to use div classes for groupin ...

javascripthtmlcssfunctiongetelementsbyclassname

Using CSS within the HTML code is effective, however, linking to an external CSS file is not working

I require assistance. This situation is absolutely absurd. Currently, I am utilizing Komodo IDE version 7.1.2 and Firefox version 15.0.1. The HTML5 file that I created looks like this: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

csshtmlfirefoxstylesheet

What is the best way to position images and URLs in div elements using CSS?

Currently, I am on a journey to become a Front End Developer through Udacity. As part of my learning process, I have a project that needs to be submitted. Unfortunately, I encountered some issues that I couldn't resolve on my own. Specifically, I&apos ...

htmlcss

Discover the Optimal Approach to Implementing Callback Function with JSON Using Javascript and Jquery

I have a function that looks like this : <script> function sticky(json){something here} </script> Now, I would like to utilize Jquery to invoke this function and display its output within a specific div element with the ID of "stickid". H ...

jqueryhtml

A reliable cross-browser solution for CSS sticky positioning

I designed a layout with 1 header and 3 vertical panels. The challenge is to ensure that all the panels can expand or contract horizontally to fill up 100% of the page width collectively, while also taking up 100% of the vertical space below the header (wh ...

cssflexboxcss-positionsticky

Error with Display of ASCII Character 62 in Superfish Menu

Currently, I have implemented the Superfish menu on my website. In order to indicate sub-menus within my menus, I have opted to utilize the character entity code &#62;, which historically has represented ">". Oddly enough, while viewing my website ...

htmlcssinternet-explorer-8superfish

Use JavaScript to identify and color the intersecting area of two triangles that overlap on a webpage

I created two triangular divs using HTML and I am utilizing jQuery UI to enable them to be draggable. Now, my goal is to overlap these two triangles and change the color of the overlapping area to a different shade. Here is an example: https://i.sstatic. ...

javascriptjqueryhtmlcss

Is there a way to determine if an ajax call is currently in progress in JavaScript?

I developed a function that triggers an AJAX request to load more content as the user scrolls down. However, in order for it to function properly and not fire multiple times consecutively if the user continues scrolling before the previous request is comp ...

jqueryajax

Keeping Chart.JS Up to Date: Updating Only Fresh Data

When a button is pressed on my website, a Bootstrap modal containing a Chart.JS is called. The data for this chart is loaded via an Ajax call as shown below: function loadReports(data) { $.ajax({ type: "POST", url: "Default.aspx/getRep ...

javascriptjqueryajaxchart.js