nge(null, newValue, new Date(newValueDate)); }; const onKeyPress = (ev: React.KeyboardEvent) => { if (ev.key === 'Enter' && value) { if (isValidDate(valueDate)) { applyValidators(valueDate); } else { setErrorText(invalidFormatText); } } }; useImperativeHandle( ref, () => ({ setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen), toggleCalendar: (setOpen?: boolean) => { setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev)); }, isCalendarOpen: popoverOpen }), [setPopoverOpen, popoverOpen, selectOpen] ); const createFocusSelectorString = (modifierClass: string) => `.${calendarMonthStyles.calendarMonthDatesCell}.${modifierClass} .${calendarMonthStyles.calendarMonthDate}`; const focusSelectorForSelectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.selected); const focusSelectorForSelectedEndRangeDate = createFocusSelectorString( `${calendarMonthStyles.modifiers.selected}.${calendarMonthStyles.modifiers.endRange}` ); const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current); /** * Returns a CSS selector for a date button element which will receive initial focus after opening calendar popover. * In case of a range picker it returns the end date, if it is selected, start date otherwise. * In case of a normal datepicker it returns the selected date, if present, today otherwise. */ const getElementSelectorToFocus = () => { if (isValidDate(valueDate) && isValidDate(rangeStart)) { return focusSelectorForSelectedEndRangeDate; } if (isValidDate(valueDate) || isValidDate(rangeStart)) { return focusSelectorForSelectedDate; } return focusSelectorForUnselectedDate; }; return (
(date: Date) => !validator(date))} onSelectToggle={(open) => setSelectOpen(open)} monthFormat={monthFormat} weekdayFormat={weekdayFormat} longWeekdayFormat={longWeekdayFormat} dayFormat={dayFormat} weekStart={weekStart} rangeStart={rangeStart} /> } showClose={false} isVisible={popoverOpen} shouldClose={(event, hideFunction) => { event = event as KeyboardEvent; if (event.key === KeyTypes.Escape && selectOpen) { event.stopPropagation(); setSelectOpen(false); return false; } // Let our button handle toggling if (buttonRef.current && buttonRef.current.contains(event.target as Node)) { return false; } if (popoverOpen) { event.stopPropagation(); setPopoverOpen(false); hideFunction(); // If datepicker is required and the popover is opened without the text input // first receiving focus, we want to validate that the text input is not blank upon // closing the popover requiredDateOptions?.isRequired && !value && setErrorText(emptyDateText); } if (event.key === KeyTypes.Escape && popoverOpen) { event.stopPropagation(); } return true; }} withFocusTrap hasNoPadding hasAutoWidth appendTo={appendTo} triggerRef={triggerRef} {...popoverProps} >
setTextInputFocused(true)} onKeyPress={onKeyPress} {...inputProps} />
{(errorText || helperText) && (
{errorText ? ( {errorText} ) : ( helperText )}
)}
); }; export const DatePicker = React.forwardRef(DatePickerBase); DatePicker.displayName = 'DatePicker';