首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使jQuery UI日期选择器按钮与输入内容内联?

如何使jQuery UI日期选择器按钮与输入内容内联?
EN

Stack Overflow用户
提问于 2015-05-01 22:41:24
回答 1查看 13.6K关注 0票数 18

在一个使用默认引导布局的MVC5项目中,我使用以下代码将某个类的所有输入设置为jQuery UI日期选择器小部件:

代码语言:javascript
复制
$(".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呈现的超文本标记语言,去掉了一些aria和validation data属性:

代码语言:javascript
复制
<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 .form-control类为输入提供了display: block。如果我在Chrome的控制台中编辑为inline-block,这个按钮就会立即出现在输入的右边,正好是我想要的位置。

现在我可以添加一个新的css规则,如下所示:

代码语言:javascript
复制
.form-control.jqueryui-marker-datepicker {
  display: inline-block;
}

但我只是不确定这是不是最好的方式,对bootstrap所做的布局魔力的影响最小。

EN

回答 1

Stack Overflow用户

发布于 2015-05-07 20:50:41

添加以下内容:

代码语言:javascript
复制
class="form-control" 
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29988985

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档