Блог

Я только начал играть с DateTimePicker из react-widgets. Значок TimerPicker отображается в виджете. Я реализовал то же самое, что указано на сайте ниже,

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

Ниже приведен мой код,

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;
 

Пользовательский ввод для fns даты ->
реагировать-виджеты-дата-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"]
}
 

Пожалуйста, помогите мне сделать это…