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" onBlurValidator={myOnBlurValidator} />)
Suggest an edit