DatePicker

DatePicker renders an inline calendar focused on keyboard-friendly, accessible selection flows. Pair it with DatePickerInput when you need an input trigger and modal or popover calendar.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁴⁾

Properties

⁽⁹⁾

Playground

Basic Date Picker

Standard single date selection with label and placeholder text.

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
DatePicker
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<Date
 
|
 
null
>
(
null
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<DatePicker
        
value
=
{
value
}
        
onChange
=
{
(
next
)
 
=>
 
setValue
(
next as 
Date
 
|
 
null
)
}
        
calendarProps
=
{
{
 numberOfMonths
:
 
1
,
 highlightToday
:
 
true
 
}
}
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
value 
?
 
`Selected: ${value.toLocaleDateString()}`
 
:
 
'No date selected'
}
      
</Text
>
    
</Block
>
  
)
;
}

Date Range Picker

Select a range of dates with start and end date selection.

Loading demo…

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

Date Validation

Date picker with validation rules and error handling for invalid selections.

Loading demo…

import
 
React
,
 
{
 useMemo
,
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
DatePicker
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<Date
 
|
 
null
>
(
null
)
;
  
const
 
[
inlineError
,
 setInlineError
]
 
=
 
useState
(
''
)
;
 
  
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
)
;
    
setInlineError
(
dateValue 
&&
 dateValue 
<
 today 
?
 
'Date cannot be in the past'
 
:
 
''
)
;
  
}
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<DatePicker
        
value
=
{
value
}
        
onChange
=
{
handleChange
}
        
calendarProps
=
{
{
 minDate
:
 today
,
 highlightToday
:
 
true
 
}
}
      
/>
      
<Text
 
size
=
"sm"
 
color
=
{
inlineError 
?
 
'error'
 
:
 
'secondary'
}
>
        
{
inlineError 
||
 
'Only dates today or later are enabled'
}
      
</Text
>
    
</Block
>
  
)
;
}

Multiple Dates Selection

Select multiple independent dates for events or availability.

Loading demo…

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

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

</>

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