datapicker - range

Navigation
0

I have a problem with a Date Picker Range Bootstrap, since it is shown in the back of my modal, try a z-indez:-1 , but I do not see favorable changes.

This is my code: 

$(function() {

  var start = moment().subtract(29, 'days');
  var end = moment();

  function cb(start, end) {
    $('.reportrange span').html(start.format('YYYY MM DD') + ' - ' + end.format('YYYY MM DD'));
  }

  $('.reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    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')]
    }
  }, cb);

  cb(start, end);

});
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script  src="//cdn.jsdelivr.net/bootstrap/3/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<div>
  <a type="button" class="hvr-shutter-in-vertical filtradobtn" data-toggle="modal" data-target="#exampleModalLong">BOTON</a>
</div>


<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">SELECCIONAR</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="reportrange" name="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%;">
          <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
          <span id="txt"></span> <b class="caret"></b>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" id="btn1" type="button">Aceptar</button>
      </div>
    </div>
  </div>
</div>
    
asked by matteo 30.01.2018 в 19:18
source

1 answer

0

try assigning z-index to both screens and with high numbers.

Ahem:

  • To the modal container a z-index: 9
  • To the datepicker container a z-index: 99.

EDITED:

I have replicated what you mentioned above using:

I think your problem is the order in which you add the references to the plugins. Either way, here is the code working. I also put it in JS BIN: link 

$(function() {

  var start = moment().subtract(29, 'days');
  var end = moment();

  function cb(start, end) {
    $('.reportrange span').html(start.format('YYYY MM DD') + ' - ' + end.format('YYYY MM DD'));
  }

  $('.reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    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')]
    }
  }, cb);

  cb(start, end);

});
<!DOCTYPE html>
<html>

<head>

  <!-- Include Required Prerequisites -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

</head>

<body>
  <div>
    <a type="button" class="hvr-shutter-in-vertical filtradobtn" data-toggle="modal" data-target="#exampleModalLong">
      BOTON
    </a>
  </div>



  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">SELECCIONAR</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
        </div>
        <div class="modal-body">

          <div class="reportrange" name="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%;">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
            <span id="txt"></span> <b class="caret"></b>
          </div>

        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" id="btn1" type="button">Aceptar</button>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
    
answered by 30.01.2018 в 19:28
Table does not take property bordered How to incorporate values from the database into a js?