javascript - How to align datepicker icon appearing below the datepicker textbox properly? -


i have datepicker , want datepicker icon appear after datepicker. however, datepicker icon appears below datepicker. have attached jsfiddle. fiddle 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 datepicker button aligned textbox in many ways failed. have datepicker button aligned textbox.

it works on jsfiddle. however, if run on chrome. notice datepicker button appears below text box. how align text-box?

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 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>


Comments

Popular posts from this blog

android - Why am I getting the message 'Youractivity.java is not an activity subclass or alias' -

python - How do I create a list index that loops through integers in another list -

c# - “System.Security.Cryptography.CryptographicException: Keyset does not exist” when reading private key from remote machine -