jkslyby / material-ui-datetime-range-picker Goto Github PK

ERROR in ./node_modules/material-ui-datetime-range-picker/DatePicker/DateRangePicker.js
Module not found: Error: Can't resolve 'material-ui/styles/getMuiTheme' in '../node_modules/material-ui-datetime-range-picker/DatePicker'

`DateRangePicker.render
node_modules/babel-loader/lib/index.js??ref--6-oneOf-2!/Users/manuel/Development/Docker/vhosts/dois-react/node_modules/material-ui-datetime-range-picker/DatePicker/DateRangePicker.js:484
481 | utils = _props.utils,
482 | other = _objectWithoutProperties(_props, ['DateTimeFormat', 'autoOk', 'autoOpenField', 'blockedDateTimeRanges', 'calendarDateWidth', 'calendarTimeWidth', 'cancelLabel', 'className', 'container', 'dayButtonSize', 'dialogContainerStyle', 'end', 'endLabel', 'endLabelDate', 'endLabelTime', 'firstDayOfWeek', 'formatDisplay', 'layout', 'locale', 'mode', 'okLabel', 'onDismiss', 'onFocus', 'onShow', 'onClick', 'showCalendarDate', 'showCalendarStatus', 'start', 'startLabel', 'startLabelDate', 'startLabelTime', 'style', 'textFieldStyle', 'utils']);
483 |

484 | var prepareStyles = this.context.muiTheme.prepareStyles;
| ^ 485 | var styles = this.getStyles();
486 | var _state = this.state,
487 | selectedStartDate = _state.selectedStartDate,`

Debug builds work fine. Production build breaks with:

Creating an optimized production build...
Failed to compile.

./node_modules/materialui-daterange-picker/node_modules/@material-ui/core/esm/styles/colorManipulator.js
Attempted import error: 'formatMuiErrorMessage' is not exported from '@material-ui/utils' (imported as '_formatMuiErrorMessage').

Not sure what's breaking yet, or why I see this but others have not. I've created a fork of the repo to experiment. Any tips appreciated.

formatMuiErrorMessage IS exported from 4.10.2, but is NOT exported from 4.10.1, or earlier, given my spot checks. It is NOT exported from 4.4.3, the version in the master repo.

Hello guys please , i will like to know how to disable the time option , i want the user to only be able to choose start date and ending date.
Thanks

if I'm not mistaken, MuiThemeProvider is from Material UI v3, and ThemeProvider is from Material UI v4.
In the README, there's only example for MuiThemeProvider. Could you show how to use material-ui-datetime-range-picker component with ThemeProvider and Material UI v4?

Hi! I'musing react 16 with material-ui v1.3.
And I have to use MuiThemeProvider:

const AppRoot = () => {
  return (
    <MuiThemeProvider theme={ theme }>
      <App />
    </MuiThemeProvider>
  );
};

const StyledAppRoot = withStyles(globalStyle)(AppRoot);

const render = () => {
  ReactDOM.render(
    <Provider store={ store }>
      <ConnectedRouter history={ history }>
        <StyledAppRoot />
      </ConnectedRouter>
    </Provider>,
    MOUNT_NODE
  );
};

I tried to install and use material-ui-datetime-range-picker and have got error:

TypeError: Cannot read property 'prepareStyles' of undefined.

How can I fix it?

I see this package is not maintained anymore and I have created custom DateTimeRange picker that works great with latest material-ui v5. Here is a codesandbox link (https://codesandbox.io/s/festive-tree-ibh18?file=/src/App.js) where you can find it and improve it if you want 😄

Just installed the package and followed the instructions mentioned in the README. But when launched, it throws the following error:

TypeError: Cannot read property 'prepareStyles' of undefined
DateRangePicker.render
node_modules/material-ui-datetime-range-picker/DatePicker/DateRangePicker.js:483
480 | utils = _props.utils,
481 | other = _objectWithoutProperties(_props, ['DateTimeFormat', 'autoOk', 'autoOpenField', 'blockedDateTimeRanges', 'calendarDateWidth', 'calendarTimeWidth', 'cancelLabel', 'className', 'container', 'dayButtonSize', 'dialogContainerStyle', 'end', 'endLabel', 'endLabelDate', 'endLabelTime', 'firstDayOfWeek', 'formatDisplay', 'layout', 'locale', 'mode', 'okLabel', 'onDismiss', 'onFocus', 'onShow', 'onClick', 'showCalendarDate', 'showCalendarStatus', 'start', 'startLabel', 'startLabelDate', 'startLabelTime', 'style', 'textFieldStyle', 'utils']);
482 |

483 | var prepareStyles = this.context.muiTheme.prepareStyles;
| ^ 484 | var styles = this.getStyles();
485 | var _state = this.state,
486 | selectedStartDate = _state.selectedStartDate,