Skip to main content
react-md

Native Date Field

The NativeDateField can be used as a lightweight wrapper around the TextField utilizing the useDateField hook.

Simple Example

The NativeDateField requires a name and an optional label or aria-label for accessibility.

import { NativeDateField } from "@react-md/core/datetime/NativeDateField";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  return <NativeDateField label="Date" name="date" />;
}

Press Enter to start editing.

Getting the Value

Unlike other input elements, the onChange function will only be called once the full date has been typed and will always be in the format of yyyy-mm-dd.

The defaultValue can also be provided using the yyyy-mm-dd format.

The current value is: 2025-06-15

The current value is: 

"use client";

import { box } from "@react-md/core/box/styles";
import { NativeDateField } from "@react-md/core/datetime/NativeDateField";
import { Form } from "@react-md/core/form/Form";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement, useState } from "react";

export default function GettingTheValueExample(): ReactElement {
  const [value1, setValue1] = useState("2025-06-15");
  const [value2, setValue2] = useState("");
  return (
    <Form
      className={box({ fullWidth: true, disablePadding: true, align: "start" })}
    >
      <Typography margin="none">{`The current value is: ${value1}`}</Typography>
      <NativeDateField
        label="Date"
        name="date1"
        defaultValue="2025-06-15"
        onChange={(event) => {
          setValue1(event.currentTarget.value);
        }}
      />
      <Typography margin="top">{`The current value is: ${value2}`}</Typography>
      <NativeDateField
        label="Date"
        name="date2"
        onChange={(event) => {
          setValue2(event.currentTarget.value);
        }}
      />
    </Form>
  );
}

Press Enter to start editing.

Controlling the Value

Due to how the native <input type="date"> works, the value cannot be controlled since it reduces the user experience. The onChange event fires when the user fully types all the date parts, changes any value afterwards, or removes a date part. Removing a date part would result in the input having a value of "" and wiping out the other fields which is not desired.

Try deleting the date portion in the following example to see what happens.

"use client";

import { TextField } from "@react-md/core/form/TextField";
import { type ReactElement, useState } from "react";

export default function ControllingTheValueExample(): ReactElement {
  const [value, setValue] = useState("2025-06-15");
  return (
    <TextField
      label="Date"
      type="date"
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
    />
  );
}

Press Enter to start editing.

Validation

The NativeDateField supports validation through the min, max, step, and required props. The min and max props need to be in the format of yyyy-mm-dd and the step will be shown in the specific date intervals instead.

Min and Max Date

import { Box } from "@react-md/core/box/Box";
import { box } from "@react-md/core/box/styles";
import { Button } from "@react-md/core/button/Button";
import { NativeDateField } from "@react-md/core/datetime/NativeDateField";
import { Form } from "@react-md/core/form/Form";
import { type ReactElement } from "react";

export default function MinAndMaxDateExample(): ReactElement {
  return (
    <Form className={box({ stacked: true, fullWidth: true })}>
      <NativeDateField
        label="Appointment"
        min="2025-06-01"
        max="2025-06-30"
        name="appointment"
        required
      />
      <Box align="start" fullWidth disablePadding>
        <Button type="reset" theme="warning" themeType="outline">
          Reset
        </Button>
        <Button type="submit" theme="primary" themeType="contained">
          Confirm
        </Button>
      </Box>
    </Form>
  );
}

Press Enter to start editing.

Specific Date Intervals

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.

Step attribute

import { Box } from "@react-md/core/box/Box";
import { box } from "@react-md/core/box/styles";
import { Button } from "@react-md/core/button/Button";
import { NativeDateField } from "@react-md/core/datetime/NativeDateField";
import { Form } from "@react-md/core/form/Form";
import { type ReactElement } from "react";

export default function SpecificDateIntervalsExample(): ReactElement {
  return (
    <Form className={box({ stacked: true, fullWidth: true })}>
      <NativeDateField
        label="Saturdays"
        name="date"
        step={7}
        min="2025-06-07"
      />
      <Box justify="end" fullWidth disablePadding>
        <Button type="reset" theme="warning" themeType="outline">
          Reset
        </Button>
        <Button type="submit" theme="primary" themeType="contained">
          Submit
        </Button>
      </Box>
    </Form>
  );
}

Press Enter to start editing.