Month Picker

A visual method for selecting a date using a calendar view

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example


                                                        
                                                        
                                                            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}
                                                                />
                                                            );
                                                        }