Skip to content
Home

Field.Time

Info
Demos
Properties
Events

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}
  />
)