Bootstrap Datetimepicker modal calendar position append not working

user_6060849 0
Viewed 345

I want the datepicker should visible near the input box. I have tried with container position. but still not working.

<div class="input-group  date">
    <input type="text" name="dates" class="form-control daterange" value=""/>              
</div>
<div id="CalModal"></div>
$('.daterange').daterangepicker({                    
        "locale": {
            "container": "#CalModal",
    }
});

sample-img

twitter-bootstrap-3 datepicker html jquery javascript
2 Answers

By default it looks like the component is working as expected. Although I do think something in your code is causing this problem. I was able to reproduce a similar issue where the datepicker drops down below where it should be. Take a look at this screen shot. I disabled the top property on the datepicker and then it came down about 40 pixels. Look for something in your code that is overwriting the top property.

Screenshot of reproduced issue, top has been disabled in the web inspector on the element

user_2982400

Seems to be working as expected!

$('.daterange').daterangepicker({
  "opens": "left",
  "locale": {
    "container": "#CalModal",
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<table class="table table-bordered">
  <tr>
    <th>Search</th>
    <th>
      <input class="form-control" />
    </th>
    <th>
      <input class="form-control" />
    </th>
    <th>
      <div class="input-group date">
        <input type="text" name="dates" class="form-control daterange" value="" />
      </div>
      <div id="CalModal"></div>
    </th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

user_11778140
Related