Removing Autoload Of Dropdown Menu

In my page i have set calendar as dropdown but it automatically loads in start up my code is like this

$(function () {
  $("#datepicker").datepicker({ 
        autoclose: true, 
        todayHighlight: true
  }).datepicker('update', newDate());;
});

#datepicker{width:180px; margin: 020px20px20px;}
#datepicker > span:hover{cursor: pointer;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"rel="stylesheet"/><linkhref="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><divid="datepicker"class="input-group date"data-date-format="mm-dd-yyyy"><inputclass="form-control"type="text"readonly /><spanclass="input-group-addon"><iclass="glyphicon glyphicon-calendar"></i></span></div>

There you go... Works fine and made in bootstrap. There are literally hundreds of versions of this.

Solution 2:

You can try this code:

$(document).ready(function() { 
   $('.dropdown-menu').hide();
});

So, Then you can show on click datepicker.

Solution 3:

I have changed the code to

<li class="dropdown"> 
<inputtype="text"class="form-control dropdown-toggle"data-toggle="dropdown"data-hover="dropdown"name="txtEnds"id="txtEnds"requiredonclick="showmydiv();"><ulclass="dropdown-menu" ><li><divid="showDates"style="display:none;"></div></li></ul></li><script>functionshowmydiv(){
       document.getElementById('showDates').style.display = "block";
      }
</script>

This one worked properly