Как получить кнопку ввода jQuery UI Datepicker с встроенным входом?

В проекте 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
});

Вот HTML, который отображается с помощью Razor и jQuery UI после выполнения вышеуказанного вызова, минус некоторые атрибуты 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>

Проблема заключается в том, что кнопка datepicker появляется ниже ввода даты. Это связано с тем, что класс bootstrap .form-control делает ввод a display: block. Если я отредактирую это в консоли Chrome до inline-block, кнопка появится сразу справа от входа, именно там, где я хочу.

Теперь я могу добавить новое правило css следующим образом:

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

но я просто не уверен, что это самый простой способ сделать это, с наименьшим воздействием на все магии макета, которые выполняет bootstrap.

Ответы

Ответ 1

Метафора начальной загрузки для отображения кнопок рядом с входами используется 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>

Вы можете настроить ваш script для форматирования вывода, чтобы добавить эти классы и структуру 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">

Ответ 2

Попробуйте следующим образом:

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

Ответ 3

Добавьте это:

class="form-control"