如何获得与输入内联的 jQuery UI 日期选择器按钮？

Question

在 MVC 5 项目中，使用默认的 bootstrap 布局，我使用以下代码将某个 class 的所有输入设置为 jQuery UI日期选择器小部件：

$(".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>

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

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

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

但我只是不确定这是否是最简洁的方法，对 bootstrap 正在执行的所有布局魔术的影响最小。

Answer 1

在输入旁边显示按钮的 bootstrap 隐喻是使用这样的 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",
    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">

备选 Bootstrap

话虽如此，这是一种相当复杂的方法。我会添加一个原生 bootstrap 字形而不是试图强制按钮正确显示。混合使用 jQuery-UI 和 Bootstrap 也很不常见，因为它们在功能上有很多重叠，而且它们并不总是能很好地协同工作。我建议考虑使用日期选择器插件扩展 bootstrap。

这是一个使用 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>

Answer 2

添加：

class="form-control"

Answer 3

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>

如何获得与输入内联的 jQuery UI 日期选择器按钮？

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

css

jquery-ui

twitter-bootstrap

twitter-bootstrap-3

备选 Bootstrap