FormDatepicker

Basic

Preview
Code

Date of birth

<FormDatepicker label="Date of birth" />

Disabled

Preview
Code

Date of birth

<FormDatepicker disabled={true} label="Date of birth" />

Controlled

Preview
Code

Date of birth

Value:

Date of birth

Value: 2024-06-20

import { useState } from "react";
import FormDatepicker from "@/ui/FormDatepicker";

const Controlled = () => {
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("2024-06-20");

  return (
    <div className="flex flex-col gap-6">
      <div>
        <FormDatepicker
          value={value1}
          label="Date of birth"
          onChange={setValue1}
        />

        <p>Value: {value1}</p>
      </div>

      <div>
        <FormDatepicker
          value={value2}
          label="Date of birth"
          onChange={setValue2}
        />

        <p>Value: {value2}</p>
      </div>
    </div>
  );
};

export default Controlled;

Uncontrolled (with `<form>`)

Preview
Code

Date of birth*

Date of graduation

formDataObj:

import { useState, type FormEventHandler } from "react";
import FormDatepicker from "@/ui/FormDatepicker";

const Uncontrolled = () => {
  const [formDataObj, setFormDataObj] =
    useState<Record<string, FormDataEntryValue>>();

  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    const updates = Object.fromEntries(formData);

    setFormDataObj(updates);
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-6">
      <FormDatepicker required name="dateOfBirth" label="Date of birth" />

      <FormDatepicker
        name="dateOfGraduation"
        defaultValue="2024-06-20"
        label="Date of graduation"
      />

      <button type="submit" className="border">
        Submit
      </button>

      <p>formDataObj: {JSON.stringify(formDataObj)}</p>
    </form>
  );
};

export default Uncontrolled;

FormDatepicker

Basic

Disabled

Controlled

Uncontrolled (with <form>)

Uncontrolled (with `<form>`)