My Calendar is covered by the top bar

Question

My Calendar is covered by the top bar

Navigation

#1 by (3 votes)

2

I have the following design

and as you can see the calendar of DatePicker it covers the bar that I have at the top.

Calendar function code

$(document).ready(function(){
  var date_input=$('input[name="date_inicio"]'); //our date input has the name "date"
  var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
  date_input.datepicker({
    format: 'yyyy/mm/dd',
    container: container,
    todayHighlight: true,
    autoclose: true,
  })
})

They could help me to be complete.

Thank you.

javascript html css

asked by Javier fr 09.07.2018 в 21:20

source

1 answer

How to customize a spinner on android Some idea of how to submit the button using javascript or jquery

score 3 · Accepted Answer

You can specify the direction to where the calendar will be opened using the property orientation . Here is an example:

$(document).ready(function(){
  var date_input=$('input[name="date_inicio"]'); //our date input has the name "date"
  var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
  date_input.datepicker({
    format: 'yyyy/mm/dd',
    container: container,
    todayHighlight: true,
    autoclose: true,
    orientation: "bottom"
  })
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<input name="date_inicio"></input>