DatePicker V5, locale not working


Topic: DatePicker V5, locale not working

Lok3rs asked 3 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


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 commented 3 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'}
                    />

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


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