Date type props parsed as PropTypes.shape

[sudhyr]

Date type props are generated as a PropType.shape with all member functions of the Date class.
Is there a way to parse this into a PropTypes.instanceOf(Date) propType. ?

input:

// DatePicker.d.ts
import * as React from "react";

export type DatePickerProps = {
  date: Date;
};

export default function DatePickerField(props: DatePickerProps): JSX.Element;

// DatePicker.js
import * as React from "react";

function DatePickerField(props) {
  const { date } = props;

  return (
    <React.Fragment>
      <input value={JSON.stringify(date)} />
    </React.Fragment>
  );
}

export default DatePickerField;

output:

import * as React from "react";
import PropTypes from "prop-types";

function DatePickerField(props) {
  const { date } = props;

  return (
    <React.Fragment>
      <input value={JSON.stringify(date)} />
    </React.Fragment>
  );
}

DatePickerField.propTypes = {
  date: PropTypes.shape({
    /**
     * Converts a Date object to a string.
     */
    "__@toPrimitive": PropTypes.func.isRequired,
    /**
     * Gets the day-of-the-month, using local time.
     */
    getDate: PropTypes.func.isRequired,
    /**
     * Gets the day of the week, using local time.
     */
    getDay: PropTypes.func.isRequired,
    /**
     * Gets the year, using local time.
     */
    getFullYear: PropTypes.func.isRequired,
    /**
     * Gets the hours in a date, using local time.
     */
    getHours: PropTypes.func.isRequired,
    /**
     * Gets the milliseconds of a Date, using local time.
     */
    getMilliseconds: PropTypes.func.isRequired,
    /**
     * Gets the minutes of a Date object, using local time.
     */
    getMinutes: PropTypes.func.isRequired,
    /**
     * Gets the month, using local time.
     */
    getMonth: PropTypes.func.isRequired,
    /**
     * Gets the seconds of a Date object, using local time.
     */
    getSeconds: PropTypes.func.isRequired,
    /**
     * Gets the time value in milliseconds.
     */
    getTime: PropTypes.func.isRequired,
    /**
     * Gets the difference in minutes between the time on the local computer and Universal Coordinated Time (UTC).
     */
    getTimezoneOffset: PropTypes.func.isRequired,
    /**
     * Gets the day-of-the-month, using Universal Coordinated Time (UTC).
     */
    getUTCDate: PropTypes.func.isRequired,
    /**
     * Gets the day of the week using Universal Coordinated Time (UTC).
     */
    getUTCDay: PropTypes.func.isRequired,
    /**
     * Gets the year using Universal Coordinated Time (UTC).
     */
    getUTCFullYear: PropTypes.func.isRequired,
    /**
     * Gets the hours value in a Date object using Universal Coordinated Time (UTC).
     */
    getUTCHours: PropTypes.func.isRequired,
    /**
     * Gets the milliseconds of a Date object using Universal Coordinated Time (UTC).
     */
    getUTCMilliseconds: PropTypes.func.isRequired,
    /**
     * Gets the minutes of a Date object using Universal Coordinated Time (UTC).
     */
    getUTCMinutes: PropTypes.func.isRequired,
    /**
     * Gets the month of a Date object using Universal Coordinated Time (UTC).
     */
    getUTCMonth: PropTypes.func.isRequired,
    /**
     * Gets the seconds of a Date object using Universal Coordinated Time (UTC).
     */
    getUTCSeconds: PropTypes.func.isRequired,
    /**
     * Sets the numeric day-of-the-month value of the Date object using local time.
     * @param date A numeric value equal to the day of the month.
     */
    setDate: PropTypes.func.isRequired,
    /**
     * Sets the year of the Date object using local time.
     * @param year A numeric value for the year.
     * @param month A zero-based numeric value for the month (0 for January, 11for December). Must be specified if numDate is specified.
     * @param date A numeric value equal for the day of the month.
     */
    setFullYear: PropTypes.func.isRequired,
    /**
     * Sets the hour value in the Date object using local time.
     * @param hours A numeric value equal to the hours value.
     * @param min A numeric value equal to the minutes value.
     * @param sec A numeric value equal to the seconds value.
     * @param ms A numeric value equal to the milliseconds value.
     */
    setHours: PropTypes.func.isRequired,
    /**
     * Sets the milliseconds value in the Date object using local time.
     * @param ms A numeric value equal to the millisecond value.
     */
    setMilliseconds: PropTypes.func.isRequired,
    /**
     * Sets the minutes value in the Date object using local time.
     * @param min A numeric value equal to the minutes value.
     * @param sec A numeric value equal to the seconds value.
     * @param ms A numeric value equal to the milliseconds value.
     */
    setMinutes: PropTypes.func.isRequired,
    /**
     * Sets the month value in the Date object using local time.
     * @param month A numeric value equal to the month. The value for January is 0, and other month values follow consecutively.
     * @param date A numeric value representing the day of the month. If this value is not supplied, the value from a call to the getDate method is used.
     */
    setMonth: PropTypes.func.isRequired,
    /**
     * Sets the seconds value in the Date object using local time.
     * @param sec A numeric value equal to the seconds value.
     * @param ms A numeric value equal to the milliseconds value.
     */
    setSeconds: PropTypes.func.isRequired,
    /**
     * Sets the date and time value in the Date object.
     * @param time A numeric value representing the number of elapsed milliseconds since midnight, January 1, 1970 GMT.
     */
    setTime: PropTypes.func.isRequired,
    /**
     * Sets the numeric day of the month in the Date object using Universal Coordinated Time (UTC).
     * @param date A numeric value equal to the day of the month.
     */
    setUTCDate: PropTypes.func.isRequired,
    /**
     * Sets the year value in the Date object using Universal Coordinated Time (UTC).
     * @param year A numeric value equal to the year.
     * @param month A numeric value equal to the month. The value for January is 0, and other month values follow consecutively. Must be supplied if numDate issupplied.
     * @param date A numeric value equal to the day of the month.
     */
    setUTCFullYear: PropTypes.func.isRequired,
    /**
     * Sets the hours value in the Date object using Universal Coordinated Time(UTC).
     * @param hours A numeric value equal to the hours value.
     * @param min A numeric value equal to the minutes value.
     * @param sec A numeric value equal to the seconds value.
     * @param ms A numeric value equal to the milliseconds value.
     */
    setUTCHours: PropTypes.func.isRequired,
    /**
     * Sets the milliseconds value in the Date object using Universal Coordinated Time (UTC).
     * @param ms A numeric value equal to the millisecond value.
     */
    setUTCMilliseconds: PropTypes.func.isRequired,
    /**
     * Sets the minutes value in the Date object using Universal Coordinated Time (UTC).
     * @param min A numeric value equal to the minutes value.
     * @param sec A numeric value equal to the seconds value.
     * @param ms A numeric value equal to the milliseconds value.
     */
    setUTCMinutes: PropTypes.func.isRequired,
    /**
     * Sets the month value in the Date object using Universal Coordinated Time(UTC).
     * @param month A numeric value equal to the month. The value for January is 0, and other month values follow consecutively.
     * @param date A numeric value representing the day of the month. If it is not supplied, the value from a call to the getUTCDate method is used.
     */
    setUTCMonth: PropTypes.func.isRequired,
    /**
     * Sets the seconds value in the Date object using Universal Coordinated Time (UTC).
     * @param sec A numeric value equal to the seconds value.
     * @param ms A numeric value equal to the milliseconds value.
     */
    setUTCSeconds: PropTypes.func.isRequired,
    /**
     * Returns a date as a string value.
     */
    toDateString: PropTypes.func.isRequired,
    /**
     * Returns a date as a string value in ISO format.
     */
    toISOString: PropTypes.func.isRequired,
    /**
     * Used by the JSON.stringify method to enable the transformation of an object's data for JavaScript Object Notation (JSON) serialization.
     */
    toJSON: PropTypes.func.isRequired,
    /**
     * Returns a date as a string value appropriate to the host environment's current locale.
     */
    toLocaleDateString: PropTypes.func.isRequired,
    /**
     * Returns a value as a string value appropriate to the host environment's current locale.
     */
    toLocaleString: PropTypes.func.isRequired,
    /**
     * Returns a time as a string value appropriate to the host environment's current locale.
     */
    toLocaleTimeString: PropTypes.func.isRequired,
    /**
     * Returns a string representation of a date. The format of the string depends on the locale.
     */
    toString: PropTypes.func.isRequired,
    /**
     * Returns a time as a string value.
     */
    toTimeString: PropTypes.func.isRequired,
    /**
     * Returns a date converted to a string using Universal Coordinated Time (UTC).
     */
    toUTCString: PropTypes.func.isRequired,
    /**
     * Returns the stored time value in milliseconds since midnight, January 1,1970 UTC.
     */
    valueOf: PropTypes.func.isRequired,
  }).isRequired,
};

export default DatePickerField;

expected:

import * as React from 'react';
import PropTypes from 'prop-types';

function DatePickerField(props) {
  const {
    date
  } = props;

  return ( <
    React.Fragment >
    <
    input value = {
      JSON.stringify(date)
    }
    /> <
    /React.Fragment>
  );
}

DatePickerField.propTypes = {
  date: PropTypes.instanceOf(Date)
};

export default DatePickerField;

[merceyz]

Thanks for the report, fixed in [email protected] 👍

[sudhyr]

Thanks for the quick update. 👍