@dvrd/dvr-controls 1.0.48 → 1.0.51

package/index.ts

@@ -124,7 +124,6 @@ export * from './src/js/util/miscUtil';
 export * from './src/js/util/componentUtil';
 export * from './src/js/util/eventUtil';
 export * from './src/js/util/jwtUtil';
-export * from './src/js/util/momentUtil';
 export * from './src/js/util/responsiveUtil';
 export * from './src/js/util/validationUtil';
 export * from './src/js/util/interfaces';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.48",
+  "version": "1.0.51",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -30,6 +30,7 @@
     "react-router-dom": "6.15.0"
   },
   "dependencies": {
+    "@dvrd/idate": "^1.6.1",
     "@fortawesome/fontawesome-svg-core": "6.3.0",
     "@fortawesome/free-brands-svg-icons": "6.3.0",
     "@fortawesome/free-regular-svg-icons": "6.3.0",
@@ -55,7 +56,6 @@
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.2",
     "lodash.mergewith": "^4.6.2",
-    "moment": "2.29.4",
     "react-color": "2.19.3",
     "react-rnd": "10.4.1",
     "typescript": "4.9.5",

package/src/js/date/dvrdDatePicker.tsx

@@ -4,19 +4,18 @@
 import './style/dvrdDatePicker.scss';
 
 import classNames from 'classnames';
-import {Moment} from 'moment';
 import React, {MouseEventHandler, useEffect, useMemo, useRef, useState} from 'react';
 import {ChangeFunction, ErrorType} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
-import {toMoment} from '../util/momentUtil';
 import WithBackground from '../popup/withBackground';
 import DvrdButton from "../button/dvrdButton";
 import {generateComponentId} from "../util/componentUtil";
+import IDate from '@dvrd/idate';
 
 interface Props {
-    onChange: ChangeFunction<Moment>;
+    onChange: ChangeFunction<IDate>;
     closeOnChange?: boolean;
-    value: Moment | null;
+    value: IDate | null;
     label: string;
     error?: ErrorType;
     className?: string;
@@ -26,8 +25,8 @@ interface Props {
     alwaysShowArrows?: boolean;
     useMobileNative?: boolean;
     id?: string;
-    max?: Moment | string;
-    min?: Moment | string;
+    max?: IDate | string;
+    min?: IDate | string;
 }
 
 export default function DvrdDatePicker(props: Props) {
@@ -44,7 +43,7 @@ export default function DvrdDatePicker(props: Props) {
     }, [props.id]);
 
     function onChangeNative(evt: React.ChangeEvent<HTMLInputElement>) {
-        onChange(toMoment(evt.target.value), evt);
+        onChange(new IDate(evt.target.value), evt);
     }
 
     function onClickContainer() {
@@ -52,7 +51,7 @@ export default function DvrdDatePicker(props: Props) {
             setPickerOpen(true);
     }
 
-    const onChangePicker = (daySelected: boolean) => (value: Moment) => {
+    const onChangePicker = (daySelected: boolean) => (value: IDate) => {
         onChange(value.clone());
         if (closeOnChange && daySelected) onClosePicker();
     };
@@ -89,33 +88,33 @@ export default function DvrdDatePicker(props: Props) {
 }
 
 interface PickerProps {
-    onChange: (daySelected: boolean) => ChangeFunction<Moment>;
+    onChange: (daySelected: boolean) => ChangeFunction<IDate>;
     onClose: VoidFunction;
-    value: Moment | null;
+    value: IDate | null;
     open: boolean;
     alwaysShowArrows?: boolean;
-    max?: Moment | string;
-    min?: Moment | string;
+    max?: IDate | string;
+    min?: IDate | string;
 }
 
 function Picker(props: PickerProps) {
     const {min, max, alwaysShowArrows, open, onClose, value, onChange} = props;
     const divRef = useRef<HTMLDivElement>(null);
-    const pickerValue = useMemo(() => toMoment(value), [value]);
+    const pickerValue = useMemo(() => new IDate(value), [value]);
     const [padBeforeDays, days, padAfterDays] = useMemo(() => {
         const daysInMonth = pickerValue.daysInMonth();
         const days: number[] = [];
         const padBeforeDays: number[] = [];
         const padAfterDays: number[] = [];
         for (let i = 1; i <= daysInMonth; i++) days.push(i);
-        let firstMonthDay = pickerValue.clone().date(1).day();
+        let firstMonthDay = pickerValue.clone().day(1).weekday();
         if (!firstMonthDay) firstMonthDay = 7;
         const padDaysBefore = firstMonthDay - 1;
         let dayBefore = pickerValue.clone().add(-1, 'month').daysInMonth()
         for (let i = 0; i < padDaysBefore; i++)
             padBeforeDays.splice(0, 0, dayBefore--);
 
-        const lastWeekDay = pickerValue.clone().date(daysInMonth).day();
+        const lastWeekDay = pickerValue.clone().day(daysInMonth).weekday();
         const padDaysAfter = 7 - lastWeekDay;
         for (let i = 0; i < padDaysAfter; i++)
             padAfterDays.push(i + 1);
@@ -132,7 +131,7 @@ function Picker(props: PickerProps) {
         return function () {
             const value = pickerValue.clone();
             value.add(-1, key);
-            value.date(Math.min(value.daysInMonth(), value.date()))
+            value.day(Math.min(value.daysInMonth(), value.day()))
             onChange(false)(value);
         }
     }
@@ -141,7 +140,7 @@ function Picker(props: PickerProps) {
         return function () {
             const value = pickerValue.clone();
             value.add(1, key);
-            value.date(Math.min(value.daysInMonth(), value.date()))
+            value.day(Math.min(value.daysInMonth(), value.day()))
             onChange(false)(value);
         }
     }
@@ -149,22 +148,22 @@ function Picker(props: PickerProps) {
     function onResetSwitcher(key: 'year' | 'month') {
         return function () {
             const value = pickerValue.clone();
-            if (key === 'year') value.year(toMoment().year());
-            else value.month(toMoment().month());
-            value.date(Math.min(value.daysInMonth(), value.date()))
+            if (key === 'year') value.year(IDate.now().year());
+            else value.month(IDate.now().month());
+            value.day(Math.min(value.daysInMonth(), value.day()))
             onChange(false)(value);
         }
     }
 
     function onClickToday() {
-        onChange(true)(toMoment());
+        onChange(true)(IDate.now());
     }
 
     function onSelectDay(day: number, month?: number, year?: number) {
         return function () {
             const pickValue = pickerValue.clone();
             if (day || value === null) {
-                pickValue.date(day);
+                pickValue.day(day);
                 if (month !== undefined) pickValue.month(month);
                 if (year !== undefined) pickValue.year(year);
                 onChange(true)(pickValue);
@@ -177,7 +176,7 @@ function Picker(props: PickerProps) {
             const value = pickerValue.clone();
             if (kind === 'prev') value.add(-1, 'month');
             else value.add(1, 'month');
-            value.date(day);
+            value.day(day);
             onChange(true)(value);
         }
     }
@@ -234,11 +233,11 @@ function Picker(props: PickerProps) {
     function dateIsDisabled(day: number, month?: number, year?: number) {
         if (!min && !max) return false;
         const pickValue = pickerValue.clone();
-        pickValue.date(day);
+        pickValue.day(day);
         if (month !== undefined) pickValue.month(month);
         if (year !== undefined) pickValue.year(year);
-        if (min && toMoment(min).isAfter(pickValue, 'date')) return true;
-        else if (max && toMoment(max).isBefore(pickValue, 'date')) return true;
+        if (min && new IDate(min).isAfter(pickValue, 'day')) return true;
+        else if (max && new IDate(max).isBefore(pickValue, 'day')) return true;
         return false;
     }
 
@@ -387,7 +386,7 @@ function Picker(props: PickerProps) {
                         return renderDay(day, index, onSelectPadDay(day, 'prev'), 'pad', 'prev');
                     })}
                     {days.map((day: number, index: number) => {
-                        const isSelected = day === pickerValue.date();
+                        const isSelected = day === pickerValue.day();
                         return renderDay(day, index, onSelectDay(day),
                             classNames(isSelected && 'selected', day === 0 && 'hide'));
                     })}

package/src/js/dialog/dialog.tsx

@@ -121,10 +121,10 @@ export default class Dialog extends React.Component<Props, State> {
         return {color: convertColor(color)};
     };
 
-    extendOnClick = (onClick?: Function): MouseEventHandler => (evt: any) => {
-        this.onClose();
-        if (onClick !== undefined && onClick !== null)
-            onClick(evt);
+    extendOnClick = (action: DialogActionShape): MouseEventHandler => (evt: any) => {
+        if (!action.keepOpen)
+            this.onClose();
+        action.onClick?.(evt);
     };
 
     getActions = () => {
@@ -146,7 +146,7 @@ export default class Dialog extends React.Component<Props, State> {
                               type={this.buttonVariant} containerClass='dialogButton'/>
         );
         return (
-            <ButtonController {...keyProp} label={action.label} onClick={this.extendOnClick(action.onClick)}
+            <ButtonController {...keyProp} label={action.label} onClick={this.extendOnClick(action)}
                               type={this.buttonVariant} containerClass='dialogButton' primary={action.primary}/>
         );
     };

package/src/js/dialog/dialogController.tsx

@@ -13,6 +13,7 @@ export interface DialogActionShape {
     label: string;
     onClick?: MouseEventHandler;
     primary?: boolean;
+    keepOpen?: true;
 }
 
 export type DialogActions = (DialogActionShape | string)[];

package/src/js/input/date/dateField.tsx

@@ -8,7 +8,6 @@ import React, {ChangeEvent, CSSProperties, KeyboardEventHandler, PureComponent}
 import {ChangeFunction, ControlVariant} from "../../util/interfaces";
 import {DateTimeParts, DateType} from "./dateFieldController";
 import classNames from "classnames";
-import {Moment} from 'moment';
 import {ControlContext} from "../../util/controlContext";
 import {BACKSPACE_CODE} from "../../util/constants";
 import DatePicker from "./datePicker/datePicker";
@@ -17,11 +16,11 @@ import DateInput from "./input/dateInput";
 import {DVRInputControllerProps} from "../v2/inputController_v2";
 import mergeWith from 'lodash.mergewith';
 import {colorIsWhite, convertColor, editColor} from '../../util/colorUtil';
-import {toMoment} from '../../util/momentUtil';
 import {pad} from '../../util/controlUtil';
 import AwesomeIcon from "../../icon/awesomeIcon";
 import WithBackground from '../../popup/withBackground';
 import ButtonController from "../../button/buttonController";
+import IDate, {IDateValue} from '@dvrd/idate';
 
 export interface DateNumParts {
     day: number;
@@ -40,8 +39,8 @@ interface Props extends DVRInputControllerProps {
     pickerClass: string;
     disableFuture: boolean;
     disablePast: boolean;
-    disableAfter?: Date | Moment | string;
-    disableBefore?: Date | Moment | string;
+    disableAfter?: IDateValue;
+    disableBefore?: IDateValue;
     value: string;
     mask: string;
 }
@@ -102,12 +101,12 @@ export default class DateField extends PureComponent<Props, State> {
                 day: Math.min(pickerValue.day, currentMoment.daysInMonth()),
                 month: currentMoment.month(),
                 year: currentMoment.year(),
-                hour: currentMoment.hour(),
-                minute: currentMoment.minute(),
+                hour: currentMoment.hours(),
+                minute: currentMoment.minutes(),
             };
         } else {
             nextValue = Object.assign({}, this.state.pickerValue, {[key]: value});
-            const nextMoment = toMoment().month(nextValue.month).year(nextValue.year).date(1),
+            const nextMoment = IDate.now().month(nextValue.month).year(nextValue.year).day(1),
                 maxDays = nextMoment.daysInMonth();
             if (nextValue.day > maxDays)
                 nextValue.day = maxDays;
@@ -202,13 +201,13 @@ export default class DateField extends PureComponent<Props, State> {
     };
 
     onClickToday = () => {
-        const today = toMoment();
+        const today = IDate.now();
         this.setState({
             pickerValue: {
                 month: today.month(),
-                day: today.date(),
-                minute: today.minute(),
-                hour: today.hour(),
+                day: today.day(),
+                minute: today.minutes(),
+                hour: today.hours(),
                 year: today.year(),
             }
         }, () => {
@@ -223,12 +222,12 @@ export default class DateField extends PureComponent<Props, State> {
             this.setState({pickerState: nextState});
     };
 
-    onChangeInput = (value: Moment) => {
+    onChangeInput = (value: IDate) => {
         this.setState({
             pickerValue: Object.assign({}, this.state.pickerValue, {
-                day: value.date(),
-                hour: value.hour(),
-                minute: value.minute(),
+                day: value.day(),
+                hour: value.hours(),
+                minute: value.minutes(),
                 month: value.month(),
                 year: value.year()
             })
@@ -244,14 +243,15 @@ export default class DateField extends PureComponent<Props, State> {
     };
 
     getInitPickerValue = () => {
-        const dateParts = Object.assign({}, this.props.dateParts), now = toMoment();
+        const dateParts = Object.assign({}, this.props.dateParts);
+        const now = IDate.now();
         if (!isNaN(Number(dateParts.month))) dateParts.month = (Number(dateParts.month) - 1).toString();
         return mergeWith(dateParts, {
-            day: now.date(),
+            day: now.day(),
             month: now.month(),
             year: now.year(),
-            hour: now.hour(),
-            minute: now.minute(),
+            hour: now.hours(),
+            minute: now.minutes(),
         }, (source1: string, source2: number) => {
             if (!source1 || source1.length === 0 || ['dd', 'mm', 'yyyy', 'hh'].includes(source1)) return source2;
             return Number(source1);
@@ -259,7 +259,9 @@ export default class DateField extends PureComponent<Props, State> {
     };
 
     scrollToCurrent = () => {
-        const currentMoment = this.getCurrentMoment(), hour = currentMoment.hour(), minute = currentMoment.minute();
+        const currentMoment = this.getCurrentMoment();
+        const hour = currentMoment.hours();
+        const minute = currentMoment.minutes();
         this.scrollTime('hour', hour);
         this.scrollTime('minute', minute);
     };
@@ -276,19 +278,26 @@ export default class DateField extends PureComponent<Props, State> {
         return color;
     };
 
-    getCurrentMoment = (value?: DateNumParts): Moment => {
-        const {pickerValue} = this.state, toUse: DateNumParts = value !== undefined ? value : pickerValue;
-        return toMoment().year(toUse.year).month(toUse.month).date(toUse.day).hour(toUse.hour).minute(toUse.minute);
+    getCurrentMoment = (value?: DateNumParts): IDate => {
+        const {pickerValue} = this.state;
+        const toUse: DateNumParts = value !== undefined ? value : pickerValue;
+        return IDate.now().set({
+            year: toUse.year,
+            month: toUse.month,
+            day: toUse.day,
+            hours: toUse.hour,
+            minutes: toUse.minute
+        });
     };
 
-    getInputValue = (): Moment | null => {
+    getInputValue = (): IDate | null => {
         const {value, dateType} = this.props;
         if (value.length) {
             if (dateType === DateType.DATE)
-                return toMoment(value, 'DD-MM-YYYY');
+                return new IDate(value, 'DD-MM-YYYY');
             if (dateType === DateType.DATETIME)
-                return toMoment(value, 'DD-MM-YYYY HH:mm');
-            return toMoment(value, 'HH:mm');
+                return new IDate(value, 'DD-MM-YYYY HH:mm');
+            return new IDate(value, 'HH:mm');
         }
         return null;
     };
@@ -306,19 +315,19 @@ export default class DateField extends PureComponent<Props, State> {
         return (
             <div className={classNames('dvr-datepicker-container', pickerClass)}>
                 {pickerState === PickerState.DATE &&
-                <DatePicker onChange={this.onChangeInternalValue} getCurrentMoment={this.getCurrentMoment}
-                            pickerValue={pickerValue} dateParts={dateParts} disableAfter={disableAfter}
-                            disableBefore={disableBefore} disableFuture={disableFuture} disablePast={disablePast}/>}
+                    <DatePicker onChange={this.onChangeInternalValue} getCurrentMoment={this.getCurrentMoment}
+                                pickerValue={pickerValue} dateParts={dateParts} disableAfter={disableAfter}
+                                disableBefore={disableBefore} disableFuture={disableFuture} disablePast={disablePast}/>}
                 {pickerState === PickerState.TIME &&
-                <TimePicker pickerValue={pickerValue} dateType={dateType} onChange={this.onChangeTime}/>}
+                    <TimePicker pickerValue={pickerValue} dateType={dateType} onChange={this.onChangeTime}/>}
                 {dateType === DateType.DATETIME && this.renderStateSelector()}
                 <div className='dvr-datepicker-footer'>
                     <ButtonController onClick={this.onClickToday} label={this.getTodayText()}
                                       type={ControlVariant.SIMPLE}
                                       primary={false}/>
                     {dateType != DateType.DATE &&
-                    <ButtonController onClick={this.onSubmit} label='Oké' type={ControlVariant.SIMPLE}
-                                      primary={false}/>}
+                        <ButtonController onClick={this.onSubmit} label='Oké' type={ControlVariant.SIMPLE}
+                                          primary={false}/>}
                 </div>
             </div>
         )

package/src/js/input/date/dateFieldController.tsx

@@ -3,17 +3,16 @@
  */
 
 import React, {PureComponent} from 'react';
-import moment, {Moment} from 'moment';
 import {ControlVariant} from "../../util/interfaces";
 import DateField from "./dateField";
 import {DefaultInputProps, DVRInputControllerProps} from "../v2/inputController_v2";
-import {toMoment} from "../../util/momentUtil";
+import IDate, {IDateValue} from '@dvrd/idate';
 
 export enum DateType {DATETIME, DATE, TIME}
 
-export enum DateReturnType {DATE, MOMENT, STRING}
+export enum DateReturnType {DATE, IDATE, STRING}
 
-interface Props<T extends string | Moment | Date = string> extends Omit<DVRInputControllerProps, 'value' | 'onChange'> {
+interface Props<T extends IDateValue = string> extends Omit<DVRInputControllerProps, 'value' | 'onChange'> {
     onChange: (value: T) => void;
     dateType: DateType;
     disableFuture: boolean;
@@ -37,7 +36,7 @@ export interface DateTimeParts {
     minute: string;
 }
 
-export default class DateFieldController<T extends string | Moment | Date> extends PureComponent<Props<T>, State> {
+export default class DateFieldController<T extends IDateValue> extends PureComponent<Props<T>, State> {
     static defaultProps = Object.assign(DefaultInputProps, {
         dateType: DateType.DATE,
         disableFuture: false,
@@ -76,20 +75,13 @@ export default class DateFieldController<T extends string | Moment | Date> exten
     }
 
     private getInitValue = (props: Props<T>): string => {
-        let momentValue: Moment;
-        const {value, dateType} = props;
-        if (!value || (typeof value === 'string' && !value.length)) {
+        const {dateType} = props;
+        const value = props.value;
+        if (!value) return '';
+        if (typeof value === 'string' && !value.length) {
             return '';
         }
-        if (value) {
-            if (moment.isMoment(value)) momentValue = value;
-            else {
-                if (value instanceof Date) momentValue = moment(value);
-                else {
-                    momentValue = toMoment(value);
-                }
-            }
-        } else momentValue = moment();
+        const momentValue = new IDate(value);
         let format: string;
         if (dateType === DateType.DATE) format = 'DD-MM-YYYY';
         else if (dateType === DateType.DATETIME) format = 'DD-MM-YYYY HH:mm';
@@ -159,10 +151,10 @@ export default class DateFieldController<T extends string | Moment | Date> exten
         this.setState({value});
         // Only call onChange when the date is validly (only containing numbers)
         if (!/[a-zA-Z]/.test(value)) {
-            let momentValue: Moment;
-            if (dateType === DateType.DATE) momentValue = toMoment(value, 'DD-MM-YYYY');
-            else if (dateType === DateType.TIME) momentValue = toMoment(value, 'HH:mm');
-            else momentValue = toMoment(value, 'DD-MM-YYYY HH:mm');
+            let momentValue: IDate;
+            if (dateType === DateType.DATE) momentValue = new IDate(value, 'DD-MM-YYYY');
+            else if (dateType === DateType.TIME) momentValue = new IDate(value, 'HH:mm');
+            else momentValue = new IDate(value, 'DD-MM-YYYY HH:mm');
             switch (returnType) {
                 case DateReturnType.STRING:
                     switch (dateType) {
@@ -170,7 +162,7 @@ export default class DateFieldController<T extends string | Moment | Date> exten
                             onChange(momentValue.format('HH:mm') as T);
                             break;
                         case DateType.DATETIME:
-                            onChange(momentValue.toISOString(true) as T);
+                            onChange(momentValue.toISOString() as T);
                             break;
                         case DateType.DATE:
                             onChange(momentValue.format('YYYY-MM-DD') as T);
@@ -178,9 +170,9 @@ export default class DateFieldController<T extends string | Moment | Date> exten
                     }
                     break;
                 case DateReturnType.DATE:
-                    onChange(momentValue.toDate() as T);
+                    onChange(momentValue.date as T);
                     break;
-                case DateReturnType.MOMENT:
+                case DateReturnType.IDATE:
                     onChange(momentValue as T);
                     break;
             }

package/src/js/input/date/datePicker/datePicker.tsx

@@ -10,18 +10,17 @@ import {ControlContext} from "../../../util/controlContext";
 import {colorIsWhite, convertColor, editColor} from "../../../util/colorUtil";
 import {voidFunction} from "../../../util/controlUtil";
 import classNames from "classnames";
-import {Moment, unitOfTime} from 'moment';
 import {DateTimeParts} from "../dateFieldController";
-import {toMoment} from '../../../util/momentUtil';
 import AwesomeIcon from '../../../icon/awesomeIcon';
+import IDate, {IDateValue, MutateKey} from '@dvrd/idate';
 
 interface Props {
     onChange: (key: PickerKey, value: number, add?: boolean) => VoidFunction;
-    getCurrentMoment: (value?: DateNumParts) => Moment;
+    getCurrentMoment: (value?: DateNumParts) => IDate;
     pickerValue: DateNumParts;
     dateParts: DateTimeParts;
-    disableAfter?: Date | Moment | string;
-    disableBefore?: Date | Moment | string;
+    disableAfter?: IDateValue;
+    disableBefore?: IDateValue;
     disableFuture?: boolean;
     disablePast?: boolean;
 }
@@ -31,7 +30,8 @@ export default class DatePicker extends PureComponent<Props> {
     static contextType = ControlContext;
 
     onClickReset = (type: 'year' | 'month') => () => {
-        const {onChange} = this.props, today = toMoment();
+        const {onChange} = this.props;
+        const today = IDate.now();
         let key: PickerKey, value: number;
         if (type === 'year') {
             key = PickerKey.YEAR;
@@ -74,11 +74,11 @@ export default class DatePicker extends PureComponent<Props> {
     };
 
     getMonthLabel = (index: number): string =>
-        toMoment().month(index).format('MMMM');
+        IDate.now().month(index).format('MMMM');
 
     getDaysToRender = (): { day: number, isCurrentMonth: boolean }[] => {
         const daysToRender: { day: number, isCurrentMonth: boolean }[] = [],
-            currentMoment = this.props.getCurrentMoment(), dayPadding = currentMoment.date(1).day() - 1,
+            currentMoment = this.props.getCurrentMoment(), dayPadding = currentMoment.day(1).weekday() - 1,
             days = currentMoment.daysInMonth(), maxPrevMonth = currentMoment.subtract(1, 'month').daysInMonth();
 
         // Add days to pad begin weekdays
@@ -94,17 +94,18 @@ export default class DatePicker extends PureComponent<Props> {
         return daysToRender;
     };
 
-    isDateDisabled = (date: Moment, granularity: unitOfTime.StartOf = 'd'): boolean => {
-        const {disableAfter, disableBefore, disableFuture, disablePast} = this.props, now = toMoment();
+    isDateDisabled = (date: IDate, granularity: MutateKey = 'd'): boolean => {
+        const {disableAfter, disableBefore, disableFuture, disablePast} = this.props;
+        const now = IDate.now();
         if (disablePast && date.isBefore(now, granularity)) return true;
         if (disableFuture && date.isAfter(now, granularity)) return true;
-        if (disableAfter && date.isAfter(toMoment(disableAfter), granularity)) return true;
-        return !!(disableBefore && date.isBefore(toMoment(disableBefore), granularity));
+        if (disableAfter && date.isAfter(new IDate(disableAfter), granularity)) return true;
+        return !!(disableBefore && date.isBefore(new IDate(disableBefore), granularity));
     };
 
     isDayCurrent = (day: number) => {
         const {pickerValue, dateParts, getCurrentMoment} = this.props, pickerCurrent = getCurrentMoment(),
-            currentMonth = dateParts.month.includes('m') ? toMoment().month() : Number(dateParts.month) - 1;
+            currentMonth = dateParts.month.includes('m') ? IDate.now().month() : Number(dateParts.month) - 1;
         return pickerCurrent.month() === currentMonth && day === Number(pickerValue.day);
     };
 
@@ -139,7 +140,7 @@ export default class DatePicker extends PureComponent<Props> {
     renderDaysContainer = () => {
         const daysToRender = this.getDaysToRender(), weekDays: string[] = [];
         for (let i = 1; i <= 7; i++)
-            weekDays.push(toMoment().day(i).format('dd'));
+            weekDays.push(IDate.now().day(i).format('dd'));
         return (
             <div className='dvr-days-container'>
                 {weekDays.map((day: string, index: number) => (
@@ -154,7 +155,7 @@ export default class DatePicker extends PureComponent<Props> {
 
     renderDay = (dayData: { day: number, isCurrentMonth: boolean }, index: number) => {
         const {day, isCurrentMonth} = dayData, {onChange} = this.props,
-            dayMoment = this.props.getCurrentMoment().date(day),
+            dayMoment = this.props.getCurrentMoment().day(day),
             isDisabled = this.isDateDisabled(dayMoment) || !isCurrentMonth,
             isCurrent = this.isDayCurrent(day) && isCurrentMonth, isHoverAble = !isCurrent && isCurrentMonth,
             key: string = isCurrentMonth ? `day-${day}-${index}` : `other-day-${day}-${index}`;

package/src/js/input/date/input/dateInput.tsx

@@ -2,13 +2,13 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 import React, {KeyboardEventHandler, MouseEventHandler, PureComponent} from 'react';
-import moment, {Moment} from 'moment';
 import {DateType} from "../dateFieldController";
 import {AwesomeIcon, ElementPosition, OrnamentShape, TextField, generateComponentId} from "../../../../../";
 import {voidFunction} from "../../../util/controlUtil";
 import {ErrorType} from "../../../util/interfaces";
 import {DefaultInputProps} from "../../v2/inputController_v2";
 import { IconName } from '@fortawesome/fontawesome-svg-core';
+import IDate from '@dvrd/idate';
 
 type DateIndex = {
     index: number;
@@ -19,10 +19,10 @@ type DateIndex = {
 
 interface Props {
     onClickOrnament?: MouseEventHandler;
-    onChange: (value: Moment) => void;
+    onChange: (value: IDate) => void;
     onEnter?: KeyboardEventHandler;
     dateType: DateType;
-    value: Moment | null;
+    value: IDate | null;
     error?: ErrorType;
     label?: string | number;
     fullWidth?: boolean;
@@ -137,7 +137,7 @@ export default class DateInput extends PureComponent<Props, State> {
         }
     };
 
-    parseValue = (value: Moment | null): DateIndex[] => {
+    parseValue = (value: IDate | null): DateIndex[] => {
         const indexes: DateIndex[] = [], {dateType} = this.props;
         let chars: string, defaultChars: string;
         if (dateType === DateType.DATE) {
@@ -168,12 +168,12 @@ export default class DateInput extends PureComponent<Props, State> {
 
     tryOnChange = (indexes: DateIndex[]) => {
         const {dateType, onChange} = this.props;
-        let momentValue: Moment,
+        let momentValue: IDate,
             format: string = dateType === DateType.DATE ? 'DD-MM-YYYY' : dateType === DateType.DATETIME ?
                 'DD-MM-YYYY HH:mm' : 'HH:mm';
         if (indexes.length >= format.length) {
             const stringValue = this.getStringValue(format.length);
-            momentValue = moment(stringValue, format);
+            momentValue = new IDate(stringValue, format);
             if (!/[a-zA-Z]/.test(stringValue) && momentValue.isValid()) onChange(momentValue);
         }
     };
@@ -199,7 +199,7 @@ export default class DateInput extends PureComponent<Props, State> {
         const {indexes} = this.state, prevIndexes = prevState.indexes, {value} = this.props,
             prevValue = prevProps.value;
         if (this.indexesAreDifferent(indexes, prevIndexes)) this.tryOnChange(indexes);
-        if ((!prevValue && value) || (!value && prevValue) || (value && prevValue && !value.isSame(prevValue)))
+        if ((!prevValue && value) || (!value && prevValue) || (value && prevValue && !value.isAt(prevValue)))
             this.setState({indexes: this.parseValue(value)});
     };
 

package/src/js/util/momentUtil.ts

@@ -1,54 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import moment, {Moment} from "moment";
-
-export const MOMENT_FORMATS: string[] = [
-    'MM/DD/YYYY HH:mm:ssZ',
-    'MM-DD-YYYY HH:mm:ssZ',
-    'DD/MM/YYYY HH:mm:ssZ',
-    'DD-MM-YYYY HH:mm:ssZ',
-    'YYYY-MM-DD HH:mm:ssZ',
-    'YYYY/MM/DD HH:mm:ssZ',
-    'DD/MM/YYYYTHH:mm:ssZ',
-    'DD-MM-YYYYTHH:mm:ssZ',
-    'YYYY-MM-DDTHH:mm:ssZ',
-    'MM/DD/YYYY HH:mm:ss',
-    'MM-DD-YYYY HH:mm:ss',
-    'DD/MM/YYYY HH:mm:ss',
-    'DD-MM-YYYY HH:mm:ss',
-    'YYYY-MM-DD HH:mm:ss',
-    'YYYY/MM/DD HH:mm:ss',
-    'DD/MM/YYYYTHH:mm:ss',
-    'DD-MM-YYYYTHH:mm:ss',
-    'YYYY-MM-DDTHH:mm:ss',
-    'MM/DD/YYYY HH:mm',
-    'MM-DD-YYYY HH:mm',
-    'DD/MM/YYYY HH:mm',
-    'DD-MM-YYYY HH:mm',
-    'YYYY-MM-DD HH:mm',
-    'YYYY/MM/DD HH:mm',
-    'DD/MM/YYYYTHH:mm',
-    'DD-MM-YYYYTHH:mm',
-    'YYYY-MM-DDTHH:mm',
-    'YYYY/MM/DDTHH:mm',
-    'YYYY-MM-DD',
-    'YYYY/MM/DD',
-    'MM-DD-YYYY',
-    'MM/DD/YYYY',
-    'DD-MM-YYYY',
-    'DD/MM/YYYY',
-];
-
-export const toMoment = (dateValue?: string | Moment | null | Date, formats: string[] | string = MOMENT_FORMATS): Moment => {
-    if (moment.isMoment(dateValue)) return dateValue;
-    if(dateValue instanceof Date) return moment(dateValue);
-    if (!dateValue || !dateValue.length) return moment();
-    return moment(dateValue, formats);
-};
-
-export const formatMoment = (date?: Moment, format: string = 'YYYY-MM-DDTHH:mm:ss'): string => {
-    if (!date) date = toMoment();
-    return date.format(format);
-};