DatePicker

A date picker, popup calendar or date range picker is a graphical user interface widget which allows the user to select a date from a calendar.

Source Code

uikit-react-core

Actions

Use the showActions property to display Apply/Cancel buttons at the bottom.

Date

<HvDatePicker
  showActions
  value={new Date("1970-02-03")}
  placeholder="Select date"
  label="Date"
  className="w-fit"
/>

<HvDatePicker
  showActions
  value={new Date("1970-02-03")}
  placeholder="Select date"
  label="Date"
  className="w-fit"
/>

Custom labels

Use the labels object to customize the internal labels of the date picker.

This is the title for the date picker

<HvDatePicker
  showActions
  label="This is the title for the date picker"
  placeholder="Custom placeholder"
  className="w-fit"
  labels={{
    applyLabel: "Custom apply",
    cancelLabel: "Custom cancel",
    clearLabel: "Custom clear",
    invalidDateLabel: "Custom invalid",
  }}
/>

<HvDatePicker
  showActions
  label="This is the title for the date picker"
  placeholder="Custom placeholder"
  className="w-fit"
  labels={{
    applyLabel: "Custom apply",
    cancelLabel: "Custom cancel",
    clearLabel: "Custom clear",
    invalidDateLabel: "Custom invalid",
  }}
/>

Controlled

import { useState } from "react";


export default function Demo() {
  const [date, setDate] = useState(new Date("2020-01-02"));
  const [open, setOpen] = useState(false);


  const addDay = () => {
    if (!date) return;
    setDate(new Date(date.setDate(date.getDate() + 1)));
  };


  const toggleOpen = () => setOpen((o) => !o);


  return (
    <div className="flex gap-sm">
      <HvDatePicker
        className="flex-1"
        expanded={open}
        aria-label="Date"
        placeholder="Select date"
        value={date}
        onChange={(d) => setDate(d!)}
        onToggle={toggleOpen}
      />
      <HvButton variant="secondarySubtle" onClick={addDay}>
        +1 Day
      </HvButton>
      <HvButton variant="secondarySubtle" onClick={toggleOpen}>
        {open ? "Close" : "Open"}
      </HvButton>
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [date, setDate] = useState(new Date("2020-01-02"));
  const [open, setOpen] = useState(false);

  const addDay = () => {
    if (!date) return;
    setDate(new Date(date.setDate(date.getDate() + 1)));
  };

  const toggleOpen = () => setOpen((o) => !o);

  return (
    <div className="flex gap-sm">
      <HvDatePicker
        className="flex-1"
        expanded={open}
        aria-label="Date"
        placeholder="Select date"
        value={date}
        onChange={(d) => setDate(d!)}
        onToggle={toggleOpen}
      />
      <HvButton variant="secondarySubtle" onClick={addDay}>
        +1 Day
      </HvButton>
      <HvButton variant="secondarySubtle" onClick={toggleOpen}>
        {open ? "Close" : "Open"}
      </HvButton>
    </div>
  );
}

Range mode

Use rangeMode to enable the selection of a range of dates. When doing so, use startValue and endValue to set the initial values, instead of the value prop.

Date

<HvDatePicker
  label="Date"
  placeholder="Select a range"
  rangeMode
  startValue={new Date("2020-02-02")}
  endValue={new Date("2020-02-10")}
/>

<HvDatePicker
  label="Date"
  placeholder="Select a range"
  rangeMode
  startValue={new Date("2020-02-02")}
  endValue={new Date("2020-02-10")}
/>

Restricted selection

You can restrict the selection of dates by setting the minimumDate and maximumDate properties.

Date

<HvDatePicker
  label="Date"
  placeholder="Select date"
  value={new Date("2020-01-15")}
  calendarProps={{
    minimumDate: new Date("2020-01-10"),
    maximumDate: new Date("2020-01-20"),
  }}
/>

<HvDatePicker
  label="Date"
  placeholder="Select date"
  value={new Date("2020-01-15")}
  calendarProps={{
    minimumDate: new Date("2020-01-10"),
    maximumDate: new Date("2020-01-20"),
  }}
/>

Selection list

Custom content can be added to the Date Picker by using the startAdornment property. This can be used to display a list of predefined dates, for example.

Date

import { useState } from "react";


export default function Demo() {
  const [date, setDate] = useState(new Date("2020-09-05"));


  const options = (
    <HvListContainer interactive role="menu" className="min-w-100px">
      <HvListItem role="menuitem" disabled>
        Today
      </HvListItem>
      <HvListItem role="menuitem" disabled>
        Yesterday
      </HvListItem>
      <HvListItem
        role="menuitem"
        onClick={() => {
          setDate((d) => {
            const newDate = new Date(d);
            newDate.setDate(1);
            return newDate;
          });
        }}
      >
        Start of the month
      </HvListItem>
      <HvListItem
        role="menuitem"
        onClick={() => {
          setDate((d) => {
            const newDate = new Date(d);
            newDate.setDate(1);
            newDate.setMonth(0);
            return newDate;
          });
        }}
      >
        Start of year
      </HvListItem>
    </HvListContainer>
  );


  return (
    <HvDatePicker
      label="Date"
      startAdornment={<HvPanel>{options}</HvPanel>}
      value={date}
      onChange={(newDate) => setDate(newDate)}
    />
  );
}

import { useState } from "react";

export default function Demo() {
  const [date, setDate] = useState(new Date("2020-09-05"));

  const options = (
    <HvListContainer interactive role="menu" className="min-w-100px">
      <HvListItem role="menuitem" disabled>
        Today
      </HvListItem>
      <HvListItem role="menuitem" disabled>
        Yesterday
      </HvListItem>
      <HvListItem
        role="menuitem"
        onClick={() => {
          setDate((d) => {
            const newDate = new Date(d);
            newDate.setDate(1);
            return newDate;
          });
        }}
      >
        Start of the month
      </HvListItem>
      <HvListItem
        role="menuitem"
        onClick={() => {
          setDate((d) => {
            const newDate = new Date(d);
            newDate.setDate(1);
            newDate.setMonth(0);
            return newDate;
          });
        }}
      >
        Start of year
      </HvListItem>
    </HvListContainer>
  );

  return (
    <HvDatePicker
      label="Date"
      startAdornment={<HvPanel>{options}</HvPanel>}
      value={date}
      onChange={(newDate) => setDate(newDate)}
    />
  );
}

DatePicker

Actions

Custom labels

Controlled

Range mode

Restricted selection

Selection list

Related components