我刚刚开始使用 react-widgets 中的 DateTimePicker。TimerPicker 图标显示在小部件中。我已经实现了与以下站点中提到的相同,
https://jquense.github.io/react-widgets/api/DateTimePicker/
https://jquense.github.io/react-widgets/localization/
下面是我的代码,
应用程序.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;
日期 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"]
}
请帮我完成这件事...
