Skip to main content
react-md

useDateField 

export function useDateField(
  options: DateFieldOptions
): ValidatedDateFieldImplementation;

The useDateField is a small wrapper around the useTextField to be used with <input type="date" />. It is used in the NativeDateField if an example implementation would like to be seen.

Example Usage

function Example() {
  const { value, fieldProps } = useDateField({
    name: "delivery",
    required: true,
    min: "2025-01-01",
    max: "2026-01-01",
  });

  // value: `""` or `"yyyy-mm-dd"`

  return <TextField label="Delivery Date" {...fieldProps} />;
}

Parameters

export interface DateFieldOptions
  extends Omit<
      TextFieldHookOptions,
      | "isNumber"
      | "counter"
      | "pattern"
      | "maxLength"
      | "minLength"
      | "disableMaxLength"
    >,
    DateFieldConstraints {}

export interface DateFieldConstraints {
  /**
   * This **must** be in the format `yyyy-mm-dd`
   *
   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#min | min attribute}
   */
  min?: string;

  /**
   * This **must** be in the format `yyyy-mm-dd`
   *
   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#max | max attribute}
   */
  max?: string;

  /**
   * For date inputs, the value of step is given in days; and is treated as a
   * number of milliseconds equal to 86,400,000 times the step value (the
   * underlying numeric value is in milliseconds). The default value of step is
   * 1, indicating 1 day.
   *
   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#step | step attribute}
   */
  step?: number | "any";
}

Returns

The return type has the following shape, but changes depending on the provided options. Just know that it is always save to pass the fieldProps to the TextField component.

export interface ProvidedDateFieldMessageProps extends ProvidedDateFieldProps {
  /**
   * These props will be defined as long as the `disableMessage` prop is not
   * `true` from the `useTextField` hook.
   */
  messageProps: ProvidedFormMessageProps;
}

/** @since 6.3.0 */
export interface DateFieldImplementation
  extends Omit<TextFieldImplementation, "fieldProps"> {
  fieldProps: ProvidedDateFieldProps;
}

/** @since 6.3.0 */
export interface DateFieldWithMessageImplementation
  extends Omit<TextFieldWithMessageImplementation, "fieldProps"> {
  fieldProps: ProvidedDateFieldMessageProps;
}

/** @since 6.3.0 */
export interface ValidatedDateFieldImplementation
  extends DateFieldImplementation {
  fieldProps: ProvidedDateFieldProps | ProvidedDateFieldMessageProps;
}

See Also