Erstellen Sie einen Kalender Showdown mit Button klicken Sie auf die Schaltfläche

Was ich versuche zu tun ist im Grunde einen Kalender unter einer Schaltfläche angezeigt, wenn es vom Benutzer angeklickt wird, und wenn er ein Datum wählt, sollte das Datum gespeichert werden in irgendeinem versteckten Textfeld um die Seite versuchte ich mit jquery ui's datepicker aber hatte kein Glück, eine Lösung zu finden, ich habe viele generierte Knöpfe und ich will eine Lösung, die mit einem einfachen onmousedown Ereignis arbeiten kann. Danke für die HilfeErstellen Sie einen Kalender Showdown mit Button klicken Sie auf die Schaltfläche

Quelle

2017-04-13 Maxpnl

Unter der Annahme, dass Sie bereits Ihre heruntergeladen haben jquery-ui-1.1xxcustom.zip * oder Voll jquery-ui-1.1xxzip * (wobei x die Version haben Sie gewählt) und Sie haben geZIPten Dateiinhalte in Ihre Webseite platziert <head> wie

folgt

<!-- jQueryUI date theme stylesheet --> 
<link rel="stylesheet" href="css/jquery-ui.css"> 
<link rel="stylesheet" href="css/jquery-ui.theme.css"> 
<!-- http://getbootstrap.com/ --> 
<link href="/css/bootstrap.min.css" rel="stylesheet"/> 
<!-- app's own CSS --> 
<link href="/css/formstyles.css" rel="stylesheet"/> 
<!-- https://jquery.com/ --> 
<script src="/js/jquery-1.12.4.js"></script> 
<!-- http://getbootstrap.com/ --> 
<script src="/js/bootstrap.min.js"></script> 
<!-- https://jQueryUI.com/ --> 
<script src="/js/jquery-ui.js"></script> 
<!-- app's own js scripts --> 
<script src="/js/formscripts.js"></script>

** vergessen Sie nicht, das „Bild“ Ordner heruntergeladen .zip in den CSS-Ordner Ihres Projekts zu kopieren.

dann sollten Sie eine Funktion wie die folgende, in die <head> auch implementieren, Datepicker zu initialisieren (in diesem Beispiel der Benutzer einen Geburtstermin in einer 80 Jahre Wut von Datum-like-heute wählen können/1937 bis heute-heute/2002 http://jqueryui.com/datepicker/#dropdown-month-year).

<script> 
/*global $*/ 
$(function(){ 
    $("#datepicker").datepicker({ minDate: "-80Y", maxDate: "-15Y", 
    changeMonth: true, changeYear: true, yearRange: "-80:+0" 
    }); 
}); 
    </script>

Dann wird ein <input> HTML-Element wie dieses

<div class="form-group"> 
    <h5>Date of birth :</h5> 
    <input class="form-control btn btn-default" id="datepicker" name="birth_date" value="Your birthday" type="button"/> 
</div>

gibt die angeforderte UI datepicker print screen

Das ist alles für jQueryUI ist.

Um die Eingabe des Benutzers zu erhalten Sie möchten eine JS-Funktion implementieren, die

<input class="form-control btn btn-default" id="datepicker" name="birth_date" value="Your birthday" type="button" onchange="myFunction()"/> 
<textarea id="x" hidden></textarea> 
<script> 
    function myfunction(){ 
    document.getElementById("x").innerHTML = 
    document.getElementById("datepicker").value;} 
</script>

Quelle

2017-04-13 21:28:42 Gfour

Danke für die Hilfe Menschen durch onchange Attribut in Ihrem Eingangselement ausgelöst wird, ohnehin habe ich bereits beschlossen, für eine einfachere Ansatz (Öffnen eines Popup-Fensters auf jeder Schaltfläche), aber ich werde dies beim nächsten Mal beachten, wenn ich etwas Ähnliches machen muss: D – Maxpnl

Erstellen Sie einen Kalender Showdown mit Button klicken Sie auf die Schaltfläche

Antwort

Verwandte Themen