Invalid Jalaali year error with isGregorian={false}

[reza-agahi]

Hi Dear Mohammadreza! error scenario: I go to provided section for selecting month,

and when I click on each of these months, I get this error and datepicker doesn't update:

This problem just occured when I set isGregorian={false} and for gregorian calendar it is fine!

conditions:

• react 15.6.2
• react-datepicker2-1.0.0-alpha3
• moment-jalaali 0.7.2

[mberneti]

hi i'll check it out ASAP.

[mberneti]

@reza-agahi can i see your code?

[alireza-mh]

seems like its the same problem that mentioned on issue #4 . use moment.loadPersian(); and see if it resolve.

[pouyajabbarisani]

It's still not working :( and throwing error some times

[mberneti]

@pouyajabbarisani u know, i need to see your code ...

[pouyajabbarisani]

Seems DakePicker generates invalid date, cuz It's throw error for a saved date which selected and generated by itself. (code exactly as same as I explained in https://github.com/mberneti/react-datepicker2/issues/20#issuecomment-497963708)

[pouyajabbarisani]

Oh, It was all about my wrong date formatting. I'm gonna debug my code in https://github.com/mberneti/react-datepicker2/issues/20#issuecomment-497963708

[mberneti]

@pouyajabbarisani It's not invalid, it's different and based on momentJs date. That's your fault u should not manipulate the selected value.

[mberneti]

So can I close this issue?

[pouyajabbarisani]

Sure, thanks for everything :)

[mberneti]

You're welcome ;)

[abumahdiii]

Hi My problem is the same as the problem explained in this topic (https://github.com/mberneti/react-datepicker2/issues/15#issue-354008227). and here is my code:

import React from "react";
import moment from "moment-jalaali";
import DatePicker from "react-datepicker2";

// moment.loadPersian({ dialect: "persian-modern" });

export default class ReactClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: moment() };
  }
  render() {
    return (
      <DatePicker
        timePicker={false}
        isGregorian={false}
        onChange={value => {
          this.setState({ value });
        }}
        value={this.state.value}
      />
    );
  }
}

please help me to solve this error.

P.S. : adding or removing the comment line did not solve my problem.

[mberneti]

@EslahiSani I'll check it ASAP.

[mberneti]

@moesaniii you don't need to call loadPersian method of the moment any more, there isn't any problem in the current version. can u show me the code?

[abumahdiii]

@mberneti , loadPersian is commented and I have used the exact code explained in https://github.com/mberneti/react-datepicker2/issues/15#issuecomment-513662934

[mberneti]

@moesaniii I can't see any error in this conditions:

"dependencies": {
    "moment-jalaali": "^0.8.3"
    ...
},
"peerDependencies": {
    "react": "^16.0.0"
    ...
}

[abumahdiii]

@mberneti conditions of our project:

    "moment-jalaali": "^0.8.3"
    "react": "^16.8.1"

[mberneti]

@moesaniii unfortunately i cannot see any problem, so i can't resolve it.

[hbehkamal]

I have got same issue here and this is my code:

import React, { useMemo } from 'react';
import { useTranslate, useInput } from 'react-admin';
import DatePicker from './dp/index';
import moment from 'moment-jalaali';
import { withStyles } from '@material-ui/core';
import FormHelperText from '@material-ui/core/FormHelperText';
import lodashGet from 'lodash/get';

import './JalaliDateInput.css';
import { SERVER_DATE_FORMAT } from '../container/DateInputContainer';
import { getValue, CONFIG_CALENDAR } from '../core/configProvider';

const JalaliDateInput = props => {
  const {
    classes,
    label,
    DateInputInPuzzleForm,
    source,
    disabled,
    visibleClass,
    inputFormat,
  } = props;

  const translate = useTranslate();
  const calendarConfig = getValue(CONFIG_CALENDAR);

  const {
    input: { name, onChange, value },
    meta: { touched, error },
    isRequired,
  } = useInput(props);

  const internalValue = useMemo(() => {
    if (!value) {
      return null;
    }

      return moment(value, SERVER_DATE_FORMAT);

  }, [value]);

  const handleChange = changedDate => {
    const newValue = changedDate ? changedDate.locale('en').format(SERVER_DATE_FORMAT) : null;
    if (newValue === value) {
      return;
    }

    props.onChange(newValue);
    onChange(newValue);
  };

  return (
    <fieldset
      id={`date-picker-${source}`}
      className={`${visibleClass} datePickerContainer`}
      data-error={touched && !!error}
      data-label={!!label || label !== ''}
      data-puzzle-form={!!DateInputInPuzzleForm}
      disabled={disabled}
    >
      {label && label !== '' && <legend className={classes.legend}>{label}</legend>}
      <DatePicker
        inputFormat={inputFormat}
        onChange={handleChange}
        value={internalValue}
        disabled={disabled}
        isGregorian={calendarConfig === 'gregorian'}
        timePicker={false}
        showTodayButton={false}
      />
      {touched && !!error && (
        <FormHelperText error className={classes.error}>
          {translate(lodashGet(error, 'message', error))}
        </FormHelperText>
      )}
    </fieldset>
  );
};

JalaliDateInput.defaultProps = {
  onBlur: () => {},
  onChange: () => {},
  inputFormat: 'jYYYY-jMM-jDD',
};

export default withStyles(styles, { withTheme: true })(JalaliDateInput);

[hbehkamal]

Hello @mberneti ?