Css 如何获取与输入内联的jQueryUIDatePicker按钮？

在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，减去一些

aria

和validation

data

属性：

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

---

但我不确定这是否是最整洁的方式，对bootstrap所做的布局魔术影响最小

在输入旁边显示按钮的引导隐喻是使用如下命令：

您可以通过如下方式包装内容，调整脚本以格式化输出以添加这些类和html结构：

$（“.jqueryui标记日期选择器”）
.wrap（“”）
.日期选择器({
日期格式：“年月日”，
变化年：是的，
showOn：“按钮”
})
.下一步（“按钮”）.按钮({
图标：{primary:“ui图标日历”}，
标签：“选择日期”，
文本：false
})
.addClass（“btn btn默认值”）
.wrap（“”）
.find（“.ui按钮文本”）
.css({
“可见性”：“隐藏”，
“显示”：“内联”
});

添加以下内容：

class="form-control" 

试着这样做：


日期
选择一个日期
感谢您提供的最有启发性的答案。bootstrap datepicker看起来是一个非常整洁的选项，尤其是我的目标是为asp.net mvc编辑器模板设计一个教程！再加上什么？
输入
已经有了
表单控件
，这就给了它
显示：block，如我的问题中所述。form-control是worng answerBootstrap 3日期选择器吗？
class="form-control" 

<form class="form-inline">
        <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>
</form>