MonthPicker

Interactive grid for selecting a month within a given year. Renders a responsive layout that adapts to screen width and respects locale formatting as well as min/max date constraints.

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
,
 
MonthPicker
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<Date
 
|
 
null
>
(
new
 
Date
(
)
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<MonthPicker
 
value
=
{
value
}
 
onChange
=
{
setValue
}
 
monthLabelFormat
=
"long"
 
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
value
          
?
 value
.
toLocaleDateString
(
undefined
,
 
{
 month
:
 
'long'
,
 year
:
 
'numeric'
 
}
)
          
:
 
'No month selected'
}
      
</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