Question

在一个MVC 5项目中，使用默认的bootstrap布局，我使用以下代码将某个类的所有输入设置为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和验证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>

这个问题是datepicker按钮出现在日期输入下方。这是因为引导程序.form-control使得输入为display: block。如果我在Chrome控制台中将其编辑为inline-block，则按钮会立即显示在输入右侧，正是我想要的位置。

现在我可以按如下方式添加新的css规则：

.form-control.jqueryui-marker-datepicker {
  display: inline-block;
}

但是我不确定这是否是最好的方法，对引导程序所做的所有布局魔法的影响最小。

Answer 1

尝试这种方式：

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

Answer 2

添加：

class="form-control"

如何获得与输入内联的jQuery UI Datepicker按钮？

2 个答案: