Antd: проблема выбора диапазона

Question

Всегда добавляю Antd TimePicker.Rangepicker. Получаю следующее исключение:

BlockquoteError: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составного) компоненты), но получил: не определено. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и имена.

Пока мой компонент:

// React
import React, { useState, useEffect } from 'react';
// Redux
import { useDispatch } from 'react-redux';
// Third party
import {
    Form, Input, DatePicker, Button, TimePicker
} from 'antd';

import 'antd/dist/antd.css';
import moment from 'moment';
// Site
import '../../CSS/TimeLogForm.css';
import timeLogService from '../../services/timeLogService.js';
import timeService from '../../services/timeService.js';
import * as calendarActions from '../../redux/actions/Tidsinmatning/CalendarActions';
import TimeLogCascaderComponent from './TimeLogCascader';

const TimeLogForm = (prop) => {
    // Form input  
    const [input, setInput] = useState({
        date: { value: moment(), validateStatus: "", help: "" },
        startTime: { value: null, validateStatus: "", help: "" },
        stopTime: { value: null, validateStatus: "", help: "" },
        timeReduction: { value: 0, validateStatus: "", help: "" },
        description: { value: null, validateStatus: "", help:"" },
        internalNote: { value: null, validateStatus: "", help: "" },
        isOverTime: false,
        isOverTimeAsHours: false
    });        
    // Alias    
    const dispatch = useDispatch();
    const { RangePicker } = TimePicker;            

    // =====================
    //     EVENTS
    // =====================
    function onChangeDate(e) {        
        console.log(e);
        setInput({ ...input, date: { ...input.date, value:e} });
    }
    function onChangeDescription(e) {          
        const { description } = input;
        description.value = e.target.value;
        if (description.value.length == 0) {
            description.validateStatus = "error";
            description.help = "Beskrivning saknas.";
        } else if (description.value.length >= 500) {
            description.validateStatus = "error";
            description.help = "Beskrivningen är för lång, använd max 500 tecken.";
        }
        else {
            description.validateStatus = "";            
        }
        setInput({ ...input, description });            
    }
    function onChangeInternalNote(e) {
        const { internalNote } = input;
        internalNote.value = e.target.value;        
        setInput({ ...input, internalNote });
    }
    function onChangeTime(value, timeString) {
        console.log(value,timeString);
    }
    async function onSubmit(e) {
        //e.preventDefault();
    }

    // =====================
    //     RENDER
    // =====================
    
    return (
        <div className="p-2">
            <Form onSubmit={onSubmit} size="small" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} layout="horizontal" >
                { /* TIME */}
                <Form.Item label="Klockslag">
                    <RangePicker />
                </Form.Item>
                { /* Date */}
                <Form.Item label="Datum">
                    <DatePicker value={input.date.value} onChange={onChangeDate} />
                </Form.Item>                
                { /* DESCRIPTION */}
                <Form.Item label="Beskrivning"
                    validateStatus={input.description.validateStatus}
                    help={input.description.validateStatus == "error" ? input.description.help : ''}>
                    <Input
                        placeholder="Beskrivning"
                        allowClear
                        value={input.description.value}
                        onChange={onChangeDescription} />
                </Form.Item>
                { /* NOTE */}
                <Form.Item label="Anteckning"
                    validateStatus={input.internalNote.validateStatus}
                    help={input.internalNote.validateStatus == "error" ? input.internalNote.help : ''}>
                    <Input
                        placeholder="Anteckning"
                        allowClear
                        value={input.internalNote.value}
                        onChange={onChangeInternalNote} />
                </Form.Item>
                <Form.Item className="">
                    <Button type="primary" className="m-2">Spara</Button>
                    <Button className="m-2">Ångra</Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default (TimeLogForm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Я обнаружил, что использовал версию 3.16 Antd, которая не поддерживала Rangepicker. Когда я перешел на версию 4, это сработало.