Code

Implementation
TimeField Props
TimeFieldChange Props

Common Examples

import { TimeField } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <TimeField
      label="Label Text"
      step={60}
      onChange={(change) => {
        // change function
      }}
    />
  );
}

With Suggestions Enabled (Default)

By default, time fields use a 12-hour format and present suggested times in a dropdown based on the step prop. The dropdown is only present if there is more than one valid option to select from. Whether the dropdown is present or not, the input allows typing in the field itself to get to your desired time.There is autocomplete for best guess assumptions of the time you might be going for based on a partial input value. If both AM and PM times both are possible options, AM takes precedence over PM for autocomplete.

Demo

Without Suggestions

When disableSuggestions is set to true, the suggestions dropdown will no longer appear. All other features, including autocomplete, will continue to work as the user types.

Demo

Auto-Rounding

If the autoround prop is set to true, the time field will attempt to round to the next valid time on blur based on the step and max props. Note: rounding will always go to the future, never the past.If suggestions are enabled, the suggestions will display the auto rounded options available, even if the time currently typed in the input is not yet rounded.Add a description to allow users to know auto rounding is enabled for the field.

Demo

Min and Max Constraints

Use the min and max props to set a time frame constraint. When the props are present, a time outside the time frame can not be entered into the field.Autocomplete will adjust to a time within the time frame if the partial value can fall within the constraint. For example, 02:— will autocomplete to 02:00 PM for a 09:00 AM - 05:00 PM time frame instead of the default 02:00 AM since 02:00 AM does not fall between 09:00 AM and 05:00 PM.autoround will cap at the max time even if it doesn’t fully align with the step prop. For example: In a field with a 09:00 AM - 05:00 PM time frame and a step of 30 minutes, if 4:45 is entered it will round to 5:00 PM.Add a description to allow users to know there is a time constraint.

Demo

24 Hour Format

Set the format prop to 24 to change to the time format. When using this format, ensure min and max times are also set to 24 hour format.

Demo

Validation

Validation needs to be handled with the onChange. isInputValid and isInputEmpty are boolean props returned with the time so that custom validation can be applied. Note: Because of the use of the mask acts as a value for the input, native html validation will not occur.

Demo

<TimeField
  label="Label Text"
  autoround={false}
  defaultValue="09:00 AM"
  disableSuggestions={false}
  format="12"
  max="05:00 PM"
  min="09:00 AM"
  step={30}
  value="10:30 AM"
  onChange={(change) => console.log(change)}
/>

`TimeField` Props

In addition to the props listed below, the TimeField accepts most TextField props with the exception of type, placeholder, showCounter and maxLength.

autoround

boolean

default:"false"

If true, value will round to nearest future step. If there is a defined time frame, the ceiling for rounding is the max time.

defaultValue

string | null

Uncontrolled initial value for the component.

disableSuggestions

boolean

default:"false"

If true, the dropdown with suggested time options is not present.

format

"12" | "24"

default:"12"

Time format for the component.

max

string

Maximum allowed time for a time frame. Must be paired with min. String must match the format set for the component.

min

string

Minimum allowed time for a time frame. Must be paired with max. String must match format set for the component.

onChange

(change: TimeFieldChange) => void

Callback fired on blur or after a time is selected from the selection list.

step

number

default:"30"

Time increments for the time suggestions and auto rounding.

value

string | null

Controlled value for the component.

// TimeFieldChange is returned by the onChange callback
const handleChange = (change: TimeFieldChange) => {
  console.log(change.isInputEmpty, change.isInputValid, change.time);
};

`TimeFieldChange` Props

The onChange callback receives a TimeFieldChange object with the following properties:

isInputEmpty

boolean

Whether the input is empty.

isInputValid

boolean

Whether there is a validation issue aside from empty value with the input.

time

string | null

The returned time string.

Anvil2 Web

Resources

Common Examples

With Suggestions Enabled (Default)

Without Suggestions

Auto-Rounding

Min and Max Constraints

24 Hour Format

Validation

`TimeField` Props

`TimeFieldChange` Props

Anvil2 Web

Resources

​Common Examples

​With Suggestions Enabled (Default)

​Without Suggestions

​Auto-Rounding

​Min and Max Constraints

​24 Hour Format

​Validation

​TimeField Props

​TimeFieldChange Props

Common Examples

With Suggestions Enabled (Default)

Without Suggestions

Auto-Rounding

Min and Max Constraints

24 Hour Format

Validation

`TimeField` Props

`TimeFieldChange` Props