从bootstrap 3向html帮助程序文本框添加字形图标
从bootstrap 3向html帮助程序文本框添加字形图标
提问于 2017-05-04 17:26:15
我有以下实现，允许用户单击调用jquery datepicker的文本框。我希望在textbox旁边添加一个glphyicon，它将调用填充相同textbox/InputModel的jquery datepicker，以便它将绑定到InputModel。
// in view
@Html.TextBoxFor(m => m.InputModel.InputFromDate,
new { @class ="datepicker", @placeholder = "Enter Date" })})
// in js
$(document).ready({
$('.datepicker').datepicker();
});
//add glyphicon
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>回答 3
Stack Overflow用户
发布于 2017-05-04 17:39:51
<div class="form-group">
<label class="control-label col-md-3">Input From Date</label>
<div class="col-md-3">
<div class="input-group input-medium date date-picker" data-date-format="dd-mm-yyyy">
@Html.TextBoxFor(m => m.InputModel.InputFromDate,
new { @class = "datepicker form-control", @placeholder = "Enter Date" })
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<!-- /input-group -->
<span class="help-block"> Select date </span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.datepicker').datepicker();
});
</script>Stack Overflow用户
发布于 2017-05-05 12:50:50
我已经找到了解决这个问题的方法。我从How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups得到了这个答案
//in js
<script>
$(document).ready(function () {
$("#datepicker-from").datepicker();
$("#datepicker-to").datepicker();
$('#fromBtn').click(function () {
//alert('clcikec');
$("#datepicker-from").focus();
});
$('#toBtn').click(function () {
//alert('clcikec');
$("#datepicker-to").focus();
});
})
</script>
<div class="col-md-3">
<label class="control-label">Date From</label>
<div class="input-group">
@Html.TextBoxFor(m => m.Input.InputFromDate, new { @id = "datepicker-from", @class = "form-control", @placeholder = "Enter from Date" })
<span class="input-group-addon" id="fromBtn" style="cursor:pointer;">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>Stack Overflow用户
发布于 2017-05-04 17:32:42
只需将Glyphicon放在一个按钮内，然后为该按钮创建一个onclick事件，该事件针对datepicker调用show()方法：
$('.my-button').click(function(e){
$('.my-datepicker').datepicker('show');
}在获取按钮和输入本身时，请确保使用唯一的ID/类，否则可能会打开整个表单中的日期选择器！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43778937
复制相关文章
相似问题
腾讯云开发者
