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}
    />
  );
}
Legal and Support Information
Copyright © 2001-2024 Guidewire Software, Inc.