Foundation

Main View


Components

Charts

Dialogs

Framer Animations

Forms

Grids

Typography


Tools


UiInputDatepicker


Package: @uireact/datepicker

v0.22.8
‼️ Beta

An input that lets the user select dates using a datepicker

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/datepicker

  <div style={{ height: '350px' }}>
    <UiInputDatepicker
      label="Date"
      labelOnTop
      placeholder="Select the date"
      highlightToday
      onChange={(value) => {
        console.log(value);
      }}
      icon={<UiIcon icon="CalendarLines" />}
      size="large"
      useDialogOnSmall
      closeLabel="Done"
    />
  </div>

If a prop date is passed then it will be used as the default value for the input and the date selected in the datepicker

  <div style={{ height: '350px' }}>
    <UiInputDatepicker
      label="Date"
      date={new Date('2024-01-01 00:00:00')}
      labelOnTop
      placeholder="Select the date"
      highlightToday
      onChange={(value) => {
        console.log(value);
      }}
      icon={<UiIcon icon="CalendarLines" />}
      size="large"
      useDialogOnSmall
      closeLabel="Done"
    />
  </div>
  <DatePickerInputExample />
const validator = new UiValidator();
const today = new Date();
const schema: UiValidatorSchema = {
  date: validator.field('text').present('Select a date').greaterThan(today, 'Select a date in the future')
};

export const DatePickerInputExample: React.FC = () => {
  const [dateSelected, setDateSelected] = useState<string>();
  const [successMessageVisible, setSuccessMessageVisible] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string>();

  const onChange = useCallback(
    (date: string) => {
      setDateSelected(date);
      setSuccessMessageVisible(false);
      setErrorMessage('');
    },
    [setDateSelected]
  );

  const onSubmit = useCallback(
    (e: FormEvent<HTMLFormElement>) => {
      e.preventDefault();
      if (!dateSelected) {
        setErrorMessage('Select a date');
        return;
      }

      const data = {
        date: new Date(dateSelected)
      };
      const validation = validator.validate(schema, data);

      if (validation.passed) {
        setSuccessMessageVisible(true);
      } else {
        const errorMessage = validation.errors?.date[0].message;
        setErrorMessage(errorMessage);
      }
    },
    [dateSelected]
  );

  return (
    <div style={{ height: '350px' }}>
      <UiText>Select a date in the future, if not an error will be shown:</UiText>
      <UiSpacing padding={formSpacing}>
        <form onSubmit={onSubmit}>
          <UiInputDatepicker
            label="Date"
            labelOnTop
            placeholder="Select a future date"
            highlightToday
            onChange={onChange}
            icon={<UiIcon icon="CalendarLines" />}
            size="large"
            closeLabel="Done"
            error={errorMessage}
            category={errorMessage ? 'error' : undefined}
            showNextMonth
            useDialogOnSmall
          />
          <UiSpacing padding={buttonMargin}>
            <UiButton type="submit" category="tertiary">
              <UiSpacing padding={buttonPadding}>
                <UiText>Submit</UiText>
              </UiSpacing>
            </UiButton>
          </UiSpacing>
        </form>
      </UiSpacing>
      {successMessageVisible && (
        <UiCard category="positive">
          <UiText>
            <UiIcon icon="CheckCircle" /> The date is valid
          </UiText>
        </UiCard>
      )}
    </div>
  );
};

For localized labels you can use the prop localizedLabels and pass down the labels you want to use. This prop is available from this input datepicker component.

A working example of this is live in the datepicker docs.