text: import React, { useRef, useEffect, useState } from 'react';
  import PropTypes from 'prop-types';
  import ReactDatePicker from 'react-datepicker';
  
  import { useField } from '@rocketseat/unform';
  
  import 'react-datepicker/dist/react-datepicker.css';
  
  export default function InputDate({ name, placeholder }) {
    const ref = useRef(null);
  
    const { fieldName, registerField, defaultValue, error } = useField(name);
    const [selected, setSelected] = useState(defaultValue);
  
    useEffect(() => {
      registerField({
        name: fieldName,
        ref: ref.current,
        path: 'props.selected',
        clearValue: pickerRef => {
          pickerRef.clear();
        },
      });
      // eslint-disable-next-line
    }, [ref.current, fieldName]);
  
    return (
      <>
        <ReactDatePicker
          name={fieldName}
          selected={selected}
          onChange={date => setSelected(date)}
          minDate={new Date()}
          showTimeSelect
          timeFormat="HH:mm"
          dateFormat="dd/MM/yyyy - HH:mm"
          ref={ref}
          placeholderText={placeholder}
          autoComplete="off"
        />
        {error && <span>{error}</span>}
      </>
    );
  }
  
  InputDate.propTypes = {
    name: PropTypes.string.isRequired,
    placeholder: PropTypes.string.isRequired,
  };
  