React | Month Picker | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { useState } from 'react';
                                                        import { MonthPicker, CalendarService } from '@optimus-web/core';
                                                        
                                                        const MyMonthPickerComponent = () => {
                                                            const [value, setValue] = useState<InputValue>('10/2024');
                                                        
                                                            const handleChange = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent, v: InputValue) => {
                                                                setValue(v);
                                                            };
                                                        
                                                            return (
                                                                <MonthPicker
                                                                    name="month-picker"
                                                                    getCalendarService={() => CalendarService<D, M, Y>}
                                                                    value={value}
                                                                    onChange={handleChange}
                                                                    placeholder="MM/YYYY"
                                                                    clearable={false}
                                                                    disabled={false}
                                                                    error=""
                                                                    helper=""
                                                                    indicativeIcon={undefined}
                                                                    label="Label"
                                                                    loading={false}
                                                                    prefix=""
                                                                    suffix=""
                                                                    required={false}
                                                                    size="medium"
                                                                    inline={false}
                                                                />
                                                            );
                                                        }

Name	Type	Default	Description
disabled?	boolean	false	Disabled the month picker
label?	ReactNode	undefined	The label of the field
required?	boolean	false	Indicates whether the field is required or not
size?	SizeType	medium	Defines the input size
helper?	ReactNode	undefined	Defines the helper text below the input
className?	string	undefined	Adds a CSS class to the input wrapper
forwardedRef?	Ref<HTMLElement>	undefined	This optional property is a ref that can be forwarded to the field. It is a Ref for an HTMLElement
htmlFor?	string	undefined	This optional property is a string that specifies which form element a label is bound to
onBlur?	(event?: FocusEvent<HTMLInputElement>) => void	undefined	An optional function that handles the blur event
onChange?	(value: string) => void	undefined	The callback function that is called when the value of the month picker changes
onFocus?	(event?: FocusEvent<HTMLInputElement>) => void	undefined	An optional function that handles the focus event
name	string	-	The name of the month picker
captionIconWithTooltip?	ReactNode	undefined	This optional property represents a caption icon with a tooltip. It can be any valid React node
captionIconHandler?	MouseEventHandler<HTMLButtonElement>	undefined	This optional property is a function that handles mouse events on a caption icon in the field. It receives a MouseEventHandler for an HTMLButtonElement
value?	number	-	The current value of the month picker
error?	ReactNode	undefined	This optional property represents an error message for the field. It can be any valid React node
placeholder?	ReactNode	MM/YYYY	An optional node that displays a placeholder when the month picker component is empty
readOnly?	boolean	false	This optional boolean property indicates whether the field is read-only or not
getTimeService	() => TimeService	-	A function that returns the time service
alignRight?	boolean	false	If true, aligns the text input to the right
clearable?	boolean	false	If true, the month picker field can be cleared by the user
getValue?	(value: string) => void	undefined	A function that gets the current value of the month picker field
id?	string	undefined	The ID of the month picker field
indicativeIcon?	IconName	undefined	The name of an icon to display in the month input field
inline?	boolean	false	An optional boolean that, if true, makes the month picker input inline
interactiveIcon?	() => void	undefined	The name of an interactive icon to display in the month picker field
leadingImage?	ReactNode	undefined	A React node to display as a leading image in the month picker field
loading?	boolean	false	An optional boolean that, if true, makes the month picker component have a loading state
onClear?	() => void	undefined	An optional function that handles the clear event
prefix?	ReactNode	undefined	A React node to display as a prefix in the input field
dateFormatPattern?	string	undefined	This optional property specifies the format in which the date should be displayed
keyboardEntryDisabled?	boolean	false	This optional property determines whether the user can enter the date using the keyboard
minDate?	D	undefined	This optional property represents the minimum date that can be selected in the date picker
maxDate?	D	undefined	This optional property represents the maximum date that can be selected in the date picker
dateValue?	D	undefined	This optional property represents the currently selected date value in the month picker
onDateChange?	(date: D) => void	undefined	This optional property is a function that gets called when the date changes in the month picker
innerRef?	(element: HTMLElement) => void	undefined	This optional property is a function that can be used to get a reference to the underlying HTML element of the date picker
getCalendarService	() => CalendarService<D, M, Y>	-	This property is a function that returns a calendar service, which can be used to manipulate dates
modifiers?	Modifiers<D>	undefined	This optional property can be used to customize the appearance and behavior of the dates in the month picker

Month Picker

Resources

Example

API