setting locale in blueprintjs datetime react component

Question

I'm trying to set the locale of blueprintjs DateRangeInput. The docs state that the Component uses Moment.js for localisation. So I tried to set locale="de", but the language is English still. Any ideas what is missing to get a translated date input?

I'm fairly new to React programming so I can't be sure that it has nothing to do with my React skills, even tho passing the props seems quite right to me.

<DateRangeInput
    locale={"de"}
    value={dates}
    onChange={...}
/>

score 2 · Accepted Answer · answered Jan 19 '18 at 20:06

2

try adding this import "moment/locale/de" to the top of the file

i think blueprint uses new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) to remove the locales from moment which is pretty common since moment is really large.

if that doesn't work try adding this to your webpack plugins

new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de/)

answered Jan 19 '18 at 20:06

Davi DeBarros

368
1
9

Thanks, for the reply. I added the `import` to my component's file and also the snippet for webpack's plugins section, but still the date picker is all english. The import is not throwing any errors so I guess the moment locale was loaded correctly. I don't see, why it is still not working :( I'll have a look if I can update any libraries. – Enie Jan 20 '18 at 11:51
it seems like `DateRangeInput` uses `react-day-picker` http://react-day-picker.js.org/docs/localization/, they suggest also passing the `localeUtils` props – Davi DeBarros Jan 20 '18 at 13:29

score 2 · Answer 2 · answered Oct 18 '21 at 09:48

The DateTime components (Date picker, Date range picker, Time picker, Date time picker, Date input, and Date range input) all depend on react-day-picker.

To set the desired locale, according to the react-day-picker documentation you need to import the desired locale from moment as mentioned above and set the localeUtils (a set of functions used to render the component based on the current locale).

The code below is how it works.

import React from 'react';
import { DateRangeInput } from "@blueprintjs/datetime";
import 'react-day-picker/lib/style.css';

// Include the locale utils designed for moment
import MomentLocaleUtils from 'react-day-picker/moment';

// Make sure moment.js has the required locale data
import 'moment/locale/ja';

export default class LocalizedExample extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <DateRangeInput localeUtils={MomentLocaleUtils} locale='ja' />
      </div>
    );
  }
}

setting locale in blueprintjs datetime react component

2 Answers2