Skip to main content

Time picker

Time picker in Storybook

This page includes information about TimePicker and TimezonePicker.

Examples​

Check out the Usage section for details about how to design a time picker properly, and the different configuration options we provide.

Pick a time​

You can allow the user to pick a time using the TimePicker component. Then use the handler to get the selected time.

import { TimePicker } from '@jutro/components/new';

export function DinnerTimeSelector() {
  function handleTimeChange(event, value) {
    console.log('The user selected the following time for dinner:', value);
    // displays: { hours: 19, minutes: 30 }
  }

  return (
    <TimePicker
      label={{
        id: 'time-picker-label',
        defaultMessage: 'Enter dinner time',
      }}
      name="Dinner time picker"
      onChange={handleTimeChange}
    />
  );
}

Pick a time and a timezone​

You can allow the user to pick a time and a timezone using the TimePicker and TimezonePicker components. Then use the handlers to get the selected time and timezone.

import { TimePicker, TimezonePicker } from '@jutro/components/new';

export function DinnerTimeSelector() {
  function handleTimeChange(event, value) {
    console.log('The user selected the following time for dinner:', value);
    // displays: { hours: 19, minutes: 30 }
  }

  function handleTimezoneChange(event, value) {
    console.log('The user selected the following timezone for dinner:', value);
    // displays: { timezone: 'Europe/Warsaw' }
  }

  return (
    <>
      <TimePicker
        label={{
          id: 'time-picker-label',
          defaultMessage: 'Enter dinner time',
        }}
        name="Dinner time picker"
        onChange={handleTimeChange}
      />
      <TimezonePicker
        label={{
          id: 'timezone-picker-label',
          defaultMessage: 'Set timezone for dinner time',
        }}
        initialValue={{ timezone: 'Europe/Warsaw' }}
        onChange={handleTimezoneChange}
      />
    </>
  );
}

Controlled time picker​

You can control the time picker by passing the value prop. This is useful if you want to use the time picker as a controlled component.

import { TimePicker } from '@jutro/components/new';

function DinnerTimeSelector() {
  const [time, setTime] = React.useState({ hour: 19, minute: 30 });

  function handleTimeChange(event, value) {
    setTime(value);
  }

  return (
    <TimePicker
      label={{
        id: 'time-picker-label',
        defaultMessage: 'Enter dinner time',
      }}
      name="Dinner time picker"
      onChange={handleTimeChange}
      value={time}
    />
  );
}

Note that the value prop is an object with properties called hour and minute.

Tip: If you want to format the time picker value, you can get started with the following example:
const dateObjectFromInput = new Date(0, 0, 0, time.hour, time.minute);
const formattedTime = Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
}).format(dateObjectFromInput);

It is best to use the Intl.DateTimeFormat API to format the time picker value because:

Every time toLocaleString is called, it has to perform a search in a big database of localization strings, which is potentially inefficient. When the method is called many times with the same arguments, it is better to create a Intl.DateTimeFormat object and use its format() method, because a DateTimeFormat object remembers the arguments passed to it and may decide to cache a slice of the database, so future format calls can search for localization strings within a more constrained context.

For more information, see the MDN documentation about DateTimeFormat.

Controlled timezone picker​

You can control the timezone picker by passing the value prop. This is useful if you want to use the timezone picker as a controlled component.

import { TimezonePicker } from '@jutro/components/new';

function TimezonePickerControlled() {
  const [timezone, setTimezone] = React.useState({
    timezone: 'Europe/Warsaw',
  });

  function handleTimezoneChange(event, value) {
    setTimezone(value);
  }

  return (
    <TimezonePicker
      label={{
        id: 'timezone-picker-label',
        defaultMessage: 'Set timezone for dinner time',
      }}
      onChange={handleTimezoneChange}
      value={timezone}
    />
  );
}

Note that the value prop is an object with a property called timezone.

Specify time interval, time range, and timezones​

For time picker, you can specify:

  • The "min" and "max" time range, for example "9:00 AM" and "5:00 PM"
  • The time interval, for example 15 minutes

For timezone picker, you can limit the list of timezones available. Simply pass an array of IANA timezones.

<>
  <TimePicker
    label="Pick a meeting time"
    interval={15}
    minTime={{
      hour: 9,
      minute: 0,
    }}
    maxTime={{
      hour: 17,
      minute: 30,
    }}
  />
  <TimezonePicker
    label="Set your timezone"
    availableTimezones={['Africa/Lagos', 'Africa/Maputo', 'Africa/Monrovia']}
  />
</>

Timezone picker in Typescript​

Having trouble with Typescript? Check out the following example:

function TimezonePickerControlled() {
  const [timezone, setTimezone] =
    React.useState <
    JutroTimezone >
    {
      timezone: 'Europe/Warsaw',
    };

  function handleTimezoneChange(
    event: DropdownOnChangeEvent<JutroTimezone>,
    value: JutroTimezone
  ) {
    setTimezone(value);
  }

  return (
    <TimezonePicker
      label={{
        id: 'timezone-picker-label',
        defaultMessage: 'Set timezone for dinner time',
      }}
      onChange={handleTimezoneChange}
      value={timezone}
    />
  );
}