DatePickerInput

DatePickerInput wraps the inline DatePicker in an accessible input experience. It handles focus management, modal presentation, and formatting so people can choose dates without leaving the form flow.

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
,
 
DatePickerInput
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<Date
 
|
 
null
>
(
null
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<DatePickerInput
        
value
=
{
value
}
        
onChange
=
{
(
next
)
 
=>
 
setValue
(
next as 
Date
 
|
 
null
)
}
        
placeholder
=
"Select a date"
        
label
=
"Date"
        clearable
        fullWidth
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
value 
?
 
`Selected: ${value.toLocaleDateString()}`
 
:
 
'No date selected'
}
      
</Text
>
    
</Block
>
  
)
;
}

Multiple

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
DatePickerInput
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<Date
[
]
>
(
[
]
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<DatePickerInput
        
type
=
"multiple"
        
value
=
{
value
}
        
onChange
=
{
(
next
)
 
=>
 
setValue
(
(
next as 
Date
[
]
)
 
||
 
[
]
)
}
        
label
=
"Multiple dates"
        
placeholder
=
"Select dates"
        fullWidth
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
value
.
length 
>
 
0
          
?
 
`Selected: ${value.map((date) => date.toLocaleDateString()).join(', ')}`
          
:
 
'Select one or more dates'
}
      
</Text
>
    
</Block
>
  
)
;
}

Range

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
DatePickerInput
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<
[
Date
 
|
 
null
,
 
Date
 
|
 
null
]
 
|
 
null
>
(
null
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<DatePickerInput
        
type
=
"range"
        
value
=
{
value
}
        
onChange
=
{
(
next
)
 
=>
 
setValue
(
(
next as 
[
Date
 
|
 
null
,
 
Date
 
|
 
null
]
)
 
||
 
null
)
}
        
label
=
"Date range"
        
placeholder
=
"Select range"
        closeOnSelect
        fullWidth
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
value 
&&
 value
[
0
]
 
&&
 value
[
1
]
          
?
 
`${value[0].toLocaleDateString()} – ${value[1].toLocaleDateString()}`
          
:
 
'Select a start and end date'
}
      
</Text
>
    
</Block
>
  
)
;
}

Validation

Loading demo…

import
 
React
,
 
{
 useMemo
,
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
DatePickerInput
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<Date
 
|
 
null
>
(
null
)
;
  
const
 
[
error
,
 setError
]
 
=
 useState
<
string
 
|
 
undefined
>
(
)
;
 
  
const
 today 
=
 
useMemo
(
(
)
 
=>
 
{
    
const
 date 
=
 
new
 
Date
(
)
;
    date
.
setHours
(
0
,
 
0
,
 
0
,
 
0
)
;
    
return
 date
;
  
}
,
 
[
]
)
;
 
  
const
 handleChange 
=
 
(
next
:
 
Date
 
|
 
[
Date
 
|
 
null
,
 
Date
 
|
 
null
]
 
|
 
Date
[
]
 
|
 
null
)
 
=>
 
{
    
const
 dateValue 
=
 next as 
Date
 
|
 
null
;
    
setValue
(
dateValue
)
;
 
    
if
 
(
dateValue 
&&
 dateValue 
<
 today
)
 
{
      
setError
(
'Date cannot be in the past'
)
;
    
}
 
else
 
{
      
setError
(
undefined
)
;
    
}
  
}
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<DatePickerInput
        
value
=
{
value
}
        
onChange
=
{
handleChange
}
        
placeholder
=
"Select a future date"
        
label
=
"Future date"
        
error
=
{
error
}
        clearable
        fullWidth
        
calendarProps
=
{
{
          minDate
:
 today
,
          highlightToday
:
 
true
,
        
}
}
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Past
 dates show the validation state
      
</Text
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/DatePickerInput

</>

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