JavaScript Links und Anweisung: Fügt die Links unten zu den JS-Dateien vom Datepicker ein unter:
> Menü > Seiteneinstellungen > End of <body> code:
<!-- JS Datei Bootstrap Datepicker -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js'></script> <!-- JS Datei Bootstrap Sprache Deutsch, muss als zweites JS stehen --> <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.de.min.js'></script>
<!-- Datepicker Aufruf als letztes, bei Bedarf anpassen --> <script> $('#datepicker').datepicker({ // Datums-Format, optional DD schreibt Wochentag aus format: 'DD, dd.mm.yyyy', // Start-Datum aktiv ab -3 Tage vom Tagesdatum startDate: '-3d', // Tagesdatum hervorheben
todayHighlight: true, // automatisch nach Datumswahl schließen autoclose: true, // Sprache Deutsch setzen language: 'de' }); </script>
Anzeige vom Formularfeld:
Ich habe hier einen einfachen Textblock als Demo verwendet und den Text mit dem <div> unten ersetzt. Natürlich kann dafür jedes Formularfeld verwendet werden. Ihr müsst nur die CSS-Klassen und die im JavaScript (oben) gesetzte id="datepicker" an das Eingabefeld anfügen. Mehrere Datepicker auf der gleichen Seite, benötigen natürlich auch unterschiedliche IDs.