funda-ui 4.7.615 → 4.7.624

package/publish/lib/esm/Date/index.tsx

@@ -0,0 +1,1797 @@
+import React, { useState, useRef, useEffect, forwardRef, KeyboardEvent, ChangeEvent, FocusEvent, useImperativeHandle } from 'react';
+
+import Input from 'funda-input';
+import RootPortal from 'funda-root-portal';
+
+import useComId from 'funda-utils/dist/cjs/useComId';
+import {
+    padZero,
+    dateFormat,
+    isTimeString,
+    getNow,
+    isValidDate,
+    isValidHours,
+    isValidMinutesAndSeconds,
+    isValidYear,
+    isValidMonth,
+    isValidDay,
+    getCurrentYear,
+    getCurrentMonth,
+    getCurrentDay,
+    getLastDayInMonth
+} from 'funda-utils/dist/cjs/date';
+import useWindowScroll from 'funda-utils/dist/cjs/useWindowScroll';
+import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
+import {
+    getAbsolutePositionOfStage
+} from 'funda-utils/dist/cjs/getElementProperty';
+import { isNumeric } from 'funda-utils/dist/cjs/math';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import Calendar from './Calendar';
+
+
+
+// Localization
+import i18n__en_US from './localization/en_US';
+import i18n__zh_CN from './localization/zh_CN';
+
+
+
+
+
+export type DateProps = {
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
+    popupRef?: React.ForwardedRef<any>; // could use "Array" on popupRef.current, such as popupRef.current[0], popupRef.current[1]
+    depth?: number;
+    popupClassName?: string;
+    triggerClassName?: string;
+    wrapperClassName?: string;
+    controlClassName?: string;
+    controlGroupWrapperClassName?: string;
+    controlGroupTextClassName?: string;
+    enableEntireAreaPopup?: boolean;
+    delimiter?: string;
+    hideClearButton?: boolean;
+    showToolsWhenHover?: boolean;
+    offset?: number;
+    exceededSidePosOffset?: number;
+    localization?: 'en_US' | 'zh_CN';
+    type?: 'date' | 'datetime-local' | 'time';
+    onlyTime?: boolean;
+    truncateSeconds?: boolean;
+    valueUseSlash?: boolean;
+    defaultValue?: string;
+    value?: string;
+    clickInitValue?: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    label?: React.ReactNode | string;
+    units?: string;
+    name?: string;
+    alt?: any;
+    disabled?: any;
+    requiredLabel?: React.ReactNode | string;
+    required?: any;
+    readOnly?: any;
+    iconLeft?: React.ReactNode | string;
+    iconRight?: React.ReactNode | string;
+
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    autoComplete?: string;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    onLoad?: (e: any, data: any, allSplittingInputs: any[]) => void;
+    onChange?: (e: any, data: any, isValidDate: boolean, allSplittingInputs: any[]) => void;
+    onBlur?: (e: any, allSplittingInputs: any[]) => void;
+    onFocus?: (e: any, allSplittingInputs: any[]) => void;
+    onPressEnter?: (e: any, allSplittingInputs: any[]) => void;
+    onOpenPopup?: (allSplittingInputs: any[]) => void;
+    onClosePopup?: (allSplittingInputs: any[]) => void;
+    //
+    onChangeDate?: (currentData: any) => void;
+    onChangeMonth?: (currentData: any) => void;
+    onChangeYear?: (currentData: any) => void;
+    onChangeToday?: (currentData: any) => void;
+    onChangeHours?: (currentData: any) => void;
+    onChangeMinutes?: (currentData: any) => void;
+    onChangeSeconds?: (currentData: any) => void;
+    onClear?: (currentData: any) => void;
+
+
+
+    // calendar
+    langHoursTitle?: string;
+    langMinutesTitle?: string;
+    langSecondsTitle?: string;
+    langWeek?: string[];
+    langWeekFull?: string[];
+    langMonths?: string[];
+    langMonthsFull?: string[];
+    langToday?: string;
+};
+
+
+const Date = forwardRef((props: DateProps, externalRef: any) => {
+    const {
+        contentRef,
+        popupRef,
+        depth,
+        triggerClassName,
+        popupClassName,
+        wrapperClassName,
+        controlClassName,
+        controlGroupWrapperClassName,
+        controlGroupTextClassName,
+        enableEntireAreaPopup,
+        delimiter,
+        hideClearButton,
+        showToolsWhenHover,
+        offset,
+        exceededSidePosOffset,
+        localization,
+        type,
+        onlyTime,
+        truncateSeconds,
+        valueUseSlash,
+        disabled,
+        requiredLabel,
+        required,
+        readOnly,
+        defaultValue,
+        value,
+        clickInitValue,
+        min,
+        max,
+        placeholder,
+        label,
+        units,
+        name,
+        alt,
+        id,
+        iconLeft,
+        iconRight,
+        autoComplete,
+        style,
+        tabIndex,
+        onLoad,
+        onChange,
+        onBlur,
+        onFocus,
+        onPressEnter,
+        onOpenPopup,
+        onClosePopup,
+
+        //
+        onChangeDate,
+        onChangeMonth,
+        onChangeYear,
+        onChangeToday,
+        onChangeHours,
+        onChangeMinutes,
+        onChangeSeconds,
+        onClear,
+
+
+        //calendar
+        langHoursTitle,
+        langMinutesTitle,
+        langSecondsTitle,
+        langWeek,
+        langWeekFull,
+        langMonths,
+        langMonthsFull,
+        langToday,
+
+        //
+        ...attributes
+    } = props;
+
+
+    const DEPTH = depth || 1055;  // the default value same as bootstrap
+    const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
+
+    const defaultValueIsEmpty = (s: any) => {
+        return typeof s === 'undefined' || s === null || s === 'null' || s === '';
+    };
+    
+    const propExist = (p: any) => {
+        return typeof p !== 'undefined' && p !== null && p !== '';
+    };
+
+
+
+    // Localization
+    let _langHoursTitle = langHoursTitle || 'Hours';
+    let _langMinutesTitle = langMinutesTitle || 'Minutes';
+    let _langSecondsTitle= langSecondsTitle || 'Seconds';
+    let _langWeek = langWeek;
+    let _langWeekFull = langWeekFull;
+    let _langMonths = langMonths;
+    let _langMonthsFull = langMonthsFull;
+    let _langToday = langToday;
+
+     // 
+     const DELIMITER_DATE = delimiter || '/';
+     const DELIMITER_TIME = ':';
+     const SHOW_TOOLS_ENABLED = !(typeof showToolsWhenHover === 'undefined' || showToolsWhenHover === false);
+     const HIDE_CLEAR_BTN_ENABLED = !(typeof hideClearButton === 'undefined' || hideClearButton === false);
+
+    //
+    const COM_HAS_DATE = typeof onlyTime === 'undefined' || onlyTime === false;
+    const COM_HAS_TIME = type === 'datetime-local' || type === 'time';
+    const COM_NO_SECONDS = typeof truncateSeconds === 'undefined' || truncateSeconds === false;
+
+
+
+    // placeholder
+    let datePlaceholder = placeholder || placeholder === '' ? placeholder : 'yyyy/MM/dd HH:mm:ss';
+
+    if (typeof placeholder === 'undefined') {
+        datePlaceholder = `${COM_HAS_DATE ? 'yyyy/MM/dd ' : ''}${COM_HAS_TIME ? `HH:mm${COM_NO_SECONDS ? ':ss' : ''}` : ''}`;
+    }
+
+    if (typeof localization === 'string') {
+
+        switch (localization) {
+            case 'en_US':
+                _langHoursTitle = i18n__en_US.hoursTitle;
+                _langMinutesTitle = i18n__en_US.minutesTitle;
+                _langSecondsTitle = i18n__en_US.secondsTitle;
+                _langWeek = i18n__en_US.week;
+                _langWeekFull = i18n__en_US.weekFull;
+                _langMonths = i18n__en_US.months;
+                _langMonthsFull = i18n__en_US.monthsFull;
+                _langToday = i18n__en_US.today;
+            break;
+
+            case 'zh_CN':
+                _langHoursTitle = i18n__zh_CN.hoursTitle;
+                _langMinutesTitle = i18n__zh_CN.minutesTitle;
+                _langSecondsTitle = i18n__zh_CN.secondsTitle;
+                _langWeek = i18n__zh_CN.week;
+                _langWeekFull = i18n__zh_CN.weekFull;
+                _langMonths = i18n__zh_CN.months;
+                _langMonthsFull = i18n__zh_CN.monthsFull;
+                _langToday = i18n__zh_CN.today;
+            break;
+
+        }
+
+    }
+
+
+
+    //
+    const POS_OFFSET = Number(offset) || 10;
+    const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
+    const uniqueID = useComId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const modalRef = useRef<any>(null);
+    const inputRef = useRef<any>(null);
+    const listContentRef = useRef<any>(null);
+
+    const partedInputYear = useRef<HTMLInputElement | null>(null);
+    const partedInputMonth = useRef<HTMLInputElement | null>(null);
+    const partedInputDay = useRef<HTMLInputElement | null>(null);
+    const partedInputHours = useRef<HTMLInputElement | null>(null);
+    const partedInputMinutes = useRef<HTMLInputElement | null>(null);
+    const partedInputSeconds = useRef<HTMLInputElement | null>(null);
+
+    const [dateDefaultValueExist, setDateDefaultValueExist] = useState<boolean>(false);
+    const [initSplitClickEvOk, setInitSplitClickEvOk] = useState<boolean>(false);
+    const [splitVals, setSplitVals] = useState<any[]>(['0000','00','00','00','00','00']);
+    const [changedVal, setChangedVal] = useState<string>(value || '');
+    const [isShow, setIsShow] = useState<boolean>(false);
+    const [dateVal, setDateVal] = useState<string>('');
+    const [timeVal, setTimeVal] = useState<string[]>(['00', '00', '00']);
+
+    const hoursArr = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
+    const msArr = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'];
+
+    // blur for popup window
+    const popupBlurEnabled = useRef<boolean>(false);  // DO NOT USE 'useState()'
+
+
+    // effective element movement on keystroke
+    const [focusableSplitInputId, setFocusableSplitInputId] = useState<string>(COM_HAS_DATE ? 'el-year' : 'el-hours');
+    const [splitInputsIds] = useState<string[]>(['el-year', 'el-month', 'el-day', 'el-hours', 'el-minutes', 'el-seconds']);
+    const splitInputs = useRef(new Map<string, HTMLElement>());
+    const splitInputsTabIndex = tabIndex || 0;
+
+    
+
+    //
+    const getAllSplittingInputs = () => {
+        return [
+            partedInputYear.current, 
+            partedInputMonth.current, 
+            partedInputDay.current, 
+            partedInputHours.current, 
+            partedInputMinutes.current, 
+            partedInputSeconds.current
+        ];
+    };
+
+    const onlyHHmm = (str: string) => {
+        // match HH:mm
+        const timePattern = /^([01]\d|2[0-3]):([0-5]\d)$/;
+        return timePattern.test(str);
+    };
+
+
+    // exposes the following methods
+    useImperativeHandle(
+        popupRef,
+        () => ({
+            close: () => {
+                popwinPosHide();
+                handleBlur(null);
+            }
+        }),
+        [popupRef],
+    );
+
+    useImperativeHandle(
+        contentRef,
+        () => ({
+            control: () => {
+                return getAllSplittingInputs();
+            },
+            getLatestVal: () => {
+                return !dateDefaultValueExist ? `` : valueResConverter(changedVal);
+            },
+            clear: (cb?: any) => {
+                clearAll();
+                cb?.();
+
+                onChange?.(inputRef.current, '', false, getAllSplittingInputs());
+            },
+            blur: (cb?: any) => {
+                getAllSplittingInputs().forEach((el: any) => {
+                    if (el !== null) el.blur();
+                });
+         
+                handleBlur(null);
+                cb?.();
+            },
+            /*
+            set('2024-04-18 21:54:09', () => { console.log('callback') }])
+            */
+            set: (value: any, cb?: any) => {
+                
+                const [curInitSplitClickEvOk, curNoTargetVal, curTargetVal] = getActualDefaultValue(value, true);
+                setDateDefaultValueExist(defaultValueIsEmpty(value) ? false : true);
+                initValue(curTargetVal);
+                
+                cb?.();
+
+                onChange?.(inputRef.current, value, isValidDate(value), getAllSplittingInputs());
+            }
+        }),
+        [contentRef, dateDefaultValueExist, changedVal],
+    );
+
+
+    // click outside
+    useClickOutside({
+        enabled: isShow && rootRef.current,
+        isOutside: (event: any) => {
+            return event.target.closest(`.date2d__wrapper`) === null && event.target.closest(`.date2d-cal__wrapper`) === null;
+        },
+        handle: (event: any) => {
+            popwinPosHide();
+            
+            //remove focus style
+            rootRef.current?.classList.remove('focus');
+
+            // move out the popup window
+            if (popupBlurEnabled.current) {
+                onBlur?.(inputRef.current, getAllSplittingInputs());
+                popupBlurEnabled.current = false;
+            }
+        }
+    }, [isShow, rootRef]);
+
+
+
+
+    // Add function to the element that should be used as the scrollable area.
+    // const [scrollData, windowScrollUpdate] = useWindowScroll({
+    //     performance: ['debounce', 50],   // "['debounce', 500]" or "['throttle', 500]"
+    //     handle: (scrollData: any) => {
+    //         popwinPosHide();
+    //     }
+    // });
+
+
+
+    const getFullTimeData = (v: Date | String, padZeroEnabled: boolean = true) => {
+
+        if (typeof v === 'string' && !isValidDate(v)) {
+            return {
+                res: '0000-00-00 00:00:00',
+                resNoSeconds: '0000-00-00 00:00',
+                date: `0000-00-00`,
+                year: `0000`,
+                month: `00`,
+                day: `00`,
+                hours: `00`,
+                minutes: `00`,
+                seconds: `00`
+            }
+        }
+
+        const date: any = dateFormat(v as any);
+
+        const year = date.getFullYear();
+        const month = padZero(date.getMonth() + 1, padZeroEnabled);
+        const day = padZero(date.getDate(), padZeroEnabled);
+        const hours = padZero(date.getHours(), padZeroEnabled);
+        const minutes = padZero(date.getMinutes(), padZeroEnabled);
+        const seconds = padZero(date.getSeconds(), padZeroEnabled);
+        const res = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+        const res2 = `${year}-${month}-${day} ${hours}:${minutes}`;
+
+        return {
+            res: res,
+            resNoSeconds: res2,
+            date: `${year}-${month}-${day}`,
+            year: `${year}`,
+            month: `${month}`,
+            day: `${day}`,
+            hours: `${hours}`,
+            minutes: `${minutes}`,
+            seconds: `${seconds}`
+        }
+    };
+
+
+    // 
+    const MIN: any = typeof min !== 'undefined' && min !== '' && min !== null && isValidDate(min) ? getFullTimeData(min) : '';
+    const MAX: any = typeof max !== 'undefined' && max !== '' && max !== null && isValidDate(max) ? getFullTimeData(max) : '';
+
+    const getActualDefaultValue = (v?: any, init: boolean = false) => {
+        const _v = getFullTimeData(getNow());
+        const _nowVal: any = `${_v.date} ${_v.hours}:${_v.minutes}:${_v.seconds}`;
+
+        // expected default value (only HH:mm:ss)
+        const _expectedValue = isTimeString(v) || onlyHHmm(v) ? `${_v.date} ${onlyHHmm(v) ? v + ':00' : v}` : v;
+       
+        
+        if (!init) setInitSplitClickEvOk(true);
+
+
+        if (!initSplitClickEvOk) {
+
+
+            let noTargetVal = typeof clickInitValue === 'undefined' || clickInitValue === null || clickInitValue === 'null' || clickInitValue === '';
+            if (!defaultValueIsEmpty(v)) {
+                noTargetVal = true;
+            }
+
+            //
+            let targetVal: any = noTargetVal ? (defaultValueIsEmpty(v) ? _nowVal : _expectedValue) : clickInitValue;
+
+            if (typeof v === 'undefined') {
+                targetVal = noTargetVal ? _nowVal : clickInitValue;
+            }
+
+            //
+            return [false, noTargetVal, targetVal];
+        } else {
+
+        
+            let targetVal: any = defaultValueIsEmpty(v) ? _nowVal : _expectedValue;
+
+            if (typeof v === 'undefined') {
+                targetVal = _nowVal;
+            }
+
+            return [true, true, targetVal]; 
+        }
+
+
+        
+    };
+
+
+
+    function popwinPosInit() {
+
+        if (modalRef.current === null || listContentRef.current === null || inputRef.current === null) return;
+
+
+        // update modal position
+        const _modalRef: any = modalRef.current;
+        const _triggerRef: any = inputRef.current;
+
+        // console.log(getAbsolutePositionOfStage(_triggerRef));
+
+        if (_modalRef === null) return;
+
+        const { x, y, width, height } = getAbsolutePositionOfStage(_triggerRef);
+        const _triggerBox = _triggerRef.getBoundingClientRect();
+        let targetPos = '';
+
+
+        // STEP 1:
+        //-----------
+        // Detect position
+        if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
+            targetPos = 'bottom';
+        } else {
+            targetPos = 'top';
+        }
+
+        // STEP 2:
+        //-----------
+        // Adjust position
+        if (targetPos === 'top') {
+            _modalRef.style.left = x + 'px';
+            //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
+            _modalRef.style.marginTop = 0;
+            _modalRef.style.top = 'auto';
+            _modalRef.style.bottom = (window.innerHeight - _triggerBox.top) + POS_OFFSET + 2 + 'px';
+            _modalRef.style.setProperty('position', 'fixed', 'important');
+            _modalRef.classList.add('pos-top');
+        }
+
+        if (targetPos === 'bottom') {
+            _modalRef.style.marginTop = 0;
+            _modalRef.style.left = x + 'px';
+            _modalRef.style.bottom = 'auto';
+            _modalRef.style.top = y + height + POS_OFFSET + 'px';
+            _modalRef.style.setProperty('position', 'absolute', 'important');
+            _modalRef.classList.remove('pos-top');
+        }
+ 
+        // STEP 3:
+        //-----------
+        // Determine whether it exceeds the far right or left side of the screen
+        // Determine whether it exceeds the max height of the popup
+        const _modalContent = _modalRef;
+        const _modalBox = _modalContent.getBoundingClientRect();
+        if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
+
+            // 10 pixels is used to account for some bias in mobile devices
+            if ((_modalBox.right + 10) > window.innerWidth) {
+                const _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
+                _modalContent.dataset.offset = _modalOffsetPosition;
+                _modalContent.style.marginLeft = `-${_modalOffsetPosition}px`;
+                // console.log('_modalPosition: ', _modalOffsetPosition)
+            }
+
+
+            if ((_modalBox.left - 10) < 0) {
+                const _modalOffsetPosition = Math.abs(_modalBox.left) + EXCEEDED_SIDE_POS_OFFSET;
+                _modalContent.dataset.offset = _modalOffsetPosition;
+                _modalContent.style.marginLeft = `${_modalOffsetPosition}px`;
+                // console.log('_modalPosition: ', _modalOffsetPosition)
+            }
+
+            if (window.innerHeight - _modalBox.bottom < 0) {
+                _modalRef.style.marginTop = `${window.innerHeight - _modalBox.bottom}px`;
+            }
+
+        }
+
+    }
+
+    function popwinPosHide() {
+        setIsShow(false);
+        onClosePopup?.(getAllSplittingInputs());
+
+    }
+
+
+
+    function handleShow() {
+        setIsShow(true);
+
+        setTimeout(() => {
+            popwinPosInit();
+
+            onOpenPopup?.(getAllSplittingInputs());
+
+        }, 0);
+
+        // focus
+        handleFocus(null);
+
+    }
+
+
+    function handleFocus(event: FocusEvent<HTMLElement> | null) {
+        rootRef.current?.classList.add('focus');
+
+
+        //
+        onFocus?.(inputRef.current, getAllSplittingInputs());
+
+    }
+
+    function handleChange(e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement> | null, isComposition: boolean, el: HTMLInputElement, value: string) {
+
+        onChange?.(inputRef.current, value, isValidDate(value), getAllSplittingInputs());
+
+    }
+
+
+    function handleBlur(event: FocusEvent<HTMLElement> | null) {
+
+        //remove focus style
+        rootRef.current?.classList.remove('focus');
+
+        //
+        onBlur?.(inputRef.current, getAllSplittingInputs());
+    }
+
+
+    function handleInitSplitClickEv(e: any) {
+        e.preventDefault();
+        e.stopPropagation();  // Avoid triggering other inputs
+
+        // If disabled or readOnly, the operations are not performed
+        if (disabled || readOnly) {
+            return;
+        }
+
+        e.target.select();
+
+        
+        resetDefauleValueExist();
+
+        // Automatically pop up a pop-up window
+        if (enableEntireAreaPopup) {
+            handleShow();
+        }
+
+        // If there is no valid default value in the input field, 
+        // onChange should be triggered only after the resetDefauleValueExist() function is processed
+        if (!dateDefaultValueExist) {
+            const _date = `${splitVals[0]}-${splitVals[1]}-${splitVals[2]}`;
+            const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
+            onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
+        }
+
+
+    }
+
+    async function handleKeyPressed(event: KeyboardEvent<HTMLDivElement>) {
+        const key = event.code;
+    
+        if (key === 'Enter' || key === 'NumpadEnter') {
+            event.preventDefault();
+
+            getAllSplittingInputs().forEach((el: any) => {
+                if (el !== null) el.blur();
+            });
+     
+            handleBlur(null);
+
+            //
+            onPressEnter?.(inputRef.current, getAllSplittingInputs());
+        }
+    }
+
+    async function handleKeyPressedForSplitInputs(event: KeyboardEvent<HTMLDivElement>) {
+        const key = event.code;
+        const btnMark = (event.target as any).dataset.mark;
+        const isNumLockOn = event.getModifierState && event.getModifierState('NumLock');
+        
+        // Check for both regular arrow keys and numpad arrow keys
+        // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+        const isLeftArrow = key === 'ArrowLeft' || (key === 'Numpad4' && !isNumLockOn);
+        const isRightArrow = key === 'ArrowRight' || (key === 'Numpad6' && !isNumLockOn);
+        
+        const move = (direction: 'left' | 'right') => {
+            const currentIndex = splitInputsIds.findIndex((s: string) => s === btnMark);
+            const nextIndex = direction === 'left' 
+                ? currentIndex === 0 ? splitInputsIds.length - 1 : currentIndex - 1 
+                : currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex + 1;
+                
+            const nextOption = splitInputsIds.at(nextIndex);
+            if (nextOption) {
+                setTimeout(() => {
+                    (splitInputs.current.get(nextOption) as HTMLInputElement)?.select();
+                }, 0);
+                setFocusableSplitInputId(nextOption);
+            }
+        };
+
+        if (isLeftArrow) {
+            move('left');
+        }
+
+        if (isRightArrow) {
+            move('right');
+        }
+    }
+
+
+    function clearAll() {
+        setDateDefaultValueExist(false);
+        onChange?.(inputRef.current, '', false, getAllSplittingInputs());
+    }
+
+
+
+    function resetDefauleValueExist() {
+        // Does the current input box have a "valid default value"?
+        if (!dateDefaultValueExist) setDateDefaultValueExist(true);
+    }
+
+    function resetPopupBlurStatus() {
+        if (!popupBlurEnabled.current) popupBlurEnabled.current = true;
+    }
+
+
+    function valueResConverter(inputData: any) {
+        const v = isValidDate(inputData) ? inputData : `${getFullTimeData(getNow()).date} ${inputData}`;
+
+
+        const _onlyTime = `${getFullTimeData(v).hours}:${getFullTimeData(v).minutes}${truncateSeconds ? `` : `:${getFullTimeData(v).seconds}`}`;
+        const _date = `${getFullTimeData(v).year}${valueUseSlash ? `/` : '-'}${getFullTimeData(v).month}${valueUseSlash ? `/` : '-'}${getFullTimeData(v).day}`;
+        const _time = COM_HAS_TIME ? ` ${getFullTimeData(v).hours}:${getFullTimeData(v).minutes}${truncateSeconds ? `` : `:${getFullTimeData(v).seconds}`}` : '';
+
+        return onlyTime ? _onlyTime : `${_date}${_time}`;
+    }
+
+
+    
+    function checkDisabledSeconds(curYear: number | string, curMonth: number, curDay: number | string, curHours: number | string, curMinutes: number | string, curSeconds: number | string) {
+        let res: boolean = false;
+
+        // maximum
+        if (MAX !== '') {
+            if (Number(curYear) > Number(MAX.year)) {
+                res = true;
+            }
+
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) > Number(MAX.month)) {
+                res = true;
+            }
+    
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) === Number(MAX.month) && Number(curDay) > Number(MAX.day)) {
+                res = true;
+            }
+
+
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) === Number(MAX.month) && Number(curDay) === Number(MAX.day) && Number(curHours) > Number(MAX.hours) ) {
+                res = true;
+            }
+
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) === Number(MAX.month) && Number(curDay) === Number(MAX.day) && Number(curHours) === Number(MAX.hours) && Number(curMinutes) > Number(MAX.minutes) ) {
+                res = true;
+            }
+
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) === Number(MAX.month) && Number(curDay) === Number(MAX.day) && Number(curHours) === Number(MAX.hours) && Number(curMinutes) === Number(MAX.minutes) && Number(curSeconds) > Number(MAX.seconds) ) {
+                res = true;
+            }
+        }
+
+        // minimum
+        if (MIN !== '') {
+            if (Number(curYear) < Number(MIN.year)) {
+                res = true;
+            }
+
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) < Number(MIN.month)) {
+                res = true;
+            }
+    
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) === Number(MIN.month) && Number(curDay) < Number(MIN.day)) {
+                res = true;
+            }
+
+
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) === Number(MIN.month) && Number(curDay) === Number(MIN.day) && Number(curHours) < Number(MIN.hours) ) {
+                res = true;
+            }
+
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) === Number(MIN.month) && Number(curDay) === Number(MIN.day) && Number(curHours) === Number(MIN.hours) && Number(curMinutes) < Number(MIN.minutes) ) {
+                res = true;
+            }
+
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) === Number(MIN.month) && Number(curDay) === Number(MIN.day) && Number(curHours) === Number(MIN.hours) && Number(curMinutes) === Number(MIN.minutes) && Number(curSeconds) < Number(MIN.seconds) ) {
+                res = true;
+            }
+        }
+
+ 
+        return res;
+    }
+
+
+    function checkDisabledMinutes(curYear: number | string, curMonth: number, curDay: number | string, curHours: number | string, curMinutes: number | string) {
+        let res: boolean = false;
+
+        // maximum
+        if (MAX !== '') {
+            if (Number(curYear) > Number(MAX.year)) {
+                res = true;
+            }
+
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) > Number(MAX.month)) {
+                res = true;
+            }
+    
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) === Number(MAX.month) && Number(curDay) > Number(MAX.day)) {
+                res = true;
+            }
+
+
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) === Number(MAX.month) && Number(curDay) === Number(MAX.day) && Number(curHours) > Number(MAX.hours) ) {
+                res = true;
+            }
+
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) === Number(MAX.month) && Number(curDay) === Number(MAX.day) && Number(curHours) === Number(MAX.hours) && Number(curMinutes) > Number(MAX.minutes) ) {
+                res = true;
+            }
+        }
+
+        // minimum
+        if (MIN !== '') {
+            if (Number(curYear) < Number(MIN.year)) {
+                res = true;
+            }
+            
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) < Number(MIN.month)) {
+                res = true;
+            }
+            
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) === Number(MIN.month) && Number(curDay) < Number(MIN.day)) {
+                res = true;
+            }
+            
+            
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) === Number(MIN.month) && Number(curDay) === Number(MIN.day) && Number(curHours) < Number(MIN.hours) ) {
+                res = true;
+            }
+            
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) === Number(MIN.month) && Number(curDay) === Number(MIN.day) && Number(curHours) === Number(MIN.hours) && Number(curMinutes) < Number(MIN.minutes) ) {
+                res = true;
+            }
+        }
+
+       
+        return res;
+    }
+
+
+    function checkDisabledHours(curYear: number | string, curMonth: number, curDay: number | string, curHours: number | string) {
+        let res: boolean = false;
+
+        // maximum
+        if (MAX !== '') {
+            if (Number(curYear) > Number(MAX.year)) {
+                res = true;
+            }
+
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) > Number(MAX.month)) {
+                res = true;
+            }
+    
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) === Number(MAX.month) && Number(curDay) > Number(MAX.day)) {
+                res = true;
+            }
+
+
+            if (Number(curYear) === Number(MAX.year) && Number(curMonth+1) === Number(MAX.month) && Number(curDay) === Number(MAX.day) && Number(curHours) > Number(MAX.hours) ) {
+                res = true;
+            }
+        }
+
+        // minimum
+        if (MIN !== '') {
+            if (Number(curYear) < Number(MIN.year)) {
+                res = true;
+            }
+            
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) < Number(MIN.month)) {
+                res = true;
+            }
+            
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) === Number(MIN.month) && Number(curDay) < Number(MIN.day)) {
+                res = true;
+            }
+            
+            
+            if (Number(curYear) === Number(MIN.year) && Number(curMonth+1) === Number(MIN.month) && Number(curDay) === Number(MIN.day) && Number(curHours) < Number(MIN.hours) ) {
+                res = true;
+            }
+        }
+
+        return res;
+    }
+
+    function initValue(v: any) {
+        const _res = valueResConverter(v);
+
+        setChangedVal(_res);
+        
+        if (isValidDate(v)) {
+
+            const {
+                date,
+                year,
+                month,
+                day,
+                hours,
+                minutes,
+                seconds
+            } = getFullTimeData(v);
+
+
+            setDateVal(date);
+            setTimeVal([hours, minutes, seconds]);
+            setSplitVals([year, month, day, hours, minutes, seconds]);
+        }
+
+        return [_res, v]
+
+    }
+
+    function tools() {
+        return <span className={combinedCls(
+            'date2d__control-tools',
+            {
+                'date2d__control-tools--hover-show-tools': SHOW_TOOLS_ENABLED
+            }
+
+        )}>
+
+            <a
+                tabIndex={-1}
+                href="#"
+                className={combinedCls(
+                    'date2d__control-tools__close',
+                    {
+                        'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist || disabled || readOnly
+                    }
+                )} onClick={(e: React.MouseEvent) => {
+                    e.preventDefault();
+                    e.stopPropagation();  // Avoid triggering pop-ups
+
+                    // If disabled or readOnly, the operations are not performed
+                    if (disabled || readOnly) {
+                        return;
+                    }
+
+                    clearAll();
+                    onClear?.(getFullTimeData(''));
+                }}
+            ><svg width="12px" height="12px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a>
+
+            <a
+                tabIndex={-1}
+                href="#"
+                className="date2d__control-tools__trigger"
+                onClick={(e: React.MouseEvent) => {
+                    e.preventDefault();
+                    e.stopPropagation();  // Avoid triggering pop-ups
+
+                    // If disabled or readOnly, the operations are not performed
+                    if (disabled || readOnly) {
+                        return;
+                    }
+
+                    handleShow();
+                }}
+            >
+                <svg width="14px" height="14px" viewBox="0 0 24 24" fill="none">
+                    <path d="M3 9H21M9 15L11 17L15 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+            </a>
+
+        </span>;
+    }
+
+
+    useEffect(() => {
+
+   
+        // update default value
+        //--------------
+        const [curInitSplitClickEvOk, curNoTargetVal, curTargetVal] = getActualDefaultValue(value, true);
+        setDateDefaultValueExist(defaultValueIsEmpty(value) ? false : true);
+        const [a, b] = initValue(curTargetVal);
+        onLoad?.(a, getFullTimeData(b), getAllSplittingInputs());
+
+
+    }, [value]);
+
+    useEffect(() => {
+
+        // update default value (It does not re-render the component because the incoming value changes.)
+        //--------------
+        if (typeof defaultValue !== 'undefined') { //REQUIRED
+            const [curInitSplitClickEvOk, curNoTargetVal, curTargetVal] = getActualDefaultValue(defaultValue, true);
+            setDateDefaultValueExist(defaultValueIsEmpty(defaultValue) ? false : true);
+            const [a, b] = initValue(curTargetVal);
+            onLoad?.(a, getFullTimeData(b), getAllSplittingInputs());
+        }
+
+    }, []);
+
+
+    return (
+        <>
+
+                {label ? <>{typeof label === 'string' ? <div className="date2d__label"><label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label></div> : <div className="date2d__label"><label htmlFor={idRes} className="form-label">{label}</label></div>}</> : null}
+    
+            
+            <div
+                ref={rootRef}
+                data-overlay-id={`date2d__wrapper-${idRes}`}
+                className={combinedCls(
+                    'date2d__trigger d-inline-block',
+                    `is-${type}`,
+                    triggerClassName,
+                    {
+                        'date2d__trigger--hover-show-tools': SHOW_TOOLS_ENABLED
+                    }
+                )}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onKeyDown={handleKeyPressed}
+                onClick={enableEntireAreaPopup && !disabled && !readOnly ? handleShow : () => {}}
+
+            >
+
+
+                <div className="date2d__control">
+                    <Input
+                        ref={(node) => {
+                            inputRef.current = node;
+                            if (typeof externalRef === 'function') {
+                                externalRef(node);
+                            } else if (externalRef) {
+                                externalRef.current = node;
+                            }
+                        }}
+                        disabled={disabled}
+                        readOnly={readOnly}
+                        tabIndex={-1}
+                        type="text"
+                        inputMode="none"
+                        data-date-info={JSON.stringify(getFullTimeData(changedVal))}
+                        wrapperClassName={wrapperClassName}
+                        controlClassName={controlClassName}
+                        controlExClassName=""
+                        controlGroupWrapperClassName={controlGroupWrapperClassName}
+                        controlGroupTextClassName={controlGroupTextClassName}
+                        id={idRes}
+                        name={name}
+                        alt={alt}
+                        placeholder={datePlaceholder}
+                        value={!dateDefaultValueExist ? `` : valueResConverter(changedVal)}
+                        autoComplete="off"
+                        onChange={handleChange}
+                        label=""
+                        units={units}
+                        iconLeft={iconLeft}
+                        iconRight={iconRight}
+                        requiredLabel={requiredLabel}
+                        required={required}
+                        appendControl={<>
+                         <div className="date2d__control__inputplaceholder">
+
+
+                                {/*
+                                ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                                +++++++++++++++++++ Split Inputs +++++++++++++++++++++++++++++
+                                ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                                */}
+                                {COM_HAS_DATE ? <>
+                                    <input
+                                        ref={(node) => {
+                                            partedInputYear.current = node;
+                                            if (node) {
+                                                splitInputs.current.set(splitInputsIds[0], node);
+                                            } else {
+                                                splitInputs.current.delete(splitInputsIds[0]);
+                                            }
+                                        }}
+                                        tabIndex={splitInputsTabIndex}
+                                        data-mark={`${splitInputsIds[0]}`}
+                                        onKeyDown={handleKeyPressedForSplitInputs}
+                                        inputMode="numeric"
+                                        className="date2d__control__inputplaceholder--year"
+                                        value={!dateDefaultValueExist ? `` : splitVals[0]}
+                                        maxLength={4}
+                                        autoComplete="off"
+                                        disabled={disabled || null}
+                                        readOnly={readOnly || null}
+                                        onClick={handleInitSplitClickEv}
+                                        onChange={(e: any) => {
+                                            let _val = e.target.value;
+                                            if (_val !== '' && !isValidYear(_val) && isNumeric(_val) && Number(_val) > 9999) _val = '9999';
+                                            if (_val !== '' && !isValidYear(_val) && !isNumeric(_val)) _val = `${getCurrentYear()}`;
+
+                                            const _date = `${_val}-${splitVals[1]}-${splitVals[2]}`;
+                                            const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
+
+                                            onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
+                                            setSplitVals((prevState: string[]) => {
+                                                return [_val, prevState[1], prevState[2], prevState[3], prevState[4], prevState[5]];
+                                            });
+
+                                            // update other data
+                                            setDateVal(_date);
+                                            setChangedVal(_full);
+                                            setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
+
+                                            // Auto focus to next input if year is 4 digits
+                                            if (_val.length === 4) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[1]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
+                                        }}
+                                        {...attributes}
+                                    />
+                                    {dateDefaultValueExist ? DELIMITER_DATE : null}
+                                    <input
+                                        ref={(node) => {
+                                            partedInputMonth.current = node;
+                                            if (node) {
+                                                splitInputs.current.set(splitInputsIds[1], node);
+                                            } else {
+                                                splitInputs.current.delete(splitInputsIds[1]);
+                                            }
+                                        }}
+                                        tabIndex={splitInputsTabIndex}
+                                        data-mark={`${splitInputsIds[1]}`}
+                                        onKeyDown={handleKeyPressedForSplitInputs}
+                                        inputMode="numeric"
+                                        className="date2d__control__inputplaceholder--month"
+                                        value={!dateDefaultValueExist ? `` : splitVals[1]}
+                                        maxLength={2}
+                                        autoComplete="off"
+                                        disabled={disabled || null}
+                                        readOnly={readOnly || null}
+                                        onClick={handleInitSplitClickEv}
+                                        onChange={(e: any) => {
+                                            let _val = e.target.value;
+                                            if (_val !== '' && !isValidMonth(_val) && isNumeric(_val)) {
+                                                if (Number(_val) > 12) _val = '12';
+                                                if (Number(_val) < 1 && Number(_val) > 0) _val = '01';
+                                            }
+                                            if (_val !== '' && !isValidMonth(_val) && !isNumeric(_val)) _val = `${getCurrentMonth()}`;
+
+                                            const _date = `${splitVals[0]}-${_val}-${splitVals[2]}`;
+                                            const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
+
+                                            onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
+                                            setSplitVals((prevState: string[]) => {
+                                                return [prevState[0], _val, prevState[2], prevState[3], prevState[4], prevState[5]];
+                                            });
+
+                                            // update other data
+                                            setDateVal(_date);
+                                            setChangedVal(_full);
+                                            setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
+
+                                            // Auto focus to next input if month is 2 digits
+                                            if (_val.length === 2) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[2]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
+                                        }}
+                                        {...attributes}
+                                    />
+                                    {dateDefaultValueExist ? DELIMITER_DATE : null}
+                                    <input
+                                        ref={(node) => {
+                                            partedInputDay.current = node;
+                                            if (node) {
+                                                splitInputs.current.set(splitInputsIds[2], node);
+                                            } else {
+                                                splitInputs.current.delete(splitInputsIds[2]);
+                                            }
+                                        }}
+                                        tabIndex={splitInputsTabIndex}
+                                        data-mark={`${splitInputsIds[2]}`}
+                                        onKeyDown={handleKeyPressedForSplitInputs}
+                                        inputMode="numeric"
+                                        className="date2d__control__inputplaceholder--day"
+                                        value={!dateDefaultValueExist ? `` : splitVals[2]}
+                                        maxLength={2}
+                                        autoComplete="off"
+                                        disabled={disabled || null}
+                                        readOnly={readOnly || null}
+                                        onClick={handleInitSplitClickEv}
+                                        onChange={(e: any) => {
+                                            let _val = e.target.value;
+
+                                            const _day = `${splitVals[0]}-${splitVals[1]}-01`;
+                                            const d = getLastDayInMonth(_day, new window.Date(_day).getMonth() + 1);
+
+                                            if (_val !== '' && isValidDay(_val) && isNumeric(_val)) {
+                                                if (Number(_val) > Number(d)) _val = `${d}`;
+                                            }     
+                                            
+                                            if (_val !== '' && !isValidDay(_val) && isNumeric(_val)) {
+                                                if (Number(_val) > Number(d)) _val = `${d}`;
+                                                if (Number(_val) < 1 && Number(_val) > 0) _val = '01';
+                                            }
+                                            if (_val !== '' && !isValidDay(_val) && !isNumeric(_val)) _val = `${getCurrentDay()}`;
+
+                                            const _date = `${splitVals[0]}-${splitVals[1]}-${_val}`;
+                                            const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
+
+                                            onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
+                                            setSplitVals((prevState: string[]) => {
+                                                return [prevState[0], prevState[1], _val, prevState[3], prevState[4], prevState[5]];
+                                            });
+
+                                            // update other data
+                                            setDateVal(_date);
+                                            setChangedVal(_full);
+                                            setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
+
+                                            // Auto focus to next input if day is 2 digits
+                                            if (_val.length === 2) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[3]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
+                                        }}
+                                        {...attributes}
+                                    />
+                                    &nbsp;
+
+                                </> : null}
+
+                                {COM_HAS_TIME ? <>
+                                    {/* TIME CONTROL */}
+                                    <input
+                                        ref={(node) => {
+                                            partedInputHours.current = node;
+                                            if (node) {
+                                                splitInputs.current.set(splitInputsIds[3], node);
+                                            } else {
+                                                splitInputs.current.delete(splitInputsIds[3]);
+                                            }
+                                        }}
+                                        tabIndex={splitInputsTabIndex}
+                                        data-mark={`${splitInputsIds[3]}`}
+                                        onKeyDown={handleKeyPressedForSplitInputs}
+                                        inputMode="numeric"
+                                        className="date2d__control__inputplaceholder--hours"
+                                        value={!dateDefaultValueExist ? `` : splitVals[3]}
+                                        maxLength={2}
+                                        autoComplete="off"
+                                        disabled={disabled || null}
+                                        readOnly={readOnly || null}
+                                        onClick={handleInitSplitClickEv}
+                                        onChange={(e: any) => {
+                                            let _val = e.target.value;
+                                            if (_val !== '' && !isValidHours(_val) && isNumeric(_val) && Number(_val) > 23) _val = '23';
+                                            if (_val !== '' && !isValidHours(_val) && !isNumeric(_val)) _val = '00';
+                                            
+
+                                            const _date = `${splitVals[0]}-${splitVals[1]}-${splitVals[2]}`;
+                                            const _full = `${_date} ${_val}:${splitVals[4]}:${splitVals[5]}`;
+                                            
+
+                                            onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
+                                            setSplitVals((prevState: string[]) => {
+                                                return [prevState[0], prevState[1], prevState[2], _val, prevState[4], prevState[5]];
+                                            });
+
+                                            // update other data
+                                            setDateVal(_date);
+                                            setChangedVal(_full);
+                                            setTimeVal([_val, splitVals[4], splitVals[5]]);
+
+                                            // Auto focus to next input if hour is 2 digits
+                                            if (_val.length === 2) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[4]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
+                                        }}
+                                        {...attributes}
+                                    />
+                                    {/* TIME CONTROL */}
+
+                                    {/* TIME CONTROL */}
+                                    {dateDefaultValueExist ? DELIMITER_TIME : null}
+                                    <input
+                                        ref={(node) => {
+                                            partedInputMinutes.current = node;
+                                            if (node) {
+                                                splitInputs.current.set(splitInputsIds[4], node);
+                                            } else {
+                                                splitInputs.current.delete(splitInputsIds[4]);
+                                            }
+                                        }}
+                                        tabIndex={splitInputsTabIndex}
+                                        data-mark={`${splitInputsIds[4]}`}
+                                        onKeyDown={handleKeyPressedForSplitInputs}
+                                        inputMode="numeric"
+                                        className="date2d__control__inputplaceholder--minutes"
+                                        value={!dateDefaultValueExist ? `` : splitVals[4]}
+                                        maxLength={2}
+                                        autoComplete="off"
+                                        disabled={disabled || null}
+                                        readOnly={readOnly || null}
+                                        onClick={handleInitSplitClickEv}
+                                        onChange={(e: any) => {
+                                            let _val = e.target.value;
+                                            if (_val !== '' && !isValidMinutesAndSeconds(_val) && isNumeric(_val) && Number(_val) > 59) _val = '59';
+                                            if (_val !== '' && !isValidMinutesAndSeconds(_val) && !isNumeric(_val)) _val = '00';
+                                            
+
+                                            const _date = `${splitVals[0]}-${splitVals[1]}-${splitVals[2]}`;
+                                            const _full = `${_date} ${splitVals[3]}:${_val}:${splitVals[5]}`;
+
+
+                                            onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
+                                            setSplitVals((prevState: string[]) => {
+                                                return [prevState[0], prevState[1], prevState[2], prevState[3], _val, prevState[5]];
+                                            });
+
+                                            // update other data
+                                            setDateVal(_date);
+                                            setChangedVal(_full);
+                                            setTimeVal([splitVals[3], _val, splitVals[5]]);
+
+                                            // Auto focus to next input if minute is 2 digits
+                                            if (_val.length === 2) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[5]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
+                                        }}
+                                        {...attributes}
+                                    />
+                                    {/* TIME CONTROL */}
+
+
+                                    {/* TIME CONTROL */}
+                                    {(COM_NO_SECONDS) ? <>
+                                        {dateDefaultValueExist ? DELIMITER_TIME : null}
+                                        <input
+                                            ref={(node) => {
+                                                partedInputSeconds.current = node;
+                                                if (node) {
+                                                    splitInputs.current.set(splitInputsIds[5], node);
+                                                } else {
+                                                    splitInputs.current.delete(splitInputsIds[5]);
+                                                }
+                                            }}
+                                            tabIndex={splitInputsTabIndex}
+                                            data-mark={`${splitInputsIds[5]}`}
+                                            onKeyDown={handleKeyPressedForSplitInputs}
+                                            inputMode="numeric"
+                                            className="date2d__control__inputplaceholder--seconds"
+                                            value={!dateDefaultValueExist ? `` : splitVals[5]}
+                                            maxLength={2}
+                                            autoComplete="off"
+                                            disabled={disabled || null}
+                                            readOnly={readOnly || null}
+                                            onClick={handleInitSplitClickEv}
+                                            onChange={(e: any) => {
+                                                let _val = e.target.value;
+                                                if (_val !== '' && !isValidMinutesAndSeconds(_val) && isNumeric(_val) && Number(_val) > 59) _val = '59';
+                                                if (_val !== '' && !isValidMinutesAndSeconds(_val) && !isNumeric(_val)) _val = '00';
+
+
+                                                const _date = `${splitVals[0]}-${splitVals[1]}-${splitVals[2]}`;
+                                                const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${_val}`;
+
+
+                                                onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
+                                                setSplitVals((prevState: string[]) => {
+                                                    return [prevState[0], prevState[1], prevState[2], prevState[3], prevState[4], _val];
+                                                });
+
+
+                                                // update other data
+                                                setDateVal(_date);
+                                                setChangedVal(_full);
+                                                setTimeVal([splitVals[3], splitVals[4], _val]);
+                                                // No auto focus for the last input (seconds)
+                                            }}
+                                            {...attributes}
+                                        />
+                                    </> : null}
+                                    {/* TIME CONTROL */}
+                                </> : null}
+
+
+                                {/*
+                                ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                                +++++++++++++++++++ /Split Inputs +++++++++++++++++++++++++++++
+                                ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                                */}
+
+                            </div>
+
+
+
+                            {/* TOOLS */}
+                            {propExist(iconRight) ? tools() : null}
+                            {/* /TOOLS */}
+
+
+                        </>}
+                        style={style}
+                        {...attributes}
+                    />
+
+                    {/* TOOLS */}
+                    {!propExist(iconRight) ? tools() : null}
+                    {/* /TOOLS */}
+
+                   
+                </div>
+
+                
+
+            </div>
+
+
+            <RootPortal show={isShow} containerClassName={combinedCls(
+                'Date',
+                `Date--${type}`
+            )}>
+                <div
+                    ref={modalRef}
+                    id={`date2d__wrapper-${idRes}`}
+                    className={combinedCls(
+                        'date2d__wrapper',
+                        `is-${type}`,
+                        popupClassName,
+                        'active'
+                    )}
+                    style={{
+                        display: 'none',
+                        zIndex: DEPTH
+                    }}
+                    {...attributes}
+                >
+
+
+                    <div
+                        ref={listContentRef}
+                        className="date2d__tools-container d-flex flex-row"
+                    >
+                        {/* CALENDAR */}
+                        {COM_HAS_DATE ? <>
+                            <div className="date2d__calendar">
+                                <Calendar
+                                    min={min}
+                                    max={max}
+                                    customTodayDate={changedVal}
+                                    langWeek={_langWeek}
+                                    langWeekFull={_langWeekFull}
+                                    langMonths={_langMonths}
+                                    langMonthsFull={_langMonthsFull}
+                                    langToday={_langToday}
+                                    onChangeDate={(e: any, currentData: any) => {
+                                        // If disabled or readOnly, the operations are not performed
+                                        if (disabled || readOnly) {
+                                            return;
+                                        }
+                                        
+                                        resetDefauleValueExist();
+
+                                        //
+                                        const _v = getFullTimeData(`${currentData.date} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+                                        setDateVal(currentData.date);
+                                        setChangedVal(`${currentData.date} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+                                        setSplitVals((prevState: string[]) => {
+                                            return [_v.year, _v.month, _v.day, prevState[3], prevState[4], prevState[5]];
+                                        });
+                                        onChange?.(inputRef.current, _v, true, getAllSplittingInputs());
+
+                                        // 
+                                        onChangeDate?.(_v);
+
+                                        //
+                                        resetPopupBlurStatus();
+                                        
+
+                                    }}
+                                    onChangeToday={(currentData: any) => {
+                                        // If disabled or readOnly, the operations are not performed
+                                        if (disabled || readOnly) {
+                                            return;
+                                        }
+                                        
+                                        resetDefauleValueExist();
+
+                                        //
+                                        const _date = `${currentData.year}-${currentData.month}-${currentData.day}`;
+                                        const _v = getFullTimeData(`${_date} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+                                        setDateVal(`${_date}`);
+                                        setChangedVal(`${_date} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+                                        setSplitVals((prevState: string[]) => {
+                                            return [_v.year, _v.month, _v.day, prevState[3], prevState[4], prevState[5]];
+                                        });
+                                        onChange?.(inputRef.current, _v, true, getAllSplittingInputs());
+
+                                        // 
+                                        onChangeToday?.(_v);
+
+                                        //
+                                        resetPopupBlurStatus();
+
+                                    }}
+                                    onChangeMonth={(currentData: any) => {
+                                        resetDefauleValueExist();
+
+                                        //
+                                        const _date = `${currentData.year}-${currentData.month}-${currentData.day}`;
+                                        const _v = getFullTimeData(`${_date} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+                                        setDateVal(_date);
+                                        setChangedVal(`${_date} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+                                        setSplitVals((prevState: string[]) => {
+                                            return [_v.year, _v.month, _v.day, prevState[3], prevState[4], prevState[5]];
+                                        });
+                                        onChange?.(inputRef.current, _v, true, getAllSplittingInputs());
+
+                                        // 
+                                        onChangeMonth?.(_v);
+
+                                        //
+                                        resetPopupBlurStatus();                                        
+
+                                    }}
+                                    onChangeYear={(currentData: any) => {
+                                        resetDefauleValueExist();
+
+                                        //
+                                        const _date = `${currentData.year}-${currentData.month}-${currentData.day}`;
+                                        const _v = getFullTimeData(`${_date} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+                                        setDateVal(_date);
+                                        setChangedVal(`${_date} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+                                        setSplitVals((prevState: string[]) => {
+                                            return [_v.year, _v.month, _v.day, prevState[3], prevState[4], prevState[5]];
+                                        });
+                                        onChange?.(inputRef.current, _v, true, getAllSplittingInputs());
+
+                                        // 
+                                        onChangeYear?.(_v);
+
+                                        //
+                                        resetPopupBlurStatus();
+
+
+                                    }}
+                                />
+                            </div>
+                        </> : null}
+
+                        {/* /CALENDAR */}
+
+
+                        {COM_HAS_TIME ? <>
+
+                            {/* TIME CONTROL */}
+                            <div className="date2d__hourslist border-end">
+                                <h3>{_langHoursTitle}</h3>
+
+                                <ul>
+                                    {hoursArr.map((hour: string, i: number) => {
+
+                                        const _curVal = getFullTimeData(`${dateVal} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+
+                                        return <li key={i}>
+                                            <a
+                                                data-value={hour}
+                                                href="#"
+                                                tabIndex={-1}
+                                                onClick={(e: React.MouseEvent) => {
+                                                    e.preventDefault();
+                                                    
+                                                    // If disabled or readOnly, the operations are not performed
+                                                    if (disabled || readOnly) {
+                                                        return;
+                                                    }
+                                                    
+                                                    resetDefauleValueExist();
+
+                                                    //
+                                                    const _val = (e.currentTarget as any).dataset.value;
+                                                    const _v = getFullTimeData(`${dateVal} ${_val}:${timeVal[1]}:${timeVal[2]}`);
+
+                                                    
+                                                    setChangedVal(`${dateVal} ${_val}:${timeVal[1]}:${timeVal[2]}`);
+                                                    setTimeVal((prevState: string[]) => {
+                                                        return [_val, prevState[1], prevState[2]];
+                                                    });
+                                                    setSplitVals((prevState: string[]) => {
+                                                        return [prevState[0], prevState[1], prevState[2], _v.hours, prevState[4], prevState[5]];
+                                                    });
+                                                    onChange?.(inputRef.current, _v, true, getAllSplittingInputs());
+
+                                                    // 
+                                                    onChangeHours?.(_v);
+
+
+                                                    //
+                                                    resetPopupBlurStatus();
+
+                                                }}
+                                                className={combinedCls(
+                                                    {
+                                                        'selected': timeVal[0] == hour,
+                                                        'disabled': checkDisabledHours(_curVal.year, Number(_curVal.month)-1, _curVal.day, hour)
+                                                    }
+                                                )}
+                                            >
+                                                {hour}
+                                            </a>
+                                        </li>
+                                    })}
+
+                                </ul>
+                            </div>
+                            {/* TIME CONTROL */}
+
+                            {/* TIME CONTROL */}
+                            <div className="date2d__minuteslist border-end">
+                                <h3>{_langMinutesTitle}</h3>
+
+                                <ul>
+                                    {msArr.map((v: string, i: number) => {
+                                        const _curVal = getFullTimeData(`${dateVal} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+
+                                        return <li key={i}>
+                                            <a
+                                                data-value={v}
+                                                href="#"
+                                                tabIndex={-1}
+                                                onClick={(e: React.MouseEvent) => {
+                                                    e.preventDefault();
+                                                    
+                                                    // If disabled or readOnly, the operations are not performed
+                                                    if (disabled || readOnly) {
+                                                        return;
+                                                    }
+                                                    
+                                                    resetDefauleValueExist();
+
+                                                    //
+                                                    const _val = (e.currentTarget as any).dataset.value;
+                                                    const _v = getFullTimeData(`${dateVal} ${timeVal[0]}:${_val}:${timeVal[2]}`);
+
+                                                    setChangedVal(`${dateVal} ${timeVal[0]}:${_val}:${timeVal[2]}`);
+                                                    setTimeVal((prevState: string[]) => {
+                                                        return [prevState[0], _val, prevState[2]];
+                                                    });
+                                                    setSplitVals((prevState: string[]) => {
+                                                        return [prevState[0], prevState[1], prevState[2], prevState[3], _v.minutes, prevState[5]];
+                                                    });
+                                                    onChange?.(inputRef.current, _v, true, getAllSplittingInputs());
+
+                                                    // 
+                                                    onChangeMinutes?.(_v);
+
+
+                                                    //
+                                                    resetPopupBlurStatus();
+
+
+                                                }}
+                                                className={combinedCls(
+                                                    {
+                                                         'selected': timeVal[1] == v,
+                                                         'disabled': checkDisabledMinutes(_curVal.year, Number(_curVal.month)-1, _curVal.day, _curVal.hours, v)
+                                                    }
+                                                )}
+                                            >
+
+                                                {v}
+                                            </a>
+                                        </li>
+                                    })}
+
+                                </ul>
+                            </div>
+                            {/* TIME CONTROL */}
+
+
+                            {/* TIME CONTROL */}
+                            {(COM_NO_SECONDS) ? <>
+                                <div className="date2d__secondslist border-end">
+                                    <h3>{_langSecondsTitle}</h3>
+
+                                    <ul>
+                                        {msArr.map((v: string, i: number) => {
+                                            const _curVal = getFullTimeData(`${dateVal} ${timeVal[0]}:${timeVal[1]}:${timeVal[2]}`);
+                                            
+                                            return <li key={i}>
+                                                <a
+                                                    data-value={v}
+                                                    href="#"
+                                                    tabIndex={-1}
+                                                    onClick={(e: React.MouseEvent) => {
+                                                        e.preventDefault();
+                                                        
+                                                        // If disabled or readOnly, the operations are not performed
+                                                        if (disabled || readOnly) {
+                                                            return;
+                                                        }
+                                                        
+                                                        resetDefauleValueExist();
+
+                                                        //
+                                                        const _val = (e.currentTarget as any).dataset.value;
+                                                        const _v = getFullTimeData(`${dateVal} ${timeVal[0]}:${timeVal[1]}:${_val}`);
+                                                        setChangedVal(`${dateVal} ${timeVal[0]}:${timeVal[1]}:${_val}`);
+                                                        setTimeVal((prevState: string[]) => {
+                                                            return [prevState[0], prevState[1], _val];
+                                                        });
+                                                        setSplitVals((prevState: string[]) => {
+                                                            return [prevState[0], prevState[1], prevState[2], prevState[3], prevState[5], _v.seconds ];
+                                                        });
+                                                        onChange?.(inputRef.current, _v, true, getAllSplittingInputs());
+
+                                                        // 
+                                                        onChangeSeconds?.(_v);
+
+
+                                                        //
+                                                        resetPopupBlurStatus();                                                  
+
+                                                    }}
+                                                    className={combinedCls(
+                                                        {
+                                                            'selected': timeVal[2] == v,
+                                                            'disabled': checkDisabledSeconds(_curVal.year, Number(_curVal.month)-1, _curVal.day, _curVal.hours, _curVal.minutes, v)
+                                                        }
+                                                    )}
+                                                >
+
+                                                    {v}
+                                                </a>
+                                            </li>
+                                        })}
+
+                                    </ul>
+                                </div>
+                            </> : null}
+                            {/* TIME CONTROL */}
+                        </> : null}
+
+
+
+                    </div>
+
+                </div>
+            </RootPortal>
+
+
+
+
+
+        </>
+    )
+});
+
+
+export default Date;