React | Date Picker | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code


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

Name	Type	Default	Description
disabled?	boolean		An optional boolean that, if true, disables the date picker component
label?	ReactNode		This optional property represents the label of the field. It can be any valid React node
required?	boolean		This optional boolean property indicates whether the field is required or not
size?	SizeType		An optional SizeType (not defined in the provided code) that could be used to control the size of the date picker component
helper?	ReactNode		This optional property represents a helper element for the field. It can be any valid React node
className?	string		This optional property is a string that specifies the class name
forText?	string		This optional property is a string that can be used for additional text related to the field
forwardedRef?	Ref<HTMLElement>		This optional property is a ref that can be forwarded to the field. It is a Ref for an HTMLElement
htmlFor?	string		This optional property is a string that specifies which form element a label is bound to
onBlur?	(event?: FocusEvent<HTMLInputElement>) => void		An optional function that handles the blur event
onChange?	(value: string) => void		The callback function that is called when the value of the date picker changes
onFocus?	(event?: FocusEvent<HTMLInputElement>) => void		An optional function that handles the focus event
name	string		The name of the date picker
captionIconWithTooltip?	ReactNode		This optional property represents a caption icon with a tooltip. It can be any valid React node
captionIconHandler?	MouseEventHandler<HTMLButtonElement>		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 date picker
error?	ReactNode		This optional property represents an error message for the field. It can be any valid React node
placeholder?	ReactNode		An optional node that displays a placeholder when the date picker component is empty
readOnly?	boolean		This optional boolean property indicates whether the field is read-only or not
getTimeService	() => TimeService		A function that returns the time service
alignRight?	boolean		If true, aligns the text input to the right
clearable?	boolean		If true, the date picker field can be cleared by the user
getValue?	(value: string) => void		A function that gets the current value of the date picker field
id?	string		The ID of the date picker field
indicativeIcon?	IconName		The name of an icon to display in the time input field
inline?	boolean		An optional boolean that, if true, makes the date picker component inline
interactiveIcon?	() => void		The name of an interactive icon to display in the date picker field
leadingImage?	ReactNode		A React node to display as a leading image in the date picker field
loading?	boolean		An optional boolean that, if true, makes the date picker component have a loading state
maxCharacterCount?	number		The maximum number of characters that can be entered in the date picker field
onClear?	() => void		An optional function that handles the clear event
prefix?	ReactNode		A React node to display as a prefix in the input field
closeOnDateClick?	boolean		This optional property determines whether the date picker should close when a date is clicked
dateFormatPattern?	string		This optional property specifies the format in which the date should be displayed
keyboardEntryDisabled?	boolean		This optional property determines whether the user can enter the date using the keyboard
minDate?	D		This optional property represents the minimum date that can be selected in the date picker
maxDate?	D		This optional property represents the maximum date that can be selected in the date picker
monthSelectorVisible?	boolean		This optional property determines whether the month selector in the date picker is visible
dateValue?	D		This optional property represents the currently selected date value in the date picker
onDateChange?	(date: D) => void		This optional property is a function that gets called when the date changes in the date picker
innerRef?	(element: HTMLElement) => void		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>		This optional property can be used to customize the appearance and behavior of the dates in the date picker
inline?	boolean	false	This optional property determines whether the picker is inline (overlay/drawer doesn’t appear) or not

Date Picker

Resources

Example

API