KendoReact DatePicker TypeError: date.getTime is not a function

Question

I got this error, but not really sure why. Can anyone help me ?

i want to take advantage of kendoreact, by using date picker input to display data in database. But when I want to display the data, what comes out is an error.

enter image description here

I make a reusable component for data picker, the code :

const detailDatePickerComponent = props => {
  const { errors, label, show, width, value = null, min, max, name, groupClass, disabled } = props;

  let propertyName = name;
  if (name.indexOf('.') !== -1) {
    const splitName = name.split('.');
    propertyName = splitName[splitName.length - 1];
  }

  return (
    <Form.Group className={groupClass}>
      <Form.Label>{label}</Form.Label>
      <DatePicker
        data-rules="haha"
        name={name}
        value={value || null}
        width={width}
        show={show}
        min={min}
        max={max}
        toggleButton={props => (
          <ToggleButton {...props} style={{ fontSize: 10 }}>
            <span className="k-icon k-i-calendar" />
          </ToggleButton>
        )}
        defaultValue={value}
        format="dd / MMMM / yyyy"
        className={errors && errors[name] && 'error'}
        disabled={disabled}
      />
      {errors &&
        (Array.isArray(errors[propertyName]?.message) ? (
          errors[propertyName]?.message.map(m => <span className="error d-block">{m.toLowerCase()}</span>)
        ) : (
          <span className="error">
            {errors[propertyName]?.message.replace(name, label?.toLowerCase() || propertyName.toLowerCase())}
          </span>
        ))}
    </Form.Group>
  );
};

and I use the component in the different file

const [data, setData] = useState([]);

  useEffect(() => {
    setLoading(true);

    CouponApi.find(id)
      .then(res => {
        setData(res);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

return (
//...code
        <div className="col-md-3">
          <DetailDatePicker name="payment_date" label="EVENT DATE" value={data.period_from} />
</div>
)

value of data.period_form : 2007-05-28T00:00:00Z

Answer 1

Try to replace value={data.period_from} with value={new Date(data.period_from)}.

I think the issue here is that kendo doesn't automatically convert string to date object so you have to do it manually before forwarding it as prop.