Material-ui-pickers: Persian Calendar Example Broken

[Fardinak]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | |
| material-ui | |
| React | |
| Browser | Firefox 64 |
| Peer library | |

Steps to reproduce

1. Open the Persian Calendar System page on the Material-UI Pickers demo website.
2. Try opening a calendar view

Expected behavior

Show Jalali Calendar.

Actual behavior

Root element emptied. Error message on console: TypeError: "t.props.utils.startOfMonth is not a function"

Live example

https://material-ui-pickers.firebaseapp.com/localization/persian

[victorrodrigues]

I got the same error, but I was using the Moment Utils.
Upgrading to @date-io/[email protected] solve the problem.

My guess at this particular issue it's that material-ui-pickers-jalali-utils is using utils.prototype.getStartOfMonth instead of utils.prototype.startOfMonth

[mosijava]

@victorrodrigues is correct. it's because material-ui-pickers-jalali-utils is using
utils.prototype.getStartOfMonth instead of
utils.prototype.startOfMonth

if you want to quickly fix it you can do something like this:

import JalaliUtils from 'material-ui-pickers-jalali-utils';
import { DatePicker, MuiPickersUtilsProvider } from 'material-ui-pickers';
import jMoment from 'moment-jalaali';

class EditedJalaliUtils extends JalaliUtils {
    startOfMonth(date) {
        return date.clone().startOf('jMonth');
    }
}
export default class BasicUsage extends Component {
    state = {
        selectedDate: jMoment(),
    };

    handleDateChange = date => {
        this.setState({ selectedDate: date });
    };

    render() {
        const { selectedDate } = this.state;

        return (
            <MuiPickersUtilsProvider utils={EditedJalaliUtils} locale="fa">
                <div className="picker">
                    <Typography variant="h5" align="center" gutterBottom>
                        Date picker
                    </Typography>

                    <DatePicker
                        clearable
                        okLabel="تأیید"
                        cancelLabel="لغو"
                        clearLabel="پاک کردن"
                        labelFunc={date => (date ? date.format('jYYYY/jMM/jDD') : '')}
                        value={selectedDate}
                        onChange={this.handleDateChange}
                        animateYearScrolling={false}
                    />
                </div>
            </MuiPickersUtilsProvider>
        );
    }
}

[dmtrKovalenko]

@mosijava thanks for posting solution.
I am intent on moving Jalali utils to the @date-io monorepo and will do it as soon as possible

[dmtrKovalenko]

Fixed

[reemyrail]

You can resolve this problem following these steps:
after importing your dependency utils
import MomentUtils from '@date-io/moment';
Add these lines before bootstrapping your app :
MomentUtils.prototype.getStartOfMonth=MomentUtils.prototype.startOfMonth

[sahaditya]

thanks victorrodrigues.

I got the same error, but I was using the Moment Utils.
Upgrading to @date-io/[email protected] solve the problem.

My guess at this particular issue it's that material-ui-pickers-jalali-utils is using utils.prototype.getStartOfMonth instead of utils.prototype.startOfMonth

if still propblem exist : check "client/package.json" whether it is containing "material-ui-pickers" dependency or not if not add it.