gpt4 book ai didi

javascript - 如何正确对齐出现在日期选择器文本框下方的日期选择器图标?

转载 作者:可可西里 更新时间:2023-11-01 13:50:44 33 4
gpt4 key购买 nike

我有一个日期选择器,我希望日期选择器图标紧跟在日期选择器之后。但是,日期选择器图标出现在日期选择器下方。我附上了一个 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>

我尝试以多种方式让日期选择器按钮与文本框对齐,但都失败了。我必须让日期选择器按钮与文本框对齐。

它在 JSFiddle 上完美运行。但是,如果您在 Chrome 上运行它。您会注意到日期选择器按钮出现在文本框下方。如何将其与文本框对齐?

最佳答案

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);
}

添加上面的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>

关于javascript - 如何正确对齐出现在日期选择器文本框下方的日期选择器图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34918122/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com