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.

Elinoreeliot

Were you able to fix this ? tried belwos answer but didnt work – Lovering

May be this tutorial helpful: How to create Single Calendar for Range selection in DateRangePicker – Rollerskate

Answer 1

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 */

Zacheryzack

please, edit your answer and add details about what you what is your code doing. So, others can understand it easily. – Langmuir

Answer 2

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;
}

Appulse

Answer 3

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" />

Hartford

Answer 4

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/

Freyah

Answer 5

/* REMOVE SECOND CALENDAR */ .daterangepicker .drp-calendar.right {
    position: absolute;
    right: 0;
    top: 0; }

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

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

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

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

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

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

/* REMOVE SECOND CALENDAR */

Forgot

please edit your code only answer and add some explanation to it. In this way you force people to read through the code in order to understand what the idea of your answer is. In general, code only answers are not as helpful as code with an explanation. – Eo