@UiReact

UiReact logo icon

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiDatepicker


Package: @uireact/datepicker

v0.22.8
‼️ Beta

A datepicker that lets the user select a date

#

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/datepicker

#

Datepicker

  <DatePickerExample />

This example uses these 2 props to change the behavior of the date picker in small screens:

  1. useDialogOnSmall - When screen is small the datepicker will be opened in a dialog.
  2. The closeLabel prop is passing the label used inside the dialog in the close button.

DatePickerExample:

export const DatePickerExample: React.FC = () => {
  const [dateSelected, setDateSelected] = useState<Date | undefined>();
  const [datepickerVisible, setDatepickerVisible] = useState<boolean>(false);

  const onSelectDate = useCallback(
    (date) => {
      setDateSelected(date);
    },
    [setDateSelected]
  );

  const onOpenClick = useCallback(() => {
    setDatepickerVisible(true);
  }, [setDatepickerVisible]);

  const onClose = useCallback(() => {
    setDatepickerVisible(false);
  }, [setDatepickerVisible]);

  return (
    <div>
      <UiButton onClick={onOpenClick} category="tertiary">
        <UiSpacing padding={buttonSpacing}>Open date picker</UiSpacing>
      </UiButton>
      <UiDatepicker
        date={today}
        onSelectDate={onSelectDate}
        highlightToday
        isOpen={datepickerVisible}
        onClose={onClose}
        useDialogOnSmall
        showNextMonth
        closeLabel="Accept"
      />
      {dateSelected && (
        <UiSpacing padding={textSpacing}>
          <UiText>
            Date selected: {`${dateSelected.getFullYear()}/${dateSelected.getMonth() + 1}/${dateSelected.getDate()}`}
          </UiText>
        </UiSpacing>
      )}
    </div>
  );
};

#

Localized picker

For localization of the labels in the datepicker you can pass the labels you want on the prop localizedLabels we will retrieve the values from here when present.

Example using spanish labels:

  <DatePickerLocalizedExample />

DatePickerLocalizedExample:

const labels: UiDatepickerLocalizedLabels = {
  months: {
    january: "Enero",
    february: "Febrero",
    march: "Marzo",
    april: "Abril",
    may: "Mayo",
    june: "Junio",
    july: "Julio",
    august: "Agosto",
    september: "Septiembre",
    october: "Octubre",
    november: "Noviembre",
    december: "Diciembre"
  },
  weekDays: {
    sunday: "Domingo",
    monday: "Lunes",
    tuesday: "Martes",
    wednesday: "Miercoles",
    thursday: "Jueves",
    friday: "Viernes",
    saturday: "Sabado"
  }
}

export const DatePickerLocalizedExample: React.FC = () => {
  const [dateSelected, setDateSelected] = useState<Date | undefined>();
  const [datepickerVisible, setDatepickerVisible] = useState<boolean>(false);

  const onSelectDate = useCallback(
    (date: Date) => {
      setDateSelected(date);
    },
    [setDateSelected]
  );

  const onOpenClick = useCallback(() => {
    setDatepickerVisible(true);
  }, [setDatepickerVisible]);

  const onClose = useCallback(() => {
    setDatepickerVisible(false);
  }, [setDatepickerVisible]);

  return (
    <div>
      <UiButton onClick={onOpenClick} category="tertiary">
        <UiSpacing padding={buttonSpacing}>Open date picker</UiSpacing>
      </UiButton>
      <UiDatepicker
        date={today}
        onSelectDate={onSelectDate}
        highlightToday
        isOpen={datepickerVisible}
        onClose={onClose}
        useDialogOnSmall
        closeLabel="Accept"
        localizedLabels={labels}
      />
      {dateSelected && (
        <UiSpacing padding={textSpacing}>
          <UiText>
            Date selected: {`${dateSelected.getFullYear()}/${dateSelected.getMonth() + 1}/${dateSelected.getDate()}`}
          </UiText>
        </UiSpacing>
      )}
    </div>
  );
};

#

Datepicker without menu

If you need to just render a datepicker that is not floating then the prop flatPicker will render it as a block element:

  <UiDatepicker flatPicker onSelectDate={(date) => console.log(date)} />

When rendering this component like this, the props related to the menu like onClose won't be relevant nor used.