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

How do I get a jQuery UI Datepicker button inline with the input?

提问by ProfK

In an MVC 5 project, with the default bootstrap layout, I am using the following code to set all inputs of a certain class to jQuery UI Datepicker widgets:

在 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
});

Here is the HTML that is rendered by Razor and jQuery UI after the above call executes, minus some ariaand validation dataattributes:

这是执行上述调用后由 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>

The problem with this is that datepicker button appears below the date input. This is because the bootstrap .form-controlclass makes gives the input a display: block. If I edit this in Chrome's console to inline-blockthe button appears immediately to the right of the input, exactly where I want it.

问题在于日期选择器按钮出现在日期输入下方。这是因为 bootstrap.form-control类使输入 a display: block。如果我在 Chrome 的控制台中编辑它，inline-block按钮会立即出现在输入的右侧，正是我想要的位置。

Now I could add a new css rule as follows:

现在我可以添加一个新的 css 规则如下：

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

but I'm just not sure if this is the neatest way to do this, with the least impact on all the layout magic that bootstrap is doing.

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

采纳答案by KyleMit

The bootstrap metaphor for displaying buttons next to inputs is to use an input-grouplike this:

在输入旁边显示按钮的引导程序比喻是使用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>

You can tweak your script to format the output to add these classes and html structure by wrapping the contents like this:

你可以调整你的脚本来格式化输出，通过包装这样的内容来添加这些类和 html 结构：

$(".jqueryui-marker-datepicker")
  .wrap('<div class="input-group">')
  .datepicker({
    dateFormat: "yy-mm-dd",
    changeYear: true,
    showOn: "button"
  })
  .next("button").button({
    icons: { primary: "ui-icon-calendar" },
    label: "Select a date",
    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">

---

---

Alternative w/ Bootstrap

使用 Bootstrap 的替代方案

That being said, this is a pretty convoluted way to do this. I'd add a native bootstrap glyphicon instead of trying to force the button to display correctly. It's also pretty uncommon to mix jQuery-UI and Bootstrap as there is a lot of overlap in functionality and they don't always play nice together. I would recommend looking into just extending bootstrap with a datepicker plugin.

话虽如此，这是一个非常复杂的方法来做到这一点。我会添加一个本机引导程序字形，而不是试图强制按钮正确显示。混合使用 jQuery-UI 和 Bootstrap 也很不常见，因为功能上有很多重叠，而且它们并不总是能很好地配合使用。我建议只使用 datepicker 插件扩展引导程序。

Here's an example using 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>

回答by Joe Mike

Try this way :

试试这个方法：

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

回答by O'Brien

Add this:

添加这个：

class="form-control"