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?
Adding this to style did the job..
display: inline-block;
vertical-align: middle;
width: 90%;
margin: 0 5px 0 0;
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments