Wie bekomme ich ein jQuery-UI-Datepicker-button inline-ist mit dem Eingang?

In einer MVC 5 Projekt, mit dem default-bootstrap-layout verwende ich den folgenden code, um alle Eingänge von einer bestimmten Klasse jQuery-UI-Datepicker-widgets:

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

Hier ist der HTML-Code gerendert wird durch Razor und jQuery UI nach dem obigen Aufruf ausgeführt wird, minus einige aria und Validierung data Attribute:

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

Das problem mit diesem ist, dass datepicker button erscheint unterhalb der Datum-Eingabe. Dies ist, weil die bootstrap - .form-control Klasse macht, erhält der Eingang ein display: block. Wenn ich die Bearbeiten das in der Chrome Konsole zu inline-block erscheint die Schaltfläche direkt rechts neben dem Eingang, genau dort, wo ich es will.

Nun ich könnte hinzufügen, eine neue css-Regel wie folgt:

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

aber ich bin mir gerade nicht sicher, ob dies ist der sauberste Weg, dies zu tun, mit den geringsten Auswirkungen auf alle layout-Magie, die bootstrap zu tun.

InformationsquelleAutor ProfK | 2015-05-01
Schreibe einen Kommentar