Datepicker

Reference

The <Datepicker /> component is a date picker that allows the user to select a single date or a range of dates.

startDate, endDate, disablePastFrom and disableFutureFrom are expected to be in the UTC Date format.

Usage

Single date Datepicker with locale

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      locale={navigator.language}
    />
  );
});render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      locale={navigator.language}
    />
  );
});

Range date Datepicker

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();

  const onSelectRange = (startDate, endDate) => {
    console.log({ startDate, endDate });
  };

  return (
    <Datepicker
      type="range"
      startDate={startDate}
      endDate={endDate}
      onSelectRange={onSelectRange}
    />
  );
});render(() => {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();

  const onSelectRange = (startDate, endDate) => {
    console.log({ startDate, endDate });
  };

  return (
    <Datepicker
      type="range"
      startDate={startDate}
      endDate={endDate}
      onSelectRange={onSelectRange}
    />
  );
});

Range date Datepicker with custom onSelectRange

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();

  const onCustomSelectRange = selectedDate => {
    console.log({ selectedDate });
    if (!startDate || (startDate > selectedDate && !endDate) || endDate) {
      setStartDate(selectedDate);
      if (endDate) setEndDate(undefined);
    } else {
      setEndDate(selectedDate);
    }
  };

  return (
    <Datepicker
      type="range"
      startDate={startDate}
      endDate={endDate}
      customOnSelectRange={onCustomSelectRange}
    />
  );
});render(() => {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();

  const onCustomSelectRange = selectedDate => {
    console.log({ selectedDate });
    if (!startDate || (startDate > selectedDate && !endDate) || endDate) {
      setStartDate(selectedDate);
      if (endDate) setEndDate(undefined);
    } else {
      setEndDate(selectedDate);
    }
  };

  return (
    <Datepicker
      type="range"
      startDate={startDate}
      endDate={endDate}
      customOnSelectRange={onCustomSelectRange}
    />
  );
});

Single Datepicker with default selected date

import { Datepicker } from '@gympass/yoga';

render(() => {
  const d = new Date();
  const dateUTC = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  d.setDate(dateUTC.getDate() + 2);
  const [selectedDate, setSelectedDate] = useState(dateUTC);

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
    />
  );
});render(() => {
  const d = new Date();
  const dateUTC = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  d.setDate(dateUTC.getDate() + 2);
  const [selectedDate, setSelectedDate] = useState(dateUTC);

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
    />
  );
});

Range Datepicker with default start date and end date

import { Datepicker } from '@gympass/yoga';

render(() => {
  const start = new Date();
  const end = new Date();
  const startUTC = new Date(Date.UTC(start.getFullYear(), start.getMonth(), start.getDate()));
  const endUTC = new Date(Date.UTC(end.getFullYear(), end.getMonth(), end.getDate()));

  endUTC.setDate(startUTC.getDate() + 15);
  const [startDate, setStartDate] = useState(startUTC);
  const [endDate, setEndDate] = useState(endUTC);

  const onSelectRange = (startDate, endDate) => {
    console.log({ startDate, endDate });
  };

  return (
    <Datepicker
      type="range"
      startDate={startDate}
      endDate={endDate}
      onSelectRange={onSelectRange}
    />
  );
});render(() => {
  const start = new Date();
  const end = new Date();
  const startUTC = new Date(Date.UTC(start.getFullYear(), start.getMonth(), start.getDate()));
  const endUTC = new Date(Date.UTC(end.getFullYear(), end.getMonth(), end.getDate()));

  endUTC.setDate(startUTC.getDate() + 15);
  const [startDate, setStartDate] = useState(startUTC);
  const [endDate, setEndDate] = useState(endUTC);

  const onSelectRange = (startDate, endDate) => {
    console.log({ startDate, endDate });
  };

  return (
    <Datepicker
      type="range"
      startDate={startDate}
      endDate={endDate}
      onSelectRange={onSelectRange}
    />
  );
});

Single Datepicker with custom placeholder

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      placeholder="This is a custom placeholder :)"
    />
  );
});render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      placeholder="This is a custom placeholder :)"
    />
  );
});

Datepicker with past dates disabled

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disablePastDates
    />
  );
});render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disablePastDates
    />
  );
});

Datepicker with future dates disabled

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disableFutureDates
    />
  );
});render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disableFutureDates
    />
  );
});

Datepicker with past dates disabled from a specific date

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [selectedDate, setSelectedDate] = useState();
  const d = new Date();
  const dateUTC = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  dateUTC.setDate(dateUTC.getDate() + 4);

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disablePastFrom={dateUTC}
    />
  );
});render(() => {
  const [selectedDate, setSelectedDate] = useState();
  const d = new Date();
  const dateUTC = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  dateUTC.setDate(dateUTC.getDate() + 4);

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disablePastFrom={dateUTC}
    />
  );
});

Datepicker with future dates disabled from a specific date

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [selectedDate, setSelectedDate] = useState();
  const d = new Date();
  const dateUTC = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  dateUTC.setDate(dateUTC.getDate() - 4);

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disableFutureFrom={dateUTC}
    />
  );
});render(() => {
  const [selectedDate, setSelectedDate] = useState();
  const d = new Date();
  const dateUTC = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  dateUTC.setDate(dateUTC.getDate() - 4);

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disableFutureFrom={dateUTC}
    />
  );
});

Datepicker disabled

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disabled
    />
  );
});render(() => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      disabled
    />
  );
});

Datepicker with error

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      error="This is an error!"
    />
  );
});render(() => {
  const [selectedDate, setSelectedDate] = useState();

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      error="This is an error!"
    />
  );
});

Datepicker custom onOpen action

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [selectedDate, setSelectedDate] = useState();
  const onOpen = isOpen => {
    alert(`onOpen custom action. isOpen -> ${isOpen}`);
  };

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      onOpen={onOpen}
    />
  );
});render(() => {
  const [selectedDate, setSelectedDate] = useState();
  const onOpen = isOpen => {
    alert(`onOpen custom action. isOpen -> ${isOpen}`);
  };

  return (
    <Datepicker
      type="single"
      startDate={selectedDate}
      onSelectSingle={setSelectedDate}
      onOpen={onOpen}
    />
  );
});

Range datepicker with display end date only

import { Datepicker } from '@gympass/yoga';

render(() => {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();

  return (
    <Datepicker
      type="range"
      startDate={startDate}
      endDate={endDate}
      displayEndDateOnly
    />
  );
});render(() => {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();

  return (
    <Datepicker
      type="range"
      startDate={startDate}
      endDate={endDate}
      displayEndDateOnly
    />
  );
});

Props

Prop	Description	Type	Default	Required