DatePicker V5, locale not working

Topic: DatePicker V5, locale not working

Lok3rs free asked 2 years ago

Hello. In Api of MDBDatePickerV5 I found it's possible to change locale for custom one, I'd like to set it to Polish for better user experience.

                    <MDBDatePickerV5
                        disablePast
                        locale={moment.locale('pl')}
                        emptyLabel={''}
                        cancelLabel={'Anuluj'}
                    />

Moreover it's still displaying everything in english. I tried with several languages and still nothing. Is there any workaround to make it work? Like providing all months etc. by myself?

Kind regards,

Dawid

Add comment

Wojciech Staniszewski staff answered 2 years ago

1 0 Best answer

I see you are using the MDB5 version, but this code is probably from MDB4. Here is how to use MDB5 Datepicker: https://mdbootstrap.com/docs/b5/react/forms/datepicker/

Lok3rs free commented 2 years ago

Hello Wojtek.

After doing everything as described on page you sent, I'm still getting everything in English.

                    <MDBDatePicker
                        disablePast
                        inline
                        title={'Wybierz datę'}
                        monthsFull={[
                            'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec',
                            'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'
                        ]}
                        monthsShort={[
                            'Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'
                        ]}
                        weekdaysFull={[
                            'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota', 'Niedziela'
                        ]}
                        weekdaysShort={[
                            'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sb', 'Nd'
                        ]}
                        weekdaysNarrow={[
                            'Pn', 'W', 'Ś', 'C', 'Pt', 'S', 'N'
                        ]}
                        okBtnText={'Akceptuj'}
                        clearBtnText={'Wyczyść'}
                        cancelBtnText={'Anuluj'}
                    />

<p>Hello Wojtek.</p>

<p>After doing everything as described on page you sent, I'm still getting everything in English.</p>

Please insert min. 15 characters.

Wojciech Staniszewski staff commented 2 years ago

There seems to be a problem with the inline version. For now, you can use the normal Datepicker version. We will fix this issue in the next release.

Add comment

Wojciech Staniszewski staff answered 2 years ago

0 0 Best answer

<p>Please take a look at this code:</p>

<pre class="prettyprint"><code>import React, { useState } from 'react';
import { MDBDatepicker } from 'mdb-react-ui-kit';

export default function DatepickerPage(): JSX.Element {
  const [datepickerTranslate, setDatepickerTranslate] = useState('');

return (
    <section>
      <section className='border p-4 d-flex justify-content-center mb-4'>
        <MDBDatepicker
          inline
          labelText='Wybierz datę'
          monthsFull={[
            'Styczeń',
            'Luty',
            'Marzec',
            'Kwiecień',
            'Maj',
            'Czerwiec',
            'Lipiec',
            'Sierpień',
            'Wrzesień',
            'Październik',
            'Listopad',
            'Grudzień',
          ]}
          monthsShort={['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru']}
          weekdaysFull={['Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota', 'Niedziela']}
          weekdaysShort={['Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sb', 'Nd']}
          weekdaysNarrow={['Pn', 'W', 'Ś', 'C', 'Pt', 'S', 'N']}
          value={datepickerTranslate}
          setValue={setDatepickerTranslate}
        />
      </section>
      <p>
        <strong>value:</strong>
        {datepickerTranslate}
      </p>
    </section>
  );
}
</code></pre>

Please insert min. 20 characters.

Please take a look at this code:

import React, { useState } from 'react';
import { MDBDatepicker } from 'mdb-react-ui-kit';

export default function DatepickerPage(): JSX.Element {
  const [datepickerTranslate, setDatepickerTranslate] = useState('');

  return (
    <section>
      <section className='border p-4 d-flex justify-content-center mb-4'>
        <MDBDatepicker
          inline
          labelText='Wybierz datę'
          monthsFull={[
            'Styczeń',
            'Luty',
            'Marzec',
            'Kwiecień',
            'Maj',
            'Czerwiec',
            'Lipiec',
            'Sierpień',
            'Wrzesień',
            'Październik',
            'Listopad',
            'Grudzień',
          ]}
          monthsShort={['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru']}
          weekdaysFull={['Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota', 'Niedziela']}
          weekdaysShort={['Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sb', 'Nd']}
          weekdaysNarrow={['Pn', 'W', 'Ś', 'C', 'Pt', 'S', 'N']}
          value={datepickerTranslate}
          setValue={setDatepickerTranslate}
        />
      </section>
      <p>
        <strong>value:</strong>
        {datepickerTranslate}
      </p>
    </section>
  );
}

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: MDB5 2.3.0
Device: PC
Browser: Chrome
OS: Linux
Provided sample code: No
Provided link: No

Lok3rs

5Support score
1Questions 0Answers 0Snippets