0

Hello all,    I am quite new to typescript so excuse me if it is really simple, but i have the following problem when creating a pluggable widget that should give back the difference between the current date time and a mendix datetime attribute, my xml is the following:   <?xml version="1.0" encoding="utf-8"?> <widget id="cgi.countdown.CountDown" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Web" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd"> <name>Count Down</name> <description>Count down till a certain date selected</description> <icon> iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABp1BMVEUAAABV//9mzP9LtP9Ms/9Jtv9NsvdJsfpLtPpJsfdJsfhJsvhJsvdKsvdJsPhKsPhJsfdJsPhJsfdIsfhJsfdIsPdJsfhJsfhJsPhJsPhIsfhIsPdJsPdKsPdKsfdNsvdOsvdPs/dQs/dRtPdStPdTtPdUtfdWtvdXtvdauPdcuPdeufdeufhguvhiu/hju/hkvPhmvfhnvfhpvvhrv/huwPhvwfhxwfhywvhzwvh4xfl5xfl6xfl8xvl9xvl9x/mByPmCyfmFyvmGyvmJzPmKzPmLzfmNzvqPzvqQz/qT0PqU0PqU0fqX0vqY0vqa0/qe1fqg1vqj1/uk1/un2fup2vut2/uv3Puw3Puw3fuz3vu13/u23/u34Pu44Pu64fu64fy84vy94vy+4/y/4/zD5fzE5fzG5vzH5vzI5/zK6PzL6PzR6/zT7P3U7P3V7f3W7f3Y7v3Z7v3c8P3e8f3f8f3g8f3i8v3l8/3l9P3n9P3r9v7t9/7u9/7v+P7w+P7x+f7y+f70+v71+v74/P75/P76/f77/f78/f78/v79/v7+/v7////6dMsRAAAAG3RSTlMAAwURGxwhMTNic3SEh4iVp7XBzejt7vH5/f6PsMNWAAABsklEQVR4AWIYfGAUjIJRMAqYuYREJKWJAqLCPGwY+jnFpEkBEryMqPr5pEkFgkwo9kuTDviR/S9GhgFSHAgDuKXJAQIIA4TIMkAcEY4i0mQBVrgBkuQZwA43QJo8wIFhQEhEOIBQOutHJozDOP5Crp4e1RhkJ0tKGJFd6oNEdtmJyEIzpaZl5nrRZgaHM/2Pf5/vwXXfyagXgG93bwSAlEolowLMm9w83gibhXH2gKKVdD67gTnWjwCk+VVjMQS4suSnnjMLRVFc9sAHvAX2A9fySaXNBMbEZVUWscaHIMRuqwBgD8hDEbnsRmfjUKJkAQZGCTlO/xWBwIADQLIZBlY441MvfoF1xlFS/4fy+bzXKh4dgNJE7L3eh3tmtuWa+AMcMIY3dgUvZQpGEYmMw2kD7HC+R29UqyoXLaBd0QZxzgXgikLLDSqJTKU5HOcS0MsbA9jPqtwCRvXm2eorBbNIJBw3KJ9O4Yl+AAXdnyaLt7PWN3jRWLvzmAVp94zO5+n41/onfo/UpExxZqI0O7NQr0DhIq9Io7hQpbRYp7hiobRqo6ByFcNWuY6CUTAKRgEAo8X0lBD3V30AAAAASUVORK5CYII= </icon> <properties> <propertyGroup caption="General"> <property key="valueAttribute" type="attribute" required="false"> <caption>Value attribute</caption> <description>The attribute that contains the countdown value</description> <attributeTypes> <attributeType name="DateTime"/> </attributeTypes> </property> <property key="countdownValue" type="string" required="false"> <caption>Default value</caption> <description>The countdown value shown when no value is provided via the attribute</description> </property> </propertyGroup> </properties> </widget> This works in the modeller i can select an attribute of datetime, however in my typescript I try to use the attribute to calculate the difference but here it is raising an error see the added typescript snippet, how can i solve this error so that the function get the right datetime.   import { Component, ReactNode, createElement } from "react"; import { CountDownContainerProps } from "../typings/CountDownProps"; import { CountDownSample } from "./components/BadgeSample"; import { intervalToDuration } from 'date-fns'; // Import the format function from date-fns import "./ui/CountDown.css"; export class CountDown extends Component<CountDownContainerProps> { private intervalId: NodeJS.Timeout | null = null; // Lifecycle method to initialize the widget componentDidMount() { this.updateDateTime(); this.intervalId = setInterval(this.updateDateTime, 1000); } // Lifecycle method to clean up the interval on unmount componentWillUnmount() { if (this.intervalId !== null) { clearInterval(this.intervalId); } } // Function to update the date and time updateDateTime = () => { const date = this.props.valueAttribute?.value; const now = new Date(); const duration = intervalToDuration({ start: now, end: date }); // Access the DOM element using the ref attribute or any other method const datetimeElement = document.getElementById("datetime"); if (datetimeElement) { datetimeElement.textContent = JSON.stringify(duration); } };   Thank you in advance

asked 2024-01-15

0 answers