CODEWITHSUNDEEP
javascriptreactjssemantic-ui-reactreact-data-grid
MJ Tsai
MJ Tsai

Reputation: 171

Does react data grid custom formatter work with custom editor at the same time?

Goal: Currently using react data grid, I want to keep user input in unified MM/DD/YYYY using the date picker (custom editor), and formats in user browser locale (custom formatter), is it possible to achieve.

(If I converts at the date picker format, I may need to modify the back end.)

I did some research of this post Using react-datepicker in react-data-grid compoent is it still true that formatter don't work with editor?

This is demo I built: https://codesandbox.io/embed/8l4jkor19

And I can't get formatter to work so far.

class DateFormatter extends React.Component {
  render() {
    const browserLocale =
      window.navigator.userLanguage || window.navigator.language;
    console.log("browserLocale is: " + browserLocale);
    //{moment(this.props.value).local().locale(browserLocale).format('L')}
    return <div>{moment(value).format("L")}</div>;
  }
}

Any comments will be appreciate!

Upvotes: 1

Views: 1095

Answers (1)

MJ Tsai
MJ Tsai

Reputation: 171

The answer is yes

Calendar localization + input localization

achieved with React data grid and Semantic ui calendar react

Demo https://codesandbox.io/s/7wzx8ql10?fontsize=14

React-data-grid 6.1.0

Semantic-ui-calendar-react 0.14.4

Semantic-ui 0.84.0

Upvotes: 2

Related Questions