xxxxxxxxxx1
<div class="p-3">2
<div class="form-outline custom-translated custom-disable-future "3
data-mdb-format="dd.mmm.yyyy">4
<input type="text" class="form-control" id="exampleDatepicker1" />5
<label for="exampleDatepicker1" class="form-label">Select a date1</label>6
</div>7
8
<div class="form-outline custom-translated custom-disable-future "9
data-mdb-format="dd.mmm.yyyy">10
<input type="text" class="form-control" id="exampleDatepicker2" />11
<label for="exampleDatepicker2" class="form-label">Select a date2</label>12
</div>13
14
<div class="form-outline custom-translated confirm-date-on-select"15
data-mdb-format="dd.mmm.yyyy">16
<input type="text" class="form-control" id="exampleDatepicker3" />17
<label for="exampleDatepicker3" class="form-label">Select a date3</label>18
</div>19
</div>20
21
<div class="p-3">22
<div class="form-outline custom-translated2"23
data-mdb-format="dd.mmm.yyyy"24
data-mdb-disable-future="true">25
<input type="text" class="form-control" id="exampleDatepicker1" />26
<label for="exampleDatepicker1" class="form-label">Select a date1</label>27
</div>28
29
<div class="form-outline custom-translated2"30
data-mdb-format="dd.mmm.yyyy"31
data-mdb-disable-future="true">32
<input type="text" class="form-control" id="exampleDatepicker2" />33
<label for="exampleDatepicker2" class="form-label">Select a date2</label>34
</div>35
36
<div class="form-outline custom-translated2"37
data-mdb-format="dd.mmm.yyyy"38
data-mdb-confirm-date-on-select="true">39
<input type="text" class="form-control" id="exampleDatepicker3" />40
<label for="exampleDatepicker3" class="form-label">Select a date3</label>41
</div>42
</div>1
1
xxxxxxxxxx1
const datepickerDisableFuture = document.querySelectorAll('.custom-disable-future');2
datepickerDisableFuture.forEach((picker) => {3
const instance = mdb.Datepicker.getOrCreateInstance(picker);4
instance.update({ disableFuture: true });5
});6
7
const datepickerTranslated = document.querySelectorAll('.custom-translated');8
datepickerTranslated.forEach((pickerDE) => {9
const instance = mdb.Datepicker.getOrCreateInstance(pickerDE);10
instance.update({11
title: 'Datum auswählen',12
monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],13
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov','Dez'],14
weekdaysFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],15
weekdaysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],16
weekdaysNarrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],17
okBtnText: 'Ok',18
clearBtnText: 'Klar',19
cancelBtnText: 'Schließen',20
});21
}) 22
23
const confirmDateOnSelect = document.querySelectorAll('.confirm-date-on-select');24
confirmDateOnSelect.forEach((pickerSel) => {25
const instance = mdb.Datepicker.getOrCreateInstance(pickerSel);26
instance.update({ confirmDateOnSelect: true });27
});28
29
const datepickerTranslated2 = document.querySelectorAll('.custom-translated2');30
datepickerTranslated2.forEach((pickerDE) => {31
const instance = new mdb.Datepicker(pickerDE, {32
title: 'Datum auswählen',33
monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],34
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov','Dez'],35
weekdaysFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],36
weekdaysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],37
weekdaysNarrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],38
okBtnText: 'Ok',39
clearBtnText: 'Klar',40
cancelBtnText: 'Schließen',41
});42
}) Console errors: 0