CODEWITHSUNDEEP
javascriptjquerybootstrap-daterangepicker
TDG
TDG

Reputation: 1302

Daterangepicker - singleDatePicker - Show 2 months

I am using daterangepicker. All works fine.

Now, when "singleDatePicker": true, is it possible to show 2 months range?

HTML:

<input class="form-control input-lg" id="tripOne" name="tripOne" />

JS:

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

$('input[name="tripOne"]').daterangepicker({
"autoApply": true,
"autoUpdateInput": false,
"singleDatePicker": true,
"minDate": today,
"maxDate": maxLimitDate,
"opens": "left",
"locale": {
    format: 'DD MMM YYYY'
  }
}, function (start, end) {
  $("#tripOne").val(start.format('DD MMM YYYY'));
  $('#tripOne').parent().parent().removeClass('has-error');
});

Upvotes: 1

Views: 2595

Answers (2)

Basil Cool
Basil Cool

Reputation: 106

In additional to the answer of Indrajeet Patil. It is possible to hide the right arrow in the left calendar by:

$('.calendar.left .next.available').hide();

Upvotes: 0

Indrajeet Patil
Indrajeet Patil

Reputation: 652

To show two months with singleDatePicker, add $('.calendar.right').show();

Fiddle

To hide the right arrow, edit daterangepicker.js

Find this line,

if ((!maxDate || maxDate.isAfter(calendar.lastDay)) && (!this.linkedCalendars || side == 'right' || this.singleDatePicker))

and remove || this.singleDatePicker

This will hide the right arrow on the first calendar.

Upvotes: 1

Related Questions