Javascript Date Range Picker - Single Calendar for Range Selection

I'm using this date range picker ponent: / 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.

I'm using this date range picker ponent: http://www.daterangepicker./ 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.

Share Improve this question asked Jan 20, 2017 at 18:18 neridaj 2,1939 gold badges32 silver badges63 bronze badges

Were you able to fix this ? tried belwos answer but didnt work – Tyra Pululi Commented Aug 15, 2018 at 9:56
May be this tutorial helpful: How to create Single Calendar for Range selection in DateRangePicker – Fefar Ravi Commented Feb 7, 2022 at 6:53

Add a ment |

5 Answers 5

Sorted by: Reset to default 5

Code to remove second calendar for: http://www.daterangepicker. 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 */

I was also having the same problem but overe 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;
}

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

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/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn./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/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/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/sarfarazmalik/fdjo37ce/10/

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Javascript Date Range Picker - Single Calendar for Range Selection - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)