JS: Datepicker (mit jquery)

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Donnerstag, 04. Juni 2020 um 09:17 Uhr (23/2020 Kalenderwoche)

geändert: Montag, 24. Juli 2023 um 17:36 Uhr (30/2023 Kalenderwoche)

Keywords: datum datepicker jquery deutsch german

Kategorien: HTML, JavaScript, JS-jQuery,

Text:

Erstellung eines oder mehrerer Datumsfelder in einem Formular mit Datepicker (mit jquery).


Download der kompletten Dateisammlung von Ralf als ZIP


Library (Anleitung und Tipps, engl.)


Siehe auch:
stackoverflow: Datepicker für Deutsch


Siehe auch: TechDox: Deutsches Datumsformat

Quellcode:   

Möglichkeit mit HTML5:
<form>
    <label for="geburtstag">Geburtsdatum</label>
    <input type="date" id="geburtstag" name="geburtstag">
    <button type="submit">speichern</button>
</form>

####################################

Komfortabler ist es mit einem Datumspicker in einem Kalender:

<link rel="stylesheet" href="js/jquery-ui/jquery-ui.css" type="text/css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui/datepicker-de.js"></script>
<script type="text/javascript">
    //siehe Doku: https://jqueryui.com/datepicker

    $(function() {
        $('#deutschesDatumId').datepicker();
    });

    $(function() {
        $('#nurMonatJahrId').datepicker({
            showAnim: 'bounce',
            showWeek: false,
            dateFormat: 'mm.yy',//Anderes Format bei diesem Feld!
            });
    });
</script>

<input type="text" name="deutschesDatum" name="deutschesDatumId" placeholder="dd.mm.yyyy">
<br>
<input type="text" name="nurMonatJahr" name="nurMonatJahrId" placeholder="mm.yyyy">