# KendoUI React DatePicker Input Doesn't Behave Correctly On Ignition Custom Module

**URL:** <https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331>\
**Category:** Module Development\
**Tags:** ignition81, perspective\
**Created:** [October 9, 2025, 10:34pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331 "2025-10-09T22:34:03Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gunawan\_Hadikusumo](https://avatars.discourse-cdn.com/v4/letter/g/c57346/32.png) [@Gunawan\_Hadikusumo](https://forum.inductiveautomation.com/u/Gunawan_Hadikusumo)\
**Post date:** [October 9, 2025, 10:34pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/1 "2025-10-09T22:34:03Z")

</div>

I am doing R&D to see the possibility the integration between KendoUI React components into Ignition Perspective Custom Module. In my scenario i am going to show the **description** and the **input box** with DatePicker popup window icon.

The structure of the props to be fed into my perspective custom module can be seen on below interface declaration:

**ISingleInputCalendarProps.tsx**

```typescript
export interface ISingleInputCalendarProps {
    id: string;
    parameters: {
        description:string,
    };
    values:{
        default:Date,
    };
}

```

This is how my component look like:

**SingleInputCalendar.tsx**

```typescript
import * as React from 'react';
import { ISingleInputCalendarProps } from '../interfaces/ISingleInputCalendarProps'
import { DatePicker, DatePickerChangeEvent } from '@progress/kendo-react-dateinputs';
import { Label } from '@progress/kendo-react-labels';

// Functional Component
export const SingleInputCalendarComponent: React.FC<ISingleInputCalendarProps> = ({id,parameters,values}) => {
    const [value, setValue] = React.useState<Date | null>(new Date());
    const min = new Date(2025, 0, 1);
    const max = new Date(2030, 11, 31);

    const changeDate = (event: DatePickerChangeEvent) => {
        setValue(event.value);
    };

    React.useEffect(() => {
     //setDate(values.default);
  }, []);

  return (
     <div style={{"width":"auto"} as React.CSSProperties}>
        <Label>{parameters.description}</Label>
        <DatePicker id="date" value={value} min={min} max={max} onChange={changeDate} defaultShow/>
     </div>
  );
};

```

I clean up a little bit the main code from the Ignition github sample:

**Messenger.tsx**

```typescript
/**
 * Example of a component that utilizes the ComponentStoreDelegate API to send and receive payload-containing messages
 * between the browser's instance of a component/store and the Gateway's model.
 *
 * This is the Client-Side implementation of a ComponentStoreDelegate. The API provides a convenient way to send
 * messages over the websocket established by the Perspective runtime. A mirror API on the Gateway provides a
 * corresponding opportunity to send/receive messages from the Gateway. Together, they provide a seamless 'realtime'
 * message channel for sending state to/from your client stores and server models.
 */

import * as React from 'react';
import {
    Component,
    ComponentMeta,
    ComponentProps,
    PComponent,
    PropertyTree,
    SizeObject
} from '@inductiveautomation/perspective-client';
import { ISingleInputCalendarProps } from './../interfaces/ISingleInputCalendarProps'
import { SingleInputCalendarComponent } from './SingleInputCalendar'
// The 'key' or 'id' for this component type. Component must be registered with this EXACT key in the Java side as well
// as on the client side. In the client, this is done in the index file where we import and register through the
// ComponentRegistry provided by the perspective-client API.
export const COMPONENT_TYPE = "au.com.deloitte.srt.modules.common.component.display.messenger";

/**
 * Name of the message config prop defined in the json schema defined in common/src/main/resources/messenger.props.json
 */
interface resultPropConfig {
    data:[];
}

/**
 * ComponentStoreDelegate provides a way to communicate with a Gateway side implementation of ComponentModelDelegate.
 * Communication is done over Perspective's websocket connection. Incoming messages are mapped to implemented handlers
 * in the abstract method `handleEvent`. The ComponentStoreDelegate can also be used to store local state if needed.
 *
 * Tip: Avoid frequently sending large payloads over the websocket connection. The websocket connection is
 * the primary way the front-end communicates with the backend (Gateway). Sending large payloads often will cause traffic
 * over the network potentially slowing other tasks relying on communication. Consider fetching the payload of a websocket
 * message over HTTP instead to help alleviate some websocket traffic for large and frequent payloads.
 *
 * Since the ComponentStoreDelegate is intended to be paired with a corresponding Perspective component implementation,
 * its state, if any, is meant to be passed to the paired component via the component's `props`. This is done by invoking
 * `mapStateToProps` of the ComponentStoreDelegate by the paired component's Higher Order Component (HOC)
 * once the delegate notifies listeners of state change.
 *
 * The MessageComponentGateway delegate inherits these methods from the ComponentStoreDelegate abstract class:
 *
 * @method `public subscribe(listener: Function): Function` - public methods used by listeners to subscribe to state changes or notifications.
 * Returns a disposer function that should be use to unsubscribe and remove reference to the listener. Use this to prevent memory leaks where necessary.
 * @method `protected notify(): void` - called by the delegate as a means to notify any subscribed listeners of state changes. Listeners will then read the new values.
 * @method `abstract handleEvent(eventName: string, eventObject: PlainObject): void` - receives model events from the Gateway side delegate over the websocket connection.
 * @method `fireEvent(eventName: string, eventObject: PlainObject): void` - fires model event that is received by the Gateway side delegate over the websocket connection.
 * @method `mapStateToProps(): PlainObject` - invoked by the HOC wrapper component to map any delegate state to component props when the HOC is notified of state changes.
 *
 */

export class MessengerComponent extends Component<ComponentProps<resultPropConfig>, {}> {

    rootElementRef: Element | void;

    componentDidMount() {
        // If a reference to the root element is needed, it can be achieved using `this.props.store.element` after the
        // component has mounted.
        this.rootElementRef = this.props.store.element;
    }

    render() {
        const singleInputCalendarProps:ISingleInputCalendarProps = {
            id: "31",
            parameters: {
                description: "When is your birth day ?"
            },
            values:{
                default:new Date()
           }
        }
        return (
            <>
                <SingleInputCalendarComponent id="{singleInputCalendarProps.id}" parameters={singleInputCalendarProps.parameters} values={singleInputCalendarProps.values}/>
            </>
        );
    }
}

// This is the actual thing that gets registered with the component registry.
export class MessengerComponentMeta implements ComponentMeta {

    getComponentType(): string {
        return COMPONENT_TYPE;
    }

    getDefaultSize(): SizeObject {
        return ({
            width: 250,
            height: 250
        });
    }

    getViewComponent(): PComponent {
        return MessengerComponent;

    }

    getPropsReducer(tree: PropertyTree): resultPropConfig {
        return {
            data:tree.read("data"),
        };
    }
}

```

I don’t have any problem during the compilation but when i run this thing, it loose its popup calendar. But still can type something on it.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/4/d468aaae93d90a23da2add30c8f41075d7f29dbb.png)

If i look at the KendoUI website, the calendar icon is shown on the right side and popup calendar appears as the user click on that icon.

[https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/3/73f9e5c1faaa9c4a316b01051b0919dff686c1e5.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 9, 2025, 10:44pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/2 "2025-10-09T22:44:53Z")

</div>

"Fail" is not a very helpful description of a problem. What's actually wrong?

---

<div class="post-metadata">

**Author:** ![Gunawan\_Hadikusumo](https://avatars.discourse-cdn.com/v4/letter/g/c57346/32.png) [@Gunawan\_Hadikusumo](https://forum.inductiveautomation.com/u/Gunawan_Hadikusumo)\
**Post date:** [October 9, 2025, 10:46pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/3 "2025-10-09T22:46:37Z")

</div>

give me second to construct the wording. There is no option to save it as DRAFT.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 10, 2025, 1:52pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/4 "2025-10-10T13:52:46Z")

</div>

Are there any CCS resources that need to be imported?

---

<div class="post-metadata">

**Author:** ![Gunawan\_Hadikusumo](https://avatars.discourse-cdn.com/v4/letter/g/c57346/32.png) [@Gunawan\_Hadikusumo](https://forum.inductiveautomation.com/u/Gunawan_Hadikusumo)\
**Post date:** [October 15, 2025, 9:45pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/5 "2025-10-15T21:45:44Z")

</div>

Thank you for replying. But i don’t think i need to add any extra css to be imported. If you see the sample code from KendoUI link below.

[https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/adaptive-rendering](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/adaptive-rendering)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5f88b0a6b8f7b6a5e8e68a971d5e4cc658786ede.png)

I believe by default when we use kendo-ui components its automatically provides everything we need.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 15, 2025, 9:49pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/6 "2025-10-15T21:49:28Z")

</div>

> **[React Using in Existing React Project - KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/add-to-existing-project)**
>
> Get started with KendoReact by adding the components to existing React project.

> To style the Editor, install and import the [Default theme](https://www.telerik.com/design-system/docs/themes/kendo-themes/default/), which is one of the [three beautiful themes](https://www.telerik.com/kendo-react-ui/components/styling) for KendoReact.3.1. Install the Default theme package.
> 
> ```sh
> npm i @progress/kendo-theme-default
> 
> ```
> 
> Import the CSS file from the package in `src/App.tsx`. Add this import before your existing `App.css` import.
> 
> ```jsx
> import '@progress/kendo-theme-default/dist/all.css';
> 
> ```

---

<div class="post-metadata">

**Author:** ![Gunawan\_Hadikusumo](https://avatars.discourse-cdn.com/v4/letter/g/c57346/32.png) [@Gunawan\_Hadikusumo](https://forum.inductiveautomation.com/u/Gunawan_Hadikusumo)\
**Post date:** [October 19, 2025, 11:29pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/7 "2025-10-19T23:29:52Z")

</div>

Thanks for responding and sorry for the delay from my side due a lot of other work to be done.

Basically i had done what you suggested based on the telerik website to download the necessary css. But still got an issue.

If you look at the following code below, i had imported everything from telerik (the css and dateinput components).

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/b/bb28e962ab554a740c28836924582c23eb4361ae.png)

**ISingleInputCalendar.tsx**

```typescript
import * as React from 'react';
import '@progress/kendo-theme-default/dist/all.css';
import { ISingleInputCalendarProps } from '../interfaces/ISingleInputCalendarProps'
import { DatePicker } from '@progress/kendo-react-dateinputs';

// Functional Component
export const SingleInputCalendarComponent: React.FC<ISingleInputCalendarProps> = ({id,parameters,values}) => {
  const defaultValue = new Date();
  React.useEffect(() => {

  }, []);

  return (
     <div style={{"border":"solid 2px #a9a9a9","width":"100%"} as React.CSSProperties}>
        <div style={{"display":"inline-block","width":"80%"} as React.CSSProperties}>
            <p style={{"font-family":"arial","font-size":"12pt","font-weight":"bold"} as React.CSSProperties}>{parameters.description}</p>
        </div>
        <div style={{"display":"inline-block","width":"20%","text-align":"right"} as React.CSSProperties}>
            {/*}<h1>DatePicker Here</h1>*/}
            <DatePicker defaultValue={defaultValue} label="Select date" adaptive={true} adaptiveSubtitle={'MM/DD/YYYY'}/>
        </div>
     </div>
  );
};

```

The compilation ran perfectly without any error at all. Then i went to Ignition designer , trying to drag my custom component on the container but then i got the error as seen below:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/4/14932ba5f60d198dd520cacb256a991730e221dd.png)

To identify what actually triggered the issues, i commented all KendoUI references and on rendering i also commented the KendoUI DatePicker component declaration. I just replaced it with simple working “DATE PICKER HERE”.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/0/9094a17bc960481e1a911a17f12fdcd307340954.png)

And i went to the designer again, try to drag my custom component to my container….it worked … no errors.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1e6922c22a653b6231c75eb121313109096a4111.png)

Has anyone ever tried to integrate KendoUI React component inside Ignition Scada Custom module for perspective before ?

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 19, 2025, 11:57pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/8 "2025-10-19T23:57:13Z")

</div>

> [@Gunawan\_Hadikusumo](#):
>
> error as seen below

It’d be more meaningful if you could post some logs or actual errors 🤷🏻‍♂️

---

<div class="post-metadata">

**Author:** ![Gunawan\_Hadikusumo](https://avatars.discourse-cdn.com/v4/letter/g/c57346/32.png) [@Gunawan\_Hadikusumo](https://forum.inductiveautomation.com/u/Gunawan_Hadikusumo)\
**Post date:** [October 20, 2025, 12:06am UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/9 "2025-10-20T00:06:01Z")

</div>

I am not sure where to get the error log from Ignition Designer but i can give you the error log from Edge Browser when i ran it.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/1/a1a0f4ba43bc2f6b3e56e6b979305a5862542cb4.png)

---

<div class="post-metadata">

**Author:** ![Gunawan\_Hadikusumo](https://avatars.discourse-cdn.com/v4/letter/g/c57346/32.png) [@Gunawan\_Hadikusumo](https://forum.inductiveautomation.com/u/Gunawan_Hadikusumo)\
**Post date:** [October 20, 2025, 12:10am UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/10 "2025-10-20T00:10:13Z")

</div>

Perhaps this is the error log you meant.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e44793418f04824e68399ceee1a8f4ff50b47cd5.png)

---

<div class="post-metadata">

**Author:** ![Gunawan\_Hadikusumo](https://avatars.discourse-cdn.com/v4/letter/g/c57346/32.png) [@Gunawan\_Hadikusumo](https://forum.inductiveautomation.com/u/Gunawan_Hadikusumo)\
**Post date:** [October 20, 2025, 12:19am UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/11 "2025-10-20T00:19:31Z")

</div>

The fact is i do have **Messenger.**

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d08a5980e69ef15c09c50ae0bb5eb22e7a8d1011.png)

---

<div class="post-metadata">

**Author:** ![Gunawan\_Hadikusumo](https://avatars.discourse-cdn.com/v4/letter/g/c57346/32.png) [@Gunawan\_Hadikusumo](https://forum.inductiveautomation.com/u/Gunawan_Hadikusumo)\
**Post date:** [October 20, 2025, 1:59am UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/12 "2025-10-20T01:59:55Z")

</div>

If i commented the css reference (line 2, highlighted)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9ec5c5dab18cfd2c52810adb24cbb461f584c866.png)

The date picker appears but not reacting. The **select date** is supposed to be an calendar icon.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea9ac530150fb323578992138b810355fc9224da.png)

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 20, 2025, 2:13am UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/13 "2025-10-20T02:13:42Z")

</div>

Trying to help with the information you’re providing is like trying to do blindfolded surgery on an alien through a fence with a pair of broken chopsticks.

Until there are some meaningful logs or error messages posted, I’m gonna step out from this thread.

---

<div class="post-metadata">

**Author:** ![Gunawan\_Hadikusumo](https://avatars.discourse-cdn.com/v4/letter/g/c57346/32.png) [@Gunawan\_Hadikusumo](https://forum.inductiveautomation.com/u/Gunawan_Hadikusumo)\
**Post date:** [October 22, 2025, 9:33pm UTC](https://forum.inductiveautomation.com/t/kendoui-react-datepicker-input-doesnt-behave-correctly-on-ignition-custom-module/111331/14 "2025-10-22T21:33:28Z")

</div>

It turned out that i had to update the tslib to the latest. Then copy the stylesheet into from kendoui **all.css** into ignition resource web client **main.scss**.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/d/9d375a6586cebcb4ea4c38d743c7b42151e539d9.png)

So basically i created kendo-ui.scss on the web package client section, copy the content of all.css and paste onto it. Then i modified **main.scss** to import that new scss file.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/e/7e2ffcf1710516415b5d895ece5bf461c7b89894.png)