I just want to show the date picker when user click inside textbox insted of clicking atcurser symbol at the end of textbox.
What I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row col-md-4" style="margin-top:50px">
<div class="panel" style="background-color:#022243; color:white;border-radius:0px;">
<div class="panel-heading" style="padding-bottom:0px; font-size:20px">Pure - Orer Now !</div>
<div class="panel-body">
<form class="form" action="#">
<div class="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option one
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two
</label>
</div>
<br/><br/>
<div class="input-group">
<span class="input-group-addon" style="border-radius:0px"><b>ToDate</b>       <i class="glyphicon glyphicon-calendar"></i></span>
<input class="form-control datepicker" type="date" style="border-radius:0px" />
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" style="border-radius:0px"><b>FromDate</b>  <i class="glyphicon glyphicon-calendar"></i> </span>
<input class="form-control datepicker" type="date" style="border-radius:0px" />
</div>
<br/>
<div class="dropdown" >
<button class="btn btn dropdown-toggle" type="button" data-toggle="dropdown" style="color:black;border-radius:0px;background-color:white">Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" style="border-radius:0px"><b>Order Prise ₹ </b></span>
<label class="form-control" style="border-radius:0px;">
<span style="color:black">1997₹ </span>    
<strike style="color:red">2059₹</strike>
<small style="color:red">-14%</small>
<label/>
</div>
<br/>
<button class="btn btn-info" style="border-radius:0px">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Submit an article or tip