Selecting a range of two months in the datepicker

I am currently utilizing the bootstrap datepicker on my website and I have a specific requirement. I would like to be able to display two months in one input field, showing the current month and the following month.

Here are some examples of web pages that achieve this:

<input class="form-control date-picker-start" placeholder="Başlangıç Tarihi" type="text">

$('.date-picker-start').datepicker({
                format: 'dd.mm.yyyy',
                autoclose : true
            }).on('changeDate',function(e){
                //on change of date on start datepicker, set end datepicker's date
                $('.date-picker-end').datepicker('setStartDate',e.date)
            });

Is there a parameter in the bootstrap-datepicker plugin that would allow me to achieve this functionality?

jquerytwitter-bootstrapdatepicker

Answer №1

To achieve this, you can simply adjust the numberOfMonths parameter.

$('.date-picker-start').datepicker({
    format: 'dd.mm.yyyy',
    numberOfMonths: 3,
    autoclose : true
}).on('changeDate',function(e){
    //update end datepicker's date when start date is changed
    $('.date-picker-end').datepicker('setStartDate',e.date)
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input class="date-picker-start" data-provide="datepicker">

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

How can you determine the index of a table column in JavaScript when you only know its class name?

I am looking for a way to dynamically hide/show table columns based on their classes, without having to add classes to each individual <td> element. This should be accomplished using classes on the columns themselves. Here is a sample of the table ...

javascriptjqueryhtmlcss

I am struggling to get my jquery ajax request to successfully return an XML response

I am encountering an issue with a call: $.get("${pageContext.request.contextPath}/maze/View/${maze}", function(response){drawMaze(response);}); within a JSP file. This call triggers the following Java code: protected ...

javajqueryajaxxml

What is the best way to distinguish between relative blocks and convert them to absolute positioning?

What is the best way to locate relative blocks and convert them to absolute position while keeping them in the same place? Is this something that can be achieved using JavaScript or jQuery, or is it simply not possible? Thank you very much. ...

javascriptjqueryhtmlcssposition

Choose the number that is nearest to the options given in the list

I am faced with a challenge involving a list of numbers and an input form where users can enter any number, which I want to automatically convert to the closest number from my list. My list includes random numbers such as 1, 5, 10, 12, 19, 23, 100, 400, 9 ...

javascriptjqueryformsinputnumbers

Tips for preserving dynamically generated HTML through Javascript during page reload

I have a straightforward question, but I haven't been able to find a suitable answer. Here's my situation: On my HTML page, I have a form. Using jQuery and AJAX, I submit the form and then use some JavaScript code to change the content of a spec ...

javascriptjqueryhtmlajaxcodeigniter

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Lately, I've been facing a strange issue with using a checkbox that collapses a hidden div by utilizing bootstrap. When I include the attribute data-toggle="collapse" in the checkbox input section, the div collapses but it mandates every single one o ...

javascriptjqueryhtmlinputtwitter-bootstrap-3

Looking for a way to ensure a div reaches 100% height within a specified area without exceeding the boundaries of the body?

I am working with jQuery mobile and have specific requirements for my project: The main content will be a large graphic that needs to fill the entire page, with both horizontal and vertical scrolling if necessary. The header should remain fixed at the to ...

jquerycsshtmljquery-mobile

JavaScript Function Not Executed in Bottom Section

I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...

javascriptjqueryhtmlcssangularjs

Using jQuery and Modernizr for CSS3 and Javascript transitions support in Internet Explorer

Looking for a way to add support for button hover effects in IE 7-9 on this Codepen.io project. Can anyone help? For example, I'm trying: transition-duration: 0.5s; transition-property: all; transition-timing-function: ease; margin-top: 5px; I atte ...

jquerycsscss-transitionsmodernizr

Automatically sync textbox width with gridview dimensions

My goal is to dynamically resize a number of textboxes so that they match the width of my gridview's table headers. The gridview will always have the same number of columns, but their widths may vary. However, as shown in the image below, the width va ...

javascriptjqueryasp.netcssgridview

Achieve the effect of bringing the div and its contents to the top when hovered over, all while keeping

I have designed a popup that includes multiple boxes. I want the width of the box to expand and be visible over all content on the webpage when a user hovers over any ".deviceboxes". I tried using ".deviceboxes:hover" which worked fine for the first box in ...

jqueryhtmlcss

Improprove Google PageSpeed score - must resolve

My mobile website is loading incredibly slow, despite my attempts to improve the speed using Google PageSpeed insights. Unfortunately, I'm having trouble interpreting the screenshot and identifying what changes need to be made. Is there anyone who c ...

jqueryhtmlcsspagespeedgoogle-pagespeed

Changing the dataURL of jqGrid dynamically after loading the Edit Form

Currently, I am working with jqGrid version 4.15.6-pre, which is the free version of jqGrid. Within my edit form, I have two dropdown lists that are being populated from the server using setColProp in the onSelectRow function. My objective is to reload t ...

javascriptjavajqueryfree-jqgrid

Is there a way to retrieve JSON data for a specific category of an item?

I have some data that includes categories and items stored in JavaScript arrays: var category = [ {id:0, name : "category_1"} , {id:2, name : "category_2"}, ]; var items = [ {id:0, name : "a", category_id : 0} , {id:1, name : "b", categ ...

jqueryjson

What is the best way to perform calculations within a PHP loop for <input> elements and then display the results using a JavaScript loop?

Hello everyone, I'm currently struggling with displaying the calculations from a loop of input tags. What I'm trying to achieve is having 5 rows with input fields. At the end of each row, there should be a span area that displays the calculation ...

javascriptphpjqueryajaxhtml

Modal window displaying MVC 4 partial view

I've been attempting to display a partial view using a popup, but it's not working. The controller method is also not being triggered. Here's my code: Script:- $(document).ready(function () { $.ajaxSetup({ cache: false }); ...

jqueryasp.net-mvcasp.net-mvc-4

Display information in an HTML table using JQuery AJAX and JSON data

As a new member and beginner learner, I have encountered some issues while trying to execute a certain task. Despite looking at similar questions, I couldn't find a solution that worked for me. What I am attempting to do is query my database to retrie ...

phpjqueryjsonajax

Is the issue with AJAX and a global variable a result of my misunderstanding?

My goal is to use AJAX to load client data onto a page and then replace a company ID with the corresponding name from a different company table in the same database. However, I am facing an issue where the global JavaScript variable is not being updated wi ...

javascriptajaxjsonjquery

Fetching information through AJAX in NodeJS and saving it in a database

I am facing an issue with retrieving data from the client side in my NodeJS application. I have prepared JSON data on the client side, which can be viewed in this codepen link. On the server side, I am attempting to receive this data from the client: var ...

jquerymysqlajaxnode.jsbody-parser

Utilizing Multiple Select Options and CSS Float Styling in Mozilla Firefox

I have been attempting to customize the CSS of a multiple select element. While I am satisfied with how it looks on Chrome, I am facing issues getting it to work correctly on Mozilla Firefox. $('option').mousedown(function(e) { ...

jqueryhtmlcss