Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Removing Autoload Of Dropdown Menu

Post a Comment
In my page i have set calendar as dropdown but it automatically loads in start up my code is like this
  • , new Date());; }); 
    #datepicker{width:180px; margin: 0 20px 20px 20px;}
#datepicker > span:hover{cursor: pointer;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
    <input class="form-control" type="text" readonly />
    <span class="input-group-addon"><i class="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"> 
<input type="text" class="form-control dropdown-toggle" data-toggle="dropdown"   data-hover="dropdown" name="txtEnds" id="txtEnds" required onclick="showmydiv();">
<ul class="dropdown-menu" >
    <li><div id="showDates" style="display:none;"></div></li>
</ul>
</li>

<script>
    function showmydiv(){
       document.getElementById('showDates').style.display = "block";
      }
</script>

    This one worked properly


    Post a Comment for "Removing Autoload Of Dropdown Menu"