Date 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 { DatePicker, CalendarService } from '@optimus-web/core';
                                                        
                                                        const MyDatePickerComponent = () => {
                                                            const [value, setValue] = useState<InputValue>('10/10/2010');
                                                        
                                                            const handleChange = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent, v: InputValue) => {
                                                                setValue(v);
                                                            };
                                                        
                                                            return (
                                                                <DatePicker
                                                                    name="date-picker"
                                                                    getCalendarService={() => CalendarService<D, M, Y>}
                                                                    value={value}
                                                                    onChange={handleChange}
                                                                />
                                                            );
                                                        }