Wie konfiguriert man einen Datepicker mit jQuery?

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

<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

<input type="text" id="datepicker">

jQuery

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