Bootstrap Datepicker


Kalender mit direkter Auswahl vom Datum für Formulare

Klicke in das Formularfeld um den Datepicker zu öffnen. 



Ihr könnt anstelle dessen natürlich auch einfach den HTML Typ type="date" (Datum) wählen. 

<input type="date" class="form-control">


  1. Bootstrap-Datepicker CSS:

    Fügt den Link unten zu der CSS-Datei vom Datepicker ein unter:

    > Menü > Seiteneinstellungen > Inside <head> code: 

    <!-- CSS Bootstrap Datepicker -->
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css'>


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

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

    <div class="container"> 
      <div class="input-group date"> 
          <input type="text" class="form-control" id="datepicker" placeholder="TT.MM.JJJJ"> 
      </div>
    </div> 

  4. Siehe weitere Optionen für den Bootstrap-Datepicker hier:

    https://bootstrap-datepicker.readthedocs.io/en/latest/options.html

    Hier könnt Ihr unterschiedliche Optionen setzen und dann unten in das leere Feld zum Ausprobieren klicken:

    https://uxsolutions.github.io/bootstrap-datepicker/?#sandbox
© Mobirise-Tutorials.com
Datenschutzregeln