DateTimePicker

Date time picker control.

Example

mai 1989

Heure

import { useState } from "react";
import { Button } from "swash/Button";
import { DateTimePicker } from "swash/controls/DateTimePicker";

export const Example = () => {
  const initialValue = { date: "1989-05-21", time: "02:00:00" };
  const [value, setValue] = useState(initialValue);

  return (
    <div className="flex items-center gap-3">
      <DateTimePicker value={value} onChange={setValue} />
      <Button type="button" onClick={() => setValue(initialValue)}>
        Reset
      </Button>
    </div>
  );
};

Disable past

Use disablePast prop to prevent selecting a date in the past.

mai 1989

Heure

import { useState } from "react";
import { Button } from "swash/Button";
import { DateTimePicker } from "swash/controls/DateTimePicker";

export const Example = () => {
  const initialValue = { date: "1989-05-21", time: "02:00:00" };
  const [value, setValue] = useState(initialValue);

  return (
    <div className="flex items-center gap-3">
      <DateTimePicker value={value} onChange={setValue} disablePast/>
      <Button type="button" onClick={() => setValue(initialValue)}>
        Reset
      </Button>
    </div>
  );
};

Disabled

Use disabled prop to disable control.

mai 1989

Heure

import { useState } from "react";
import { Button } from "swash/Button";
import { DateTimePicker } from "swash/controls/DateTimePicker";

export const Example = () => {
  const initialValue = { date: "1989-05-21", time: "02:00:00" };
  const [value, setValue] = useState(initialValue);

  return (
    <div className="flex items-center gap-3">
      <DateTimePicker value={value} onChange={setValue} disabled/>
      <Button type="button" onClick={() => setValue(initialValue)}>
        Reset
      </Button>
    </div>
  );
};

API

Props

React props	Value(s)	Description
`value`	`string / null`	Actual field value.
`onChange`	`(value: string) => void`	Triggered when the date changes.