xxxxxxxxxx
1
<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
20
</div>
1
1
xxxxxxxxxx
1
const datepickerDisableFuture = document.querySelectorAll('.custom-disable-future');
2
datepickerDisableFuture.forEach((picker) => {
3
new mdb.Datepicker(picker, {
4
disableFuture: true
5
});
6
});
7
8
const datepickerTranslated = document.querySelectorAll('.custom-translated');
9
datepickerTranslated.forEach((pickerDE) => {
10
11
new mdb.Datepicker(pickerDE, {
12
title: 'Datum auswählen',
13
monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
14
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov','Dez'],
15
weekdaysFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
16
weekdaysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
17
weekdaysNarrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
18
okBtnText: 'Ok',
19
clearBtnText: 'Klar',
20
cancelBtnText: 'Schließen',
21
});
22
})
23
24
const confirmDateOnSelect = document.querySelectorAll('.confirm-date-on-select');
25
confirmDateOnSelect.forEach((pickerSel) => {
26
27
new mdb.Datepicker(pickerSel, {
28
confirmDateOnSelect: true,
29
});
30
});
Console errors: 0