Last Updated: 15 Oct 2021 05:18 by ADMIN
Created on: 14 Oct 2021 17:30
Category: KendoReact
Type: Bug Report
DateTimePicker Throws Exception Opening Calendar For Invalid Date


  1. Create a DateTimePicker.
  2. Use its value prop to programmatically control the value the control uses.
  3. Add clickable Button (or other means) to programmatically set the value to an invalid date (i.e. something like new Date("invalid!").
  4. Click the Button.  The date displayed becomes "NaN/NaN/NaN 12:NaN PM".  I suppose this is reasonable.
  5. Now, click the calendar popup icon on the right-hand side of the component.


Displays a calendar popup, perhaps defaulting to the current date & time.


Throws an exception visible in the JavaScript console.  Replaces the UI with an error message.


import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
} from '@progress/kendo-react-dateinputs';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  const [date, setDate] = React.useState(new Date());

  const handleChange = (event: DateTimePickerChangeEvent) => {

  const handleClick = () => {
    setDate(new Date('invaild!'));

  return (
      <div className="example-wrapper">
          (use Alt+<code>↓</code> to open the date-time selector, <code>←</code>{' '}
          and <code>→</code> to navigate, <code>↑</code> to increment and{' '}
          <code>↓</code> to decrement the value)
        <DateTimePicker onChange={handleChange} value={date} />
      <Button onClick={handleClick}>
        Click me, then the calendar, to break the DateTimePicker.

ReactDOM.render(<App />, document.querySelector('my-app'));
Important note: This POC code uses version 4.9.0 of kendo-react-buttons.  I do not know what that translates to in terms of the "version" dropdown.  I can't tell if "2021.1.119" is applicable here.
1 comment
Posted on: 15 Oct 2021 05:18

Hello, Brent,

Thank you for the example and all of the steps.

This is expected as the component expects a valid JavaScript Date object as a value. This can be seen in the API:

Passing invalid values to the component is expected to lead to different errors. The developer has to ensure that a valid value is passed to the component.

Progress Telerik

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here -