0

I have just started playing with DateTimePicker from react-widgets. TimerPicker icon is displayed in the widget. I have implemented the same as mentioned in the below site,

https://jquense.github.io/react-widgets/api/DateTimePicker/
https://jquense.github.io/react-widgets/localization/

enter image description here

Below is my code,

App.tsx

/** @format */

import { useContext, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { activityStoreContext } from '../src/stores/activityStore';
import dateFnsLocalizer from 'react-widgets-date-fns';

// Add the css styles...
import 'react-widgets/dist/css/react-widgets.css';
import DateTimePicker from 'react-widgets/lib/DateTimePicker';

new dateFnsLocalizer();

const App = observer(({ messages, ...rest }: any) => {
    const activityStore = useContext(activityStoreContext);

    useEffect(() => {
        activityStore.loadActivities();
    }, [activityStore]);

    return (
        <div>
            <div>
                <DateTimePicker
                    messages={messages}
                    {...rest}
                    defaultValue={new Date()}
                    date={true}
                    time={true}
                />
            </div>
        </div>
    );
});

export default App;

Custom typing for date fns -> react-widgets-date-fns.d.ts

declare module 'react-widgets-date-fns';

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "experimentalDecorators": true,
        "useDefineForClassFields": true
    },
    "include": ["src", "../react-sample/src/*.ts"]
}

Please help me to get this done...

  • I had this problem today too. It looks like it might be a version issue. Rolling back to an older version of react-widgets fixed it for me: `npm uninstall react-widgets` `npm install --save react-widgets@4.6.1` – RobEW Jan 08 '21 at 12:01
  • @RobEW, I tried your suggestion and getting a date localization error. Can you please suggest the react-widgets-date-fns version you installed for react-widgets@4.6.1 – xaviourprakash Jan 08 '21 at 16:25
  • sorry, I was in a rush to deploy and didn't have time to set up localization so I ended up using a different Date Time picker https://www.npmjs.com/package/react-datetime – RobEW Jan 11 '21 at 17:45

0 Answers0