0

我刚刚开始使用 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"]
}

请帮我完成这件事...

4

0 回答 0