CODEWITHSUNDEEP
reactjsdatepickermomentjsblueprintjs
Enie
Enie

Reputation: 699

setting locale in blueprintjs datetime react component

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={...}
/>

Upvotes: 0

Views: 1544

Answers (2)

Oladapo Ajala
Oladapo Ajala

Reputation: 91

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

Upvotes: 2

Davi DeBarros
Davi DeBarros

Reputation: 368

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/)

Upvotes: 2

Related Questions