Ihr arbeitet sicher immer wieder mit Formulare in euren Webprojekten, mal sind es nur einfache Kontaktformulare und manchmal auf komplizierte Abfragen um eure Kunden besser kennen zu lernen. Und hin und wieder möchtet ihr ein Datum abfragen und das kann man entweder mit einem einfachen Text-Feld machen und die Daten selbst validieren. Ihr könnt aber auch ein Datepicker nehmen und ihn einbauen und die Validierung dem Script überlassen.
Heute möchte ich euch zeigen wie ihr den jQuery Datepicker nehmen könnt und wie ihr in bei euch einsetzen und konfigurieren könnt.
Video
jQuery CDN Links
1 2 3 4 5 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
HTML
1 | <input type="text" id="datepicker"> |
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script>
$(document).ready(function(){
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd.mm.yy",
maxDate: "+1w",
minDate: '-0d',
dayNamesMin: ["So", "Mo","Di","Mi","Do","Fr","Sa"],
firstDay: 1,
monthNamesShort: ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],
});
})
</script> |
Dokumentation
Natürlich habe ich euch hier nicht alle Funktionen vorgestellt, die im Datepicker eingebaut sind – aus diesem Grund habe ich hier noch die API Dokumentation für euch, damit ihr sehen könnt was man noch alles damit machen kann.
Hallo.
Schon mal vielen Dank für dieses Video. Das hat mir sehr weiter geholfen. Ich bin Anfänger und finde nicht, ob es eine Möglichkeit gibt, das man nur bestimmte Tage (Datum) im Kalender auswählen kann. Gibt es da eine Lösung?
Vielen Dank!
Jörg