Click here to Skip to main content
16,016,557 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
 
Share this answer
 
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[^]
 
Share this answer
 

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