TimePickerInput

Form field for selecting a time. Presents an input showing the formatted value and opens a TimePicker panel in a dialog, mirroring the behavior of DatePickerInput, MonthPickerInput and YearPickerInput. Adds the field concerns the inline panel has no notion of — label, validation, clearing, and manual text entry — and supports the full <Input> slot-prop API.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽²⁾

Properties

⁽²⁴⁾

Playground

Basic

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Text
,
 
TimePickerInput
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
type
 
{
 
TimePickerValue
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<TimePickerValue
 
|
 
null
>
(
{
 hours
:
 
9
,
 minutes
:
 
30
 
}
)
;
 
  
const
 formatted 
=
 value
    
?
 
`${((value.hours + 11) % 12) + 1}:${String(value.minutes).padStart(2, '0')} ${value.hours >= 12 ? 'PM' : 'AM'}`
    
:
 
null
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<TimePickerInput
        
value
=
{
value
}
        
onChange
=
{
setValue
}
        
label
=
"Meeting time"
        
format
=
{
12
}
        fullWidth
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
formatted 
?
 
`Selected: ${formatted}`
 
:
 
'No time selected'
}
      
</Text
>
    
</Block
>
  
)
;
}

Validation

Validation example showing custom error when outside allowed business hours (09:00-17:00).

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Text
,
 
TimePickerInput
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
type
 
{
 
TimePickerValue
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 withinBusiness 
=
 
(
v
:
 
TimePickerValue
)
 
=>
 
{
  
const
 totalMinutes 
=
 v
.
hours 
*
 
60
 
+
 v
.
minutes
;
  
return
 totalMinutes 
>=
 
9
 
*
 
60
 
&&
 totalMinutes 
<=
 
17
 
*
 
60
;
 
// 09:00 - 17:00 inclusive
}
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<TimePickerValue
 
|
 
null
>
(
{
 hours
:
 
8
,
 minutes
:
 
45
 
}
)
;
  
const
 
[
error
,
 setError
]
 
=
 useState
<
string
 
|
 
undefined
>
(
undefined
)
;
 
  
const
 handleChange 
=
 
(
next
:
 
TimePickerValue
 
|
 
null
)
 
=>
 
{
    
setValue
(
next
)
;
    
if
 
(
!
next
)
 
{
      
setError
(
undefined
)
;
      
return
;
    
}
 
    
if
 
(
!
withinBusiness
(
next
)
)
 
{
      
setError
(
'Select a time between 09:00 and 17:00'
)
;
    
}
 
else
 
{
      
setError
(
undefined
)
;
    
}
  
}
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<TimePickerInput
        
value
=
{
value
}
        
onChange
=
{
handleChange
}
        
label
=
"Meeting time"
        
error
=
{
error
}
        
helperText
=
"Business hours only"
        clearable
        fullWidth
      
/>
      
{
value 
&&
 
(
        
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
          
Selected
:
 
{
value
.
hours
.
toString
(
)
.
padStart
(
2
,
 
'0'
)
}
:
{
value
.
minutes
.
toString
(
)
.
padStart
(
2
,
 
'0'
)
}
        
</Text
>
      
)
}
    
</Block
>
  
)
;
}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap