How to hide second calendar in date range picker?

Question

I have created one demo using date range picker plugin and it's working fine. I need to hide the second calendar then click on textbox show there two calendars for select date range stat to end. So here I need to hide the second calendar and working with the single calendar as the same functionality want. so how can do I have no idea. I have searched many links on google but I can't be getting success.

Here below I have show my HTML code:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div>
  <input type="text" id="dates" name="dates" value="" />
</div>


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

<script type="text/javascript">
  $(function() {
    //$('input[name="dates"]').daterangepicker();

    var naArray = ["20180705", "20180706", "20180707", "20180708", "20180709", "20180710", "20180711", "20180712", "20180713"];

    function isDateAvailable(date) {
      return naArray.indexOf(date.format('YYYYMMDD')) > -1;
    }

    $('input[name="dates"]').daterangepicker({
      isInvalidDate: isDateAvailable,
      minDate: new Date()
    }, function(start, end, label) {

      for (var d = start._d; d <= end._d; d.setDate(d.getDate() + 1)) {
        var isValid = true;

        var formattedDate = d.getFullYear().toString() + pad((parseInt(d.getMonth()) + 1), 2).toString() + pad(d.getDate(), 2).toString();

        if (naArray.indexOf(formattedDate) > -1) {
          isValid = false;
          break;
        }
      }

      if (!isValid) {
        alert('Please select valid date range.');
        $('.cancelBtn').trigger('click');
      }
    });
  });

  function pad(str, max) {
    str = str.toString();
    return str.length < max ? pad("0" + str, max) : str;
  }
</script>

using below I have attached my screencap in my calendar looks like and it's working fine but I want the single calendar.

enter image description here

I want a just single calendar. when user click starts to end date the same theme also will be there with the single calendar.

I have tried to hide with CSS but at that time I can't get background theme color in the next month selection dates then. Forex: 18-07-2018 to 03-08-2018 select then in the 01-08-2018 to 03-08-2018 in the background color does not show and when I select start to end date in the 01 to 03 dates in the mouse hover color also not come.

here My expected screencap. enter image description here

Just want to confirm .. u need single calender with the functionality of date range.. means — Rush.2707, Jul 04 '18 at 05:34
@Rush.2707 Mean when user select start to end date same functionality want. like mouse hovers and moves than in the background color will same as this in the screencap. so it's possible with single calendar?? — Edit, Jul 04 '18 at 05:39
@Rush.2707 I will edit my question with my expected screencap. — Edit, Jul 04 '18 at 05:41
@VicJordan I have checked your answer and I have also tried with generate various configuration but I am not getting an answer. I can't hide the second calendar. Have you any other way? then please help me with it — Edit, Jul 04 '18 at 08:45
@Edit that’s why told you you check my answer. Answer is in first sentence in bold. It’s not possible. dateragepicker lib is not providing this option. So don’t waste your time. — Vikasdeep Singh, Jul 04 '18 at 08:46
Possible duplicate of [Javascript Date Range Picker - Single Calendar for Range Selection](https://stackoverflow.com/questions/41770018/javascript-date-range-picker-single-calendar-for-range-selection) — Tom Groot, Nov 11 '19 at 12:53

score 2 · Answer 1 · answered Jul 05 '22 at 00:57

set custom range false

$('#dash-dateranger').daterangepicker({
            startDate: start,
            endDate: end,
            showCustomRangeLabel:false,
            ranges: {
               'Today': [moment(), moment()],
               'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
               'Last 7 Days': [moment().subtract(6, 'days'), moment()],
               'Last 30 Days': [moment().subtract(29, 'days'), moment()],
               'This Month': [moment().startOf('month'), moment().endOf('month')],
               'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            }
        }, datecb);

score 1 · Answer 2 · answered Nov 11 '19 at 12:06

1

if any solution does not work try by CSS

.calendar.right{
    display: none !important;
}

answered Nov 11 '19 at 12:06

Rathod Paresh

221
2
4

score 0 · Answer 3 · answered Jul 04 '18 at 06:07

Looks it is not possible to have daterangepicker using a single calendar.

When you set "singleDatePicker": true, it does not give you option to pick a range of dates but you can pick only one date.

You can generate various configurations of your choice and see the expected results here:

http://www.daterangepicker.com/#config

How to hide second calendar in date range picker?

3 Answers3