Javascript Date Range Picker - Single Calendar for Range Selection

Question

I'm using this date range picker component: http://www.daterangepicker.com/ and by default the widget shows two calendars. I would like to show only one calendar and be able to use the < > buttons to select next/previous months when selecting start and end dates i.e., be able to select a start date in January (showing only January) and then select an end date in March (showing only March), by clicking the > button. There is an option for singleDatePicker: true, but this disables the ability to select a range of dates.

Were you able to fix this ? tried belwos answer but didnt work — Tyra Pululi, Aug 15 '18 at 09:56
May be this tutorial helpful: [How to create Single Calendar for Range selection in DateRangePicker](https://devnote.in/how-to-create-a-single-calendar-for-range-selection-in-daterangepicker/) — Fefar Ravi, Feb 07 '22 at 06:53

cipriano · Answer 1 · 2018-10-15T18:44:22.347

Code to remove second calendar for: http://www.daterangepicker.com Will be able to select a date range within one calendar.

/* REMOVE SECOND CALENDAR */

.daterangepicker .drp-calendar.right {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
}

.daterangepicker .drp-calendar.right tbody {
    display: none !important;
}

.daterangepicker .drp-calendar.right thead > tr:nth-child(2) {
    display: none !important;
}

.daterangepicker .drp-calendar.right th.month {
    display: none !important;
}

.daterangepicker .drp-calendar.right .calendar-table {
    background: transparent !important;
}

.daterangepicker .daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
    float: none !important;
}

.daterangepicker .drp-calendar.right .daterangepicker_input {
    position: absolute !important;
}

/* REMOVE SECOND CALENDAR */

please, edit your answer and add details about what you what is your code doing. So, others can understand it easily. — Rarblack, Oct 15 '18 at 18:32

score 2 · Answer 2 · edited Nov 01 '18 at 15:18

I was also having the same problem but overcome it with adding some css in it, hope it also helps you.

.drp-calendar.right thead>tr:nth-child(2) {
    display: none;
}
.drp-calendar.right tbody {
    display: none;
}
.daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
    float: none !important;
}
.daterangepicker .drp-calendar.right .daterangepicker_input {
    position: absolute;
    top: 45px;
    left: 8px;
    width: 230px;
}
.drp-calendar.left .drp-calendar-table {
    margin-top: 45px;
}

Thiago Valente · Answer 3 · 2021-04-27T03:45:51.350

You can use a hack to enable range selection in just one calendar:

To insert just one calendar and works well you have to hidden the second calendar:

$(function() {
  $('input[name="daterange"]').daterangepicker({
    "autoapply": true
  });

  $('.drp-calendar.right').hide();
  $('.drp-calendar.left').addClass('single');
});

Now we have a problem... Always you tap on calendar the 'view' will be update, so to show the next month arrow, you have to add this code:

$('.calendar.table').on('DOMSubtreeModified', function() {
  var el = $(".prev.available").parent().children().last();
  if(el.hasClass('next available')) { return; }
    el.addClass('next available');
    el.append('<span></span>');
});

Note: There may be better ways to do it, but this is the one I found.

$(function() {
  $('input[name="daterange"]').daterangepicker({
    "autoapply": true
  });
  $('.drp-calendar.right').hide();
  $('.drp-calendar.left').addClass('single');

  $('.calendar-table').on('DOMSubtreeModified', function() {
    var el = $(".prev.available").parent().children().last();
    if (el.hasClass('next available')) {
      return;
    }
    el.addClass('next available');
    el.append('<span></span>');
  });
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />

score 0 · Answer 4 · edited Aug 28 '22 at 22:25

I have found a solution for Single Calendar. Embedded calendar with range selection.

 var picker = $('#daterangepicker1').daterangepicker({
            "parentEl": "#daterangepicker1-container",
            "autoApply": true,
            "linkedCalendars": false,
        });
        // range update listener
        picker.on('apply.daterangepicker', function (ev, picker) {
            $("#daterangepicker-result").html('Selected date range: ' + picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
        });
        // prevent hide after range selection
        picker.data('daterangepicker').hide = function () { };
        // show picker on load
        picker.data('daterangepicker').show();

          $('.drp-calendar.right').hide();
            $('.drp-calendar.left').addClass('single');

        $('.calendar.table').on('DOMSubtreeModified', function () {
                var el = $(".prev.available").parent().children().last();
                if (el.hasClass('next available')) { return; }
                el.addClass('next available');
                el.append('<span></span>');
            });

.embedded-daterangepicker .daterangepicker::before,
.embedded-daterangepicker .daterangepicker::after {
  display: none;
}
.embedded-daterangepicker .daterangepicker {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  float: left;
  width: auto !important;
  margin-top: 0;
}
.embedded-daterangepicker .daterangepicker .drp-calendar {
  width: 50%;
  max-width: 50%;
}

<!DOCTYPE html>
<html>

<head>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>
  <div class="row">
  <div class="col-md-10 offset-md-1">
    <h3>Embedded DateRangePicker with Single Calendar</h3>
    <p id="daterangepicker-result">Selected date range:</p>
    <input id="daterangepicker1" type="hidden">
    <div id="daterangepicker1-container" class="embedded-daterangepicker"></div>
  </div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script
        src="https://dev.admin.desktop.myhealthcare.co/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
</body>
</html>

in Date Range Picker. Please checkout my fiddle:

https://jsfiddle.net/sarfarazmalik/fdjo37ce/10/

Javascript Date Range Picker - Single Calendar for Range Selection

4 Answers4

Linked