Skip to content
Home

Field.Time

Info
Demos
Properties
Events

Import

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.Time />)

Description

Field.Time is a wrapper component for string input, with user experience tailored for time input (hours, minutes and seconds).

It uses a segmented input with spin buttons, allowing users to input hours (0–23), minutes (0–59), and optionally seconds (0–59) with the showSeconds prop.

The value format is "HH:mm" (e.g. "14:30"), or "HH:mm:ss" (e.g. "14:30:45") when showSeconds is enabled.

There is a corresponding Value.Time component.

Relevant links

Validators

Internal validators exposed

Field.Time exposes the timeValidator validator through its onBlurValidator property. Take a look at this demo. The timeValidator validator validates invalid hours, minutes, and seconds.

Extending validators

Combine the exported validator with your own rules to keep the built-in checks and add custom guards. Import TimeValidator to type your validator and the shared validators.

import { Field } from '@dnb/eufemia/extensions/forms'
import type { TimeValidator } from '@dnb/eufemia/extensions/forms/Field/Time'


const myValidator: TimeValidator = (value, { validators }) => {
  const { timeValidator } = validators ?? {}
  const noMidnight = (value: string) => {
    if (value === '00:00') {
      return new Error('Midnight is not allowed')
    }
  }


  return [timeValidator, noMidnight]
}


render(<Field.Time onBlurValidator={myValidator} />)

Demos

Empty

ttmm
<Field.Time onChange={(time) => console.log('onChange', time)} />

Label

1430
<Field.Time
  value="14:30"
  label="Label text"
  onChange={(time) => console.log('onChange', time)}
/>

With a horizontal layout

1430
<Field.Time
  value="14:30"
  layout="horizontal"
  layoutOptions={{
    width: 'medium',
  }}
/>

With help

ttmm
<Field.Time
  label="Label text"
  help={{
    title: 'Help is available',
    content: 'Enter the time using hours and minutes.',
  }}
  onChange={(time) => console.log('onChange', time)}
/>

Disabled

1430
<Field.Time
  value="14:30"
  label="Label text"
  onChange={(time) => console.log('onChange', time)}
  disabled
/>

Error

This is what is wrong...
1430
<Field.Time
  value="14:30"
  label="Label text"
  onChange={(time) => console.log('onChange', time)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required

ttmm
<Field.Time
  label="Label text"
  onChange={(time) => console.log('onChange', time)}
  required
  validateInitially
/>

With seconds

143045
<Field.Time
  value="14:30:45"
  label="With seconds"
  showSeconds
  onChange={(time) => console.log('onChange', time)}
/>

Transform in and out

This example demonstrates how to transform data when it enters and leaves the form field.

You can use the transformIn property to modify the incoming data before it is displayed in the field, and the transformOut property to adjust the data before it is submitted or processed. When transformIn one can either return a simple value "14:30" or an object { hours: "14", minutes: "30" }.

1430
{
  "myField": {
    "hours": "14",
    "minutes": "30"
  }
} 
const transformOut = (internal, additionalArgs) => {
  const { hours, minutes } = additionalArgs
  return {
    hours,
    minutes,
  }
}
const transformIn = (external) => {
  if (external) {
    const { hours, minutes } = external
    return {
      hours,
      minutes,
    }
  }
}
render(
  <Form.Handler
    defaultData={{
      myField: {
        hours: '14',
        minutes: '30',
      },
    }}
  >
    <Form.Card>
      <Field.Time
        path="/myField"
        transformOut={transformOut}
        transformIn={transformIn}
        label="Transform in and out"
      />
      <Tools.Log />
    </Form.Card>
  </Form.Handler>
)

Extend validation with custom validation function

You can extend the existing validation (timeValidator) with your own validation function.

0000
const noMidnight = (value: string) => {
  if (value === '00:00') {
    return new Error('Midnight is not allowed')
  }
}
const myOnBlurValidator: TimeValidator = (
  value: string,
  { validators }
) => {
  const { timeValidator } = validators
  return [noMidnight, timeValidator]
}
render(
  <Field.Time
    value="00:00"
    // @ts-expect-error -- strictFunctionTypes
    onBlurValidator={myOnBlurValidator}
  />
)