Topic: DatePicker V5, locale not working

Lok3rs free asked 10 months 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


Wojciech Staniszewski staff answered 10 months ago


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 10 months 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'}
                    />

Wojciech Staniszewski staff commented 10 months 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.


Wojciech Staniszewski staff answered 10 months ago


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>
  );
}


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: 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