title: How to hide second calendar in date range picker?
body: <p>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.</p>
  
  <p>Here below I have show my HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /&gt;
  
  &lt;div&gt;
    &lt;input type="text" id="dates" name="dates" value="" /&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
    $(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')) &gt; -1;
      }
  
      $('input[name="dates"]').daterangepicker({
        isInvalidDate: isDateAvailable,
        minDate: new Date()
      }, function(start, end, label) {
  
        for (var d = start._d; d &lt;= 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) &gt; -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 &lt; max ? pad("0" + str, max) : str;
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>using below I have attached my screencap in my calendar looks like and it's working fine but I want the single calendar.</p>
  
  <p><a href="https://i.stack.imgur.com/3TR2w.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>I want a just single calendar. when user click starts to end date the same theme also will be there with the single calendar.</p>
  
  <p>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.</p>
  
  <p>here My expected screencap.
  <a href="https://i.stack.imgur.com/QZN2B.png" rel="nofollow noreferrer">enter image description here</a></p>