xxxxxxxxxx
1
<!-- Start your project here-->
2
<div class="container">
3
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
4
<div class="text-center">
5
<img
6
class="mb-4"
7
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
8
style="width: 250px; height: 90px;"
9
/>
10
<h5 class="mb-3">Ako správne nastaviť Datepicker</h5>
11
<p class="mb-3">MDB5 Datepicker Sk ako nastaviť prvý deň v týždni <b>Pondelok</b></p>
12
<div class="form-outline datepicker-translated" data-format="ddd. dd. mmm. yyyy" startDay>
13
<input
14
type="text"
15
class="form-control"
16
id="exampleDatepicker-sk"
17
placeholder="ddd. dd. mmm. yyyy"
18
/>
19
<label for="exampleDatepicker-sk" class="form-label">Vyberte dátum 1</label>
20
</div>
21
<!-- datepicker 2 -->
22
<br>
23
<p class="mb-3">MDB5 Datepicker 2 : <br> <b>- Translate Sk ??? <br>- datepicker-toggle-button???</b></p>
24
<div class="form-outline datepicker-translated" data-mdb-toggle-button="true" data-format="dd. mmm. yyyy" startDay>
25
<input
26
type="text"
27
class="form-control"
28
id="exampleDatepicker-sk2"
29
data-mdb-toggle="datepicker-translated"
30
placeholder="dd. mmm. yyyy"
31
/>
32
<label for="exampleDatepicker-sk2" class="form-label">Vyberte dátum 2</label>
33
</div>
34
35
<br>
36
<p style="text-align: center;">Or a similar date selection (edit) with translation and the first day Monday.<br>
37
For example form: booking a service for 1 or more days.</p>
38
39
<p style="text-align: center;"><a href="https://mdbootstrap.com/snippets/standard/molborska/2859352#js-tab-view" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com/snippets/standard/molborska/2859352</a></p>
40
<p>2</p>
41
42
<p style="text-align: center;"><a href="https://mdbootstrap.com/snippets/standard/ivaro/5813888#js-tab-view" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com/snippets/standard/ivaro/5813888</a></p>
43
44
45
</div>
46
47
</div>
48
</div>
49
<!-- End your project here-->
1
1
xxxxxxxxxx
1
var datepickerTranslated = document.querySelectorAll('.datepicker-translated').forEach((datepicker)=>{
2
new mdb.Datepicker(datepicker, {
3
title: 'Vyberte dátum',
4
monthsFull: ['Január', 'Február', 'Marec', 'Apríl', 'Máj', 'Jún', 'Júl', 'August', 'September', 'Október', 'November', 'December'],
5
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jún', 'Júl', 'Aug', 'Sep', 'Okt', 'Nov','Dec'],
6
weekdaysFull: 1 ,
7
weekdaysFull: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota'],
8
weekdaysShort: 1,
9
weekdaysShort: ['Ne', 'Po', 'Ut', 'St', 'Št', 'Pia', 'So'],
10
weekdaysNarrow: 1,
11
weekdaysNarrow: ['N', 'P', 'U', 'S', 'Š', 'P', 'S'],
12
okBtnText: 'Vložiť',
13
clearBtnText: 'Vymazať',
14
cancelBtnText: 'Zavrieť',
15
startDay: 1,
16
okBtnLabel: 'Potvrdiť výber',
17
clearBtnLabel: 'Vymazať výber',
18
cancelBtnLabel: 'Zrušiť výber',
19
nextMonthLabel: 'Budúci mesiac',
20
prevMonthLabel: 'Predchádzajúci mesiac',
21
nextYearLabel: 'Budúci rok',
22
prevYearLabel: 'Predchádzajúci rok',
23
nextMultiYearLabel: 'Ďalších 24 rokov',
24
prevMultiYearLabel: 'Predchádzajúcich 24 rokov',
25
switchToMultiYearViewLabel: 'Vyberte rok a mesiac',
26
switchToMonthViewLabel: 'Vybrať dátum',
27
switchToDayViewLabel: 'Vybrať dátum',
28
});
29
})
30
Console errors: 0