CODEWITHSUNDEEP
twitter-bootstrapbootstrap-datepicker
Robert Araujo
Robert Araujo

Reputation: 137

Bootstrap DatePicker 3 show multiple months

I'm using Bootstrap 3 Datepicker Homepage

And it's working great but I need to show two months instead of one. I know in the options tab they show sideBySide events but it's for the time only, I would like to show another month there instead of the time.

Can anyone help with this?

This is what it shows with sideBySide

enter image description here

But I need it like this:

enter image description here

Upvotes: 4

Views: 15647

Answers (3)

Sridhar Srivin
Sridhar Srivin

Reputation: 27

This 'll do Bootstrap date-picker doesn't have this functionality, but this can be easily done using jQuery UI Datepicker

<script>
    $( function() {
        $( "#datepicker" ).datepicker({
            numberOfMonths: 2
        });
    } );
</script>


<p>Date: <input type="text" id="datepicker"></p>

Upvotes: 1

user1020495
user1020495

Reputation: 93

A little bit late to the game, but here is my solution: use multiple calendars (tested with Tempus Dominus, should work with bootstrap-datepicker too):

=== HTML Part: ===
<div class="row" id="datetimepicker1"></div>
<div class="row" id="datetimepicker2"></div>

=== Javascript Part: ===

$('#datetimepicker1').datetimepicker({
    format: 'L',
    inline: true
});

$('#datetimepicker2').datetimepicker({
    format: 'L',
    inline: true,
    defaultDate: moment().add(1, 'months')
});


$("#datetimepicker1").on("update.datetimepicker", function (e) {
    e.viewDate.add(1, 'months');
    $('#datetimepicker2').datetimepicker('date', e.viewDate);
});

Beware of a bug which prevents "update.datetimepicker" from firing: https://github.com/tempusdominus/bootstrap-4/issues/176

Upvotes: 1

Carlos Araujo
Carlos Araujo

Reputation: 474

What you need is a range date picker, and if I'm right this plugin doesn't have such functionality. You can use something like this Instead.

Upvotes: 1

Related Questions