В проекте 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.