在MVC 5项目中，使用默认引导布局，我使用以下代码将某个类的所有输入设置为jQuery UI Datepicker小部件：
$(".jqueryui-marker-datepicker").datepicker({
dateFormat: "yy-mm-dd",changeYear: true,showOn: "button"
}).next("button").button({
icons: { primary: "ui-icon-calendar" },label: "Select a date",text: false
});
这是在上述调用执行后由Razor和jQuery UI呈现的HTML，减去一些咏叹调和验证数据属性：
<div class="form-group">
<label class="control-label col-md-2" for="Time">Date</label>
<div class="col-md-10">
<input class="form-control jqueryui-marker-datepicker hasDatepicker valid" id="Time" name="Time" type="text" value="2015-05-02">
<button type="button" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="Select a date">
<span class="ui-button-icon-primary ui-icon ui-icon-calendar"></span><span class="ui-button-text">Select a date</span>
</button>
<span class="text-danger field-validation-valid" data-valmsg-for="Time" data-valmsg-replace="true"></span>
</div>
</div>
这个问题是datepicker按钮出现在日期输入下方。这是因为引导.form控制类使输入显示：block。如果我在Chrome的控制台中编辑这个内嵌块，按钮就会立即显示在输入的右侧，正好在我想要的位置。
现在我可以添加一个新的CSS规则如下：
.form-control.jqueryui-marker-datepicker {
display: inline-block;
}
但我只是不确定这是否是最好的方式来做到这一点，对引导程序所做的所有布局魔法影响最小。
解决方法
用于显示输入旁边的按钮的引导比喻是使用像这样的
input-group：
<div class="input-group">
<input type="date" class="form-control" placeholder="Date" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar" ></span>
</button>
</span>
</div>
您可以调整脚本格式化输出以通过包装这样的内容来添加这些类和HTML结构：
$(".jqueryui-marker-datepicker")
.wrap('<div class="input-group">')
.datepicker({
dateFormat: "yy-mm-dd",showOn: "button"
})
.next("button").button({
icons: { primary: "ui-icon-calendar" },text: false
})
.addClass("btn btn-default")
.wrap('<span class="input-group-btn">')
.find('.ui-button-text')
.css({
'visibility': 'hidden','display': 'inline'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> <input type="text" class="jqueryui-marker-datepicker form-control">
替代w / Bootstrap
话虽如此，这是一个非常有趣的方式来做到这一点。我会添加一个本机引导字形，而不是强制按钮显示正确。混合jQuery-UI和Bootstrap也很常见，因为功能上有很多重叠，并且它们并不总是在一起玩。我会建议只是使用datepicker插件扩展引导。
这是使用bootstrap-datepicker的一个例子
$('.datepicker').datepicker({});
//
$('.datepicer-icon').on('click','.btn',function(e) {
$(e.delegateTarget).find('.datepicker').focus();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<div class="container" >
<h3>With Input Group</h3>
<div class="input-group datepicer-icon">
<input type="text" class="form-control datepicker" placeholder="Date" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar" ></span>
</button>
</span>
</div>
<h3>With Feedback</h3>
<div class="form-group has-Feedback">
<input type="text" class="form-control datepicker" placeholder="Date" />
<i class="glyphicon glyphicon-calendar form-control-Feedback"></i>
</div>
</div>
