Click here to Skip to main content
14,936,757 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<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>&nbsp <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 &#8377 </b></span>
<label class="form-control" style="border-radius:0px;">
<span style="color:black">1997&#8377 </span>&nbsp&nbsp&nbsp&nbsp
<strike style="color:red">2059&#8377</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>
Posted
Updated 29-Aug-17 18:44pm

use JQUERY datepicker() to resolve your problem
   
It is the default functionality of type="date"[^], if you are looking for the functionality which you are asking, then go for Datepicker | jQuery UI[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900