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.
- Bootstrap 3 datepicker? eonasdan.github.io/bootstrap-datetimepicker
Du musst angemeldet sein, um einen Kommentar abzugeben.
Bootstrap-Metapher für die Anzeige der Schaltflächen neben Eingänge wird die Verwendung einer
input-group
wie diese:Können Sie optimieren Sie Ihr Skript, um die Ausgabe zu formatieren hinzufügen dieser Klassen und html-Struktur durch wickeln der Inhalt wie diesem:
JS:
HTML:
Alternative w/Bootstrap
That being said, ist dies ein ziemlich gewundenen Weg, dies zu tun. Ich möchte hinzufügen eines nativen bootstrap glyphicon anstatt zu versuchen, zwingen Sie die Taste, um die Anzeige richtig. Es ist auch ziemlich ungewöhnlich, um zu mischen, jQuery-UI und Bootstrap, da es eine Menge überschneidungen in der Funktionalität, und Sie nicht immer spielen schön zusammen. Ich würde empfehlen, sich einfach in die Verlängerung bootstrap mit einem datepicker plugin.
Hier ein Beispiel mit bootstrap-datepicker
JS:
HTML:
Fügen Sie diese:
input
bereitsform-control
, die gibt esdisplay: block;
, wie bereits in meiner Frage.