MonthPickerInput

Form-friendly wrapper around MonthPicker that renders an input field and opens the picker in a modal dialog. Mirrors the DatePickerInput API for consistency while focusing on month-level selection workflows.

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
,
 
MonthPickerInput
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<Date
 
|
 
null
>
(
null
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<MonthPickerInput
        
value
=
{
value
}
        
onChange
=
{
setValue
}
        
label
=
"Billing cycle"
        
placeholder
=
"Select a month"
        clearable
        fullWidth
      
/>
      
<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