Ich versuche, das HTML5-Eingabetyp = "Datum" -Element anzupassen. Ich möchte einen separaten Button hinzufügen, der die Sichtbarkeit des Dropdown-Menüs für die Datumsauswahl umschaltet. Ich konnte dazu keine Informationen finden. Jede Hilfe sehr geschätzt!HTML5-Eingabetyp = Datum: Kann ich die Datumsauswahl mit JavaScript öffnen/schließen?
Betrachten jQueryUI Datumsauswahl verwenden. Es hat sogar ein Beispiel für das, was Sie erreichen möchten.
Wenden Sie sich an Plugins, wäre ein letzter Ausweg ... Ich habe mich nur gefragt, ob es einen JS-Funktionsaufruf gab, der es öffnen/schließen würde. Wirklich zu schätzen Ihre Hilfe :) –
Versuchen Sie dieses:
$(document).ready(function() {
$('input[type="date"]').change(function() {
closeDate(this);
});
});
function closeDate(dateInput) {
$(dateInput).attr('type', 'text');
$(dateInput).attr('type', 'date');
}
eine nicht-cross-Browser-Lösung? :/ –
Warum sagst du das? –
Nur kommentieren es war! –
Hier Lösung habe ich mit Hilfe von CSS.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.exmp-wrp {
margin-top: 100px;
position: relative;
width: 200px;
}
.btn-wrp {
border: 1px solid #dadada;
display: inline-block;
width: 100%;
position: relative;
z-index: 10;
}
.btn-clck {
border: none;
background: transparent;
width: 100%;
padding: 10px;
}
.btn-clck::-webkit-calendar-picker-indicator {
right: -10px;
position: absolute;
width: 78px;
height: 40px;
color: rgba(204, 204, 204, 0);
opacity: 0
}
.btn-clck::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.btn-clck::-webkit-clear-button {
margin-right:75px;
}
.btn {
height: 100%;
background: #fda200;
border: none;
color: #fff;
padding: 13px;
position: absolute;
right: 0;
top: 0;
}<div class="exmp-wrp">
<div class="btn-wrp">
<input type="date" class="btn-clck"/>
</div>
<button class="btn">Click me</button>
</div>Wissen Sie, dass Sie Code-Snippets für stackoverflow verwenden können und dafür keine jsfiddle benötigen? https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ – DarkMukke
Ja, soll ich es so machen? –
Es ist der bevorzugte Weg von der Community, JS Fiddle Links sind in Ordnung, aber wenn JS Geige jemals untergeht, sind etwa 30% der Links zum Code von Antworten gebrochen. – DarkMukke
Bloß nicht! Wenn Sie eine Standard-Browsereingabe verwenden, lassen Sie die Standardbenutzeroberfläche des Browsers unverändert. Es erhöht die Benutzerfreundlichkeit, indem es etwas weniger schrecklich ist als alles, was Sie tun werden. – Mathletics
Wenn ich irgendwo außerhalb des Dropdown-Menüs auf den Kalender klicke, wird es für mich geschlossen. Ich bin mir also nicht sicher, ob Sie überhaupt einen Button benötigen. – colonelsanders
er will die Taste, weil er auch in der Lage sein möchte, es auf diese Weise zu öffnen :) –