Skip to main content

Date input

Date input in Storybook

Examples​

Check out the Usage section for details about how and when to use the DateInput component.

Basic DateInput variants​

You can use the variant prop to create an input component with different fields:

import React from 'react';
import { DateInput } from '@jutro/components/new';

export const BasicDateInput = () => {
  return (
    <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap'}}>
        <DateInput label="This is a simple date input" />
        <DateInput label="This is a month and year input" variant='month' />
        <DateInput label="This is a year input" variant='year' />
    </div>
  );
};

Error example​

You can use the stateMessages property to display an error on the DateInput component.

import React from 'react';
import { DateInput } from '@jutro/components/new';

export const ErrorDateInput = () => {

  return (
    <div>
      <DateInput
        label="This is a date input"
        stateMessages= {{
            error: ['This is an error message'],
        }}
      />
    </div>
  );
};

Min/Max example​

You can set a minimum and maximum date for the DateInput component with the minDate and maxDate props. Alternatively, you can set independent values, for months and years using the minMonth, minYear, maxMonth, and maxYear. The following example checks when it loses focus if the year value is between 2000 and 2024 and in case it is not between these values, shows an error.

import React, { useState } from 'react';
import { DateInput } from '@jutro/components/new';

export const MinMaxDateInput = () => {
  const [stateMessages, setStateMessages] = useState({});

  const handleChange = (event, value, errorObject) => {
    const errorCode = errorObject?.errorCode;

    if (errorCode === 'INVALID_DATE') {
      setStateMessages({
        error: ['Please enter a valid date.'],
      });
      return;
    }

    if (errorCode === 'MIN_EXCEEDED' || errorCode === 'MAX_EXCEEDED') {
      setStateMessages({
        error: [`The year must be between 2000 and 2024.`],
      });
    } else {
      setStateMessages({});
    }
  };

  return (
    <div>
      <DateInput 
        label="Enter a date between year 2000 and year 2024" 
        minDate={{ day: 1, month: 1, year: 2000 }}
        maxDate={{ day: 31, month: 12, year: 2024 }}
        onChange={handleChange}
        stateMessages={stateMessages}
      />
    </div>
  );
};

Date input display options​

When using the readOnly or displayOnly props, you can use the displayFormat prop to modify the format of the dates.

import React from 'react';
import { DateInput } from '@jutro/components/new';

export const DisplayOptionsDateInput = () => {
  return (
    <div>
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap'}}>
        <DateInput label="Vshort" readOnly displayFormat="vshort" initialValue={{ day: 20, month: 6, year: 2024  }} />
        <DateInput label="Short" readOnly displayFormat="short" initialValue={{ day: 20, month: 6, year: 2024  }} />
        <DateInput label="Long" readOnly displayFormat="long" initialValue={{ day: 20, month: 6, year: 2024  }} />
    </div><br />
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center'}}>
        <DateInput label="Abbreviated" readOnly displayFormat="abbreviated" initialValue={{ day: 20, month: 6, year: 2024  }} />
        <DateInput label="Full" readOnly displayFormat="full" initialValue={{ day: 20, month: 6, year: 2024  }} />
    </div>
    </div>
  );
};