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/
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...