DateTimePicker

Date time picker control.

Example

import { x } from "@xstyled/styled-components";
import { useState } from "react";
import { Button } from "swash/Button";
import { DateTimePicker } from "swash/controls/DateTimePicker";

function Example() {
  const initialValue = { date: "1989-05-21", time: "02:00:00" };
  const [value, setValue] = useState(initialValue);
  return (
    <x.div display="flex" gap={3} alignItems="center">
      <DateTimePicker value={value} onChange={setValue} />
      <Button type="button" onClick={() => setValue(initialValue)}>
        Reset
      </Button>
    </x.div>
  );
}

render(<Example />);

Disable past

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

import { x } from "@xstyled/styled-components";
import { format as formatDate, parse as parseDate } from "date-fns";
import { useState } from "react";
import { Button } from "swash/Button";
import { DateTimePicker } from "swash/controls/DateTimePicker";

function Example() {
  const now = new Date();
  const initialValue = {
    date: formatDate(now, "yyyy-MM-dd"),
    time: formatDate(now, "HH:mm"),
  };
  const [value, setValue] = useState(initialValue);
  return (
    <x.div display="flex" gap={3} alignItems="center">
      <DateTimePicker value={value} onChange={setValue} disablePast />
      <Button type="button" onClick={() => setValue(initialValue)}>
        Reset
      </Button>
    </x.div>
  );
}

render(<Example />);

Disabled

Use disabled prop to disable control.

import { x } from "@xstyled/styled-components";
import { useState } from "react";
import { Button } from "swash/Button";
import { DateTimePicker } from "swash/controls/DateTimePicker";

function Example() {
  const initialValue = { date: "1989-05-21", time: "02:00:00" };
  const [value, setValue] = useState(initialValue);
  return (
    <x.div display="flex" gap={3} alignItems="center">
      <DateTimePicker value={value} onChange={setValue} disabled />
      <Button type="button" onClick={() => setValue(initialValue)}>
        Reset
      </Button>
    </x.div>
  );
}

render(<Example />);

API

Props