Version: 2.0.2



The TimePicker component is a dialog that allows the user to select a time.


import React from "react";
import { View, TimePicker } from "magic-script-components";
export default class MyApp extends React.Component {
render() {
return (
<View name="main-view">
<TimePicker label="Pick Time" />

Common Events

Common Properties

Create Properties

NameTypeDefault ValueDescription
labelstringn/aThe text label that appears with the TimePicker.
labelSidestringtopSide enum specifying whether the label appears on the side or top. Only top and left are currently supported.
defaultTimestring(current Time)The default time to set for the TimePicker.

LabelSide values:

  • bottom
  • left
  • right
  • top

Element Properties

colorstringSets the TimePicker component's color. This doesn't affect the label.
timenumberSets the time. This ignores values that aren't in hh:mm:ss format.
showHintbooleanTo show the selected Time eg. 12:30:00 or the format hint eg. hh:mm:ss. This will only have an affect when not currently focused. The full hint is always displayed on creation. Each field will continue to show the hint, eg. hh or mm or ss, until that field is focused. This can override that behavior and display the Time immediately if desired. The full Time will be shown when the user confirms a selected Time.