Menu
I have a datepicker and I want the datepicker icon to appear just after the datepicker. However, the datepicker icon appears below the datepicker. I have attached a JSFiddle. Fiddle for datepicker
$(document).ready(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
dateFormat: 'dd/mm/yy',
maxDate: 0
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<form>
<div class="row">
<div class="form-group col-md-1">
<label>DOB :</label>
</div>
<div class="form-group col-md-3">
<input class="form-control" name="dob" value="" id="datepicker" type="text">
</div>
</div>
</form>
</body>I tried getting the datepicker button aligned to the textbox in many ways but failed. I have to get the datepicker button aligned to the textbox.
It works perfectly on JSFiddle. However, if you run it on Chrome. You will notice that datepicker button appears below the text box. How to align it to text-box?
997
input.hasDatepicker {
display: inline-block;
margin-right: 5px;
width: -webkit-calc(100% - 21px);
width: -moz-calc(100% - 21px);
width: -o-calc(100% - 21px);
width: -ms-calc(100% - 21px);
width: calc(100% - 21px);
}
Add the above css
$(document).ready(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
dateFormat: 'dd/mm/yy',
maxDate: 0
});
});input.hasDatepicker {
display: inline-block;
margin-right: 5px;
width: -webkit-calc(100% - 21px);
width: -moz-calc(100% - 21px);
width: -o-calc(100% - 21px);
width: -ms-calc(100% - 21px);
width: calc(100% - 21px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<form>
<div class="row">
<div class="form-group col-md-1">
<label>DOB :</label>
</div>
<div class="form-group col-md-3">
<input class="form-control" name="dob" value="" id="datepicker" type="text">
</div>
</div>
</form>
</body>
answered Oct 23 '25 04:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With