@deriv-com/smartcharts-champion 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,14 +1,6 @@
-# [1.4.0](https://github.com/deriv-com/smartcharts-champion/compare/v1.3.15...v1.4.0) (2026-01-08)
+# [1.5.0](https://github.com/deriv-com/smartcharts-champion/compare/v1.4.1...v1.5.0) (2026-01-12)
 
 
 ### ✨ 	 Features
 
-* new transaltions ([0f4de8e](https://github.com/deriv-com/smartcharts-champion/commit/0f4de8ea06784658c0f93a596e9a1849995df415))
-* new transaltions ([5d6edc0](https://github.com/deriv-com/smartcharts-champion/commit/5d6edc02b301f02866b7e6b125d5631942a203c0))
-
-
-### 🐛 	 Bug Fixes
-
-* added description to the download section ([e3459d3](https://github.com/deriv-com/smartcharts-champion/commit/e3459d372bbe497be8ab09d9d03ef3baba10f7ff))
-* added description to the download section ([98ed3b7](https://github.com/deriv-com/smartcharts-champion/commit/98ed3b7d2f7277e401dec59be6ea11ead50c33b7))
-* fix the translation for zh_tw ([d1c97c6](https://github.com/deriv-com/smartcharts-champion/commit/d1c97c637bbb7e3fb7ce79f0677d20ae90c6a6c1))
+* replace legacy moment with dayJs ([#162](https://github.com/deriv-com/smartcharts-champion/issues/162)) ([e7d2e17](https://github.com/deriv-com/smartcharts-champion/commit/e7d2e17d8cc72aed072bd2d846fc893f3f4001db))

package/app/ChartHistory.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import moment from 'moment';
+import dayjs from '../src/utils/dayjs-config';
 import DatePicker from './DateTimePicker/DatePicker';
 import TimePicker from './DateTimePicker/TimePicker';
 import './chart-history.scss';
@@ -9,7 +9,7 @@ type TChartHistoryProps = {
 };
 
 const ChartHistory = React.memo(({ onChange }: TChartHistoryProps) => {
-    const [date, setDate] = React.useState(moment().format('YYYY/MM/DD'));
+    const [date, setDate] = React.useState(dayjs().format('YYYY/MM/DD'));
     const [focusOnDate, setFocusOnDate] = React.useState(false);
     const [focusOnTime, setFocusOnTime] = React.useState(false);
     const [time, setTime] = React.useState('00:00');
@@ -56,8 +56,8 @@ const ChartHistory = React.memo(({ onChange }: TChartHistoryProps) => {
                     has_today_btn
                     value={date}
                     onChange={onChangeDate}
-                    min_date={moment.utc().subtract(1, 'years').toDate().toString()}
-                    max_date={moment.utc().toDate().toString()}
+                    min_date={dayjs.utc().subtract(1, 'years').toDate().toString()}
+                    max_date={dayjs.utc().toDate().toString()}
                     display_format='DD MMM YYYY'
                 />
                 <TimePicker
@@ -65,7 +65,7 @@ const ChartHistory = React.memo(({ onChange }: TChartHistoryProps) => {
                     name='time'
                     focus={focusOnTime}
                     disableFocus={onDisableFocus}
-                    start_date={moment(date, 'YYYY/MM/DD').valueOf() / 1000}
+                    start_date={dayjs(date, 'YYYY/MM/DD').valueOf() / 1000}
                     value={time}
                     onChange={onChangeTime}
                 />

package/app/DateTimePicker/Calendar.tsx

@@ -1,5 +1,6 @@
-import moment from 'moment';
+import { Dayjs } from 'dayjs';
 import React from 'react';
+import dayjs from '../../src/utils/dayjs-config';
 import { Wrapper } from '../../src/components/Icons';
 import CalendarICInfo from '../icons/ic-calendar-info.svg';
 import { CalendarDays, CalendarMonths, CalendarYears, CalendarDecades } from './panels/index';
@@ -52,7 +53,7 @@ type TCalendarPanelProps = {
     min_date: string;
     start_date?: number;
     calendar_date: string;
-    isPeriodDisabled: (date: moment.Moment, unit: moment.unitOfTime.StartOf) => boolean;
+    isPeriodDisabled: (date: Dayjs | string, unit: dayjs.OpUnitType) => boolean;
 };
 
 type TCalendarHeaderProps = {
@@ -79,14 +80,14 @@ type TCalendarHeaderProps = {
 
 const CalendarButton = ({ children, className, is_hidden, label, onClick }: TCalendarButtonProps) => {
     return (
-        <React.Fragment>
+        <>
             {!is_hidden && (
                 <span className={className} onClick={onClick}>
                     {label}
                     {children}
                 </span>
             )}
-        </React.Fragment>
+        </>
     );
 };
 
@@ -125,7 +126,7 @@ const CalendarHeader = ({
     const is_month_view = calendar_view === 'month';
     const is_year_view = calendar_view === 'year';
     const is_decade_view = calendar_view === 'decade';
-    const moment_date = moment.utc(calendar_date);
+    const moment_date = dayjs.utc(calendar_date);
     const onPreviousYearClick = () => {
         if (is_date_view || is_month_view) onClick.previousYear();
 
@@ -152,13 +153,13 @@ const CalendarHeader = ({
         <div className='calendar-header'>
             <CalendarButton
                 className={`calendar-prev-year-btn ${
-                    isPeriodDisabled(moment_date.clone().subtract(1, 'month'), 'month') ? 'hidden' : ''
+                    isPeriodDisabled(moment_date.subtract(1, 'month'), 'month') ? 'hidden' : ''
                 }`}
                 onClick={onPreviousYearClick}
             />
             <CalendarButton
                 className={`calendar-prev-month-btn ${
-                    isPeriodDisabled(moment_date.clone().subtract(1, 'month'), 'month') ? 'hidden' : ''
+                    isPeriodDisabled(moment_date.subtract(1, 'month'), 'month') ? 'hidden' : ''
                 }`}
                 is_hidden={!is_date_view}
                 onClick={onClick.previousMonth}
@@ -176,28 +177,22 @@ const CalendarHeader = ({
                 <CalendarButton className='calendar-select-year-btn' onClick={onSelectYearClick}>
                     {(is_date_view || is_month_view) && moment_date.year()}
                     {is_year_view &&
-                        `${moment_date.clone().subtract(1, 'years').year()}-${moment_date
-                            .clone()
-                            .add(10, 'years')
-                            .year()}`}
+                        `${moment_date.subtract(1, 'years').year()}-${moment_date.add(10, 'years').year()}`}
                     {is_decade_view &&
-                        `${moment_date.clone().subtract(10, 'years').year()}-${moment_date
-                            .clone()
-                            .add(109, 'years')
-                            .year()}`}
+                        `${moment_date.subtract(10, 'years').year()}-${moment_date.add(109, 'years').year()}`}
                 </CalendarButton>
             </div>
 
             <CalendarButton
                 className={`calendar-next-month-btn ${
-                    isPeriodDisabled(moment_date.clone().add(1, 'month'), 'month') ? 'hidden' : ''
+                    isPeriodDisabled(moment_date.add(1, 'month'), 'month') ? 'hidden' : ''
                 }`}
                 is_hidden={!is_date_view}
                 onClick={onClick.nextMonth}
             />
             <CalendarButton
                 className={`calendar-next-year-btn ${
-                    isPeriodDisabled(moment_date.clone().add(1, 'month'), 'month') ? 'hidden' : ''
+                    isPeriodDisabled(moment_date.add(1, 'month'), 'month') ? 'hidden' : ''
                 }`}
                 onClick={onNextYearClick}
             />
@@ -214,13 +209,13 @@ const Calendar = React.forwardRef<TCalendarRefProps, TCalendarProps>(
             id,
             date_format = 'YYYY-MM-DD',
             start_date,
-            max_date = moment().utc().add(120, 'y').format('YYYY-MM-DD'), // by default, max_date is set to 120 years after today
-            min_date = moment(0).utc().format('YYYY-MM-DD'), // by default, min_date is set to Unix Epoch (January 1st 1970)
+            max_date = dayjs().utc().add(120, 'y').format('YYYY-MM-DD'), // by default, max_date is set to 120 years after today
+            min_date = dayjs(0).utc().format('YYYY-MM-DD'), // by default, min_date is set to Unix Epoch (January 1st 1970)
             onSelect,
         }: TCalendarProps,
         ref
     ) => {
-        const [calendar_date, setCalendarDate] = React.useState(moment.utc(start_date).format(date_format));
+        const [calendar_date, setCalendarDate] = React.useState(dayjs.utc(start_date).format(date_format));
         const [selected_date, setSelectedDate] = React.useState('');
         const [calendar_view, setCalendarView] = React.useState('date');
 
@@ -289,19 +284,19 @@ const Calendar = React.forwardRef<TCalendarRefProps, TCalendarProps>(
             },
         };
 
-        const navigateTo = (value: number, unit: moment.unitOfTime.DurationConstructor, is_add: boolean) => {
-            let new_date = moment
+        const navigateTo = (value: number, unit: dayjs.ManipulateType, is_add: boolean) => {
+            let new_date = dayjs
                 .utc(calendar_date, date_format)
                 [is_add ? 'add' : 'subtract'](value, unit)
                 .format(date_format);
 
             if (unit === 'months' && isPeriodDisabled(new_date, 'month')) return;
 
-            if (unit === 'years' && isPeriodDisabled(new_date, 'years')) {
+            if (unit === 'years' && isPeriodDisabled(new_date, 'year')) {
                 new_date = is_add ? max_date : min_date;
             }
 
-            setCalendarDate(moment.utc(new_date, date_format).format(date_format)); // formatted date
+            setCalendarDate(dayjs.utc(new_date, date_format).format(date_format)); // formatted date
         };
 
         const updateSelectedDate = (e: React.SyntheticEvent<HTMLElement>, is_disabled: boolean) => {
@@ -313,9 +308,9 @@ const Calendar = React.forwardRef<TCalendarRefProps, TCalendarProps>(
                 return;
             }
 
-            const moment_date = moment.utc(e.target.dataset.date).startOf('day');
-            const is_before = moment_date.isBefore(moment.utc(min_date));
-            const is_after = moment_date.isAfter(moment.utc(max_date));
+            const moment_date = dayjs.utc(e.target.dataset.date).startOf('day');
+            const is_before = moment_date.isBefore(dayjs.utc(min_date));
+            const is_after = moment_date.isAfter(dayjs.utc(max_date));
 
             if (is_before || is_after) {
                 return;
@@ -344,20 +339,26 @@ const Calendar = React.forwardRef<TCalendarRefProps, TCalendarProps>(
 
             const text = e.target.dataset?.[type]?.split('-')[0] || '';
 
-            const moment_date = moment
-                .utc(calendar_date, date_format)
-                [type === 'decade' ? 'year' : type](text) as moment.Moment;
+            let moment_date = dayjs.utc(calendar_date, date_format);
+
+            if (type === 'decade') {
+                moment_date = moment_date.year(Number(text));
+            } else if (type === 'year') {
+                moment_date = moment_date.year(Number(text));
+            } else if (type === 'month') {
+                moment_date = moment_date.month(Number(text));
+            }
 
             const date = moment_date.format(date_format);
 
-            if (isPeriodDisabled(date, type === 'decade' ? null : type)) return;
+            if (isPeriodDisabled(date, type === 'decade' ? 'year' : type)) return;
 
             setCalendarDate(date);
             setCalendarView(view_map[type as keyof typeof view_map]);
         };
 
         const setToday = () => {
-            const now = moment().utc().format(date_format);
+            const now = dayjs().utc().format(date_format);
 
             setCalendarDate(now);
             setSelectedDate(now);
@@ -368,10 +369,10 @@ const Calendar = React.forwardRef<TCalendarRefProps, TCalendarProps>(
             }
         };
 
-        const isPeriodDisabled = (date: moment.Moment | string, unit: moment.unitOfTime.StartOf) => {
-            const start_of_period = moment.utc(date).startOf(unit);
-            const end_of_period = moment.utc(date).endOf(unit);
-            return end_of_period.isBefore(moment.utc(min_date)) || start_of_period.isAfter(moment.utc(max_date));
+        const isPeriodDisabled = (date: Dayjs | string, unit: dayjs.OpUnitType) => {
+            const start_of_period = dayjs.utc(date).startOf(unit);
+            const end_of_period = dayjs.utc(date).endOf(unit);
+            return end_of_period.isBefore(dayjs.utc(min_date)) || start_of_period.isAfter(dayjs.utc(max_date));
         };
 
         return (

package/app/DateTimePicker/DatePicker.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import moment from 'moment';
+import dayjs from '../../src/utils/dayjs-config';
 import Calendar, { TCalendarRefProps } from './Calendar';
 import './date-picker.scss';
 import { Wrapper } from '../../src/components/Icons';
@@ -53,7 +53,7 @@ const DatePickerInput = ({
     mode,
     display_format,
 }: TDatePickerInputProps) => {
-    const input_value = format ? moment(value, 'YYYY-MM-DD').format(display_format) : value;
+    const input_value = format ? dayjs(value, 'YYYY-MM-DD').format(display_format) : value;
     return (
         <input
             id={id}
@@ -68,14 +68,14 @@ const DatePickerInput = ({
     );
 };
 const formatDate = (date: string, date_format = 'YYYY-MM-DD') =>
-    moment(date || undefined, date_format).format(date_format);
+    dayjs(date || undefined, date_format).format(date_format);
 /**
  * return the number of days from today to date specified
  * @param  {String} date   the date to calculate number of days from today
  * @return {Number} an integer of the number of days
  */
 const daysFromTodayTo = (date: string): string => {
-    const diff = moment(date).utc().diff(moment().utc(), 'days');
+    const diff = dayjs(date).utc().diff(dayjs().utc(), 'days');
     return !date || diff < 0 ? '' : (diff + 1).toString();
 };
 const DatePicker = React.memo((props: TDatePickerProps) => {
@@ -128,7 +128,7 @@ const DatePicker = React.memo((props: TDatePickerProps) => {
     };
     const onSelectCalendar = (selected_date: string, _is_datepicker_visible = false) => {
         let _selected_date = selected_date;
-        if (!moment.utc(_selected_date).isValid) {
+        if (!dayjs.utc(_selected_date).isValid()) {
             _selected_date = '';
         }
         if (mode === 'duration') {
@@ -142,10 +142,10 @@ const DatePicker = React.memo((props: TDatePickerProps) => {
     const updateDatePickerValue = (_value: string, _mode?: string) => {
         setValue(_value, updateStore);
         // update Calendar
-        const new_date = _mode === 'duration' ? moment.utc().add(_value, 'days').format(date_format) : _value;
-        if (calendarRef.current && (moment.utc(new_date, date_format).isValid() || !new_date)) {
+        const new_date = _mode === 'duration' ? dayjs.utc().add(Number(_value), 'days').format(date_format) : _value;
+        if (calendarRef.current && (dayjs.utc(new_date, date_format).isValid() || !new_date)) {
             if (!new_date) {
-                const current_date = moment.utc(start_date).format(date_format);
+                const current_date = dayjs.utc(start_date).format(date_format);
                 calendarRef.current.setCalendarDate(current_date);
                 calendarRef.current.setSelectedDate(current_date);
             } else {

package/app/DateTimePicker/TimePicker.tsx

@@ -3,8 +3,9 @@
 /* eslint-disable react/no-did-update-set-state */
 /* eslint-disable react/no-unused-state */
 import { observer } from 'mobx-react-lite';
-import moment from 'moment';
+import { Dayjs } from 'dayjs';
 import React from 'react';
+import dayjs from '../../src/utils/dayjs-config';
 import './time-picker.scss';
 import { Wrapper } from '../../src/components/Icons';
 import Time from '../icons/ic-time.svg';
@@ -34,13 +35,13 @@ type TTimerPickerProps = {
 
 const TimeIcon = Wrapper(Time);
 const isSessionAvailable = (
-    compare_moment = moment().utc(),
-    end_moment = moment().utc(),
+    compare_moment = dayjs().utc(),
+    end_moment = dayjs().utc(),
     should_only_check_hour = false
 ) => {
     const offset = new Date().getTimezoneOffset() * 60 * 1000;
-    const end_compare = should_only_check_hour ? end_moment.clone().minute(0).second(0) : end_moment;
-    const start_compare = end_compare.clone().subtract(1, 'year');
+    const end_compare = should_only_check_hour ? end_moment.minute(0).second(0) : end_moment;
+    const start_compare = end_compare.subtract(1, 'year');
     const end_time = end_compare.valueOf() + offset;
     const start_time = start_compare.valueOf() + offset;
     return end_time - compare_moment.valueOf() > 0 && compare_moment.valueOf() - start_time > 0;
@@ -69,8 +70,8 @@ const TimePickerDropdown = React.memo(
         const selectOption = (type: string, new_value: string, is_enabled = true) => {
             if (is_enabled) {
                 const [prev_hour, prev_minute] = (value || '00:00').split(':');
-                const start_moment = moment(start_date * 1000 || undefined);
-                const start_moment_clone = start_moment.clone().minute(0).second(0);
+                const start_moment = dayjs(start_date * 1000 || undefined);
+                const start_moment_clone = start_moment.minute(0).second(0);
                 if ((type === 'h' && new_value !== prev_hour) || (type === 'm' && new_value !== prev_minute)) {
                     setLastUpdatedType(type);
                     type === 'h' ? setIsHourSelected(true) : setIsMinuteSelected(true);
@@ -103,9 +104,9 @@ const TimePickerDropdown = React.memo(
             setIsHourSelected(false);
             setIsMinuteSelected(false);
         };
-        const start_moment = moment(start_date * 1000 || undefined);
-        const start_moment_clone = start_moment.clone().minute(0).second(0);
-        const end_moment = moment().utc();
+        const start_moment = dayjs(start_date * 1000 || undefined);
+        const start_moment_clone = start_moment.minute(0).second(0);
+        const end_moment = dayjs().utc();
         let [hour, minute] = ['00', '00'];
         if (value.match(/^([0-9]|[0-1][0-9]|2[0-3]):([0-9]|[0-5][0-9])(:([0-9]|[0-5][0-9]))?$/)) {
             [hour, minute] = value.split(':');
@@ -210,9 +211,9 @@ const TimePicker = (props: TTimerPickerProps) => {
         [name, onChange, props.value]
     );
     React.useEffect(() => {
-        const findAvailabeTime = (start_moment_clone: moment.Moment) => {
+        const findAvailabeTime = (start_moment_clone: Dayjs) => {
             let last_available_min, desire_time;
-            const hour = moment().utc().format('HH');
+            const hour = dayjs().utc().format('HH');
             minutes.forEach(min => {
                 desire_time = start_moment_clone.hour(+hour).minute(+min);
                 if (isSessionAvailable(desire_time)) {
@@ -227,8 +228,8 @@ const TimePicker = (props: TTimerPickerProps) => {
         }
         if (focus) {
             const [prev_hour, prev_minute] = (prev_value || '00:00').split(':');
-            const start_moment = moment(start_date * 1000 || undefined);
-            const start_moment_clone = start_moment.clone().minute(0).second(0);
+            const start_moment = dayjs(start_date * 1000 || undefined);
+            const start_moment_clone = start_moment.minute(0).second(0);
             const desire_time = start_moment_clone.hour(parseInt(prev_hour)).minute(parseInt(prev_minute));
             if (!isSessionAvailable(desire_time)) {
                 findAvailabeTime(start_moment_clone);
@@ -241,7 +242,7 @@ const TimePicker = (props: TTimerPickerProps) => {
             {is_nativepicker ? (
                 <input type='time' id={`${prefix_class}-input`} value={value} onChange={handleChange} name={name} />
             ) : (
-                <React.Fragment>
+                <>
                     <span className='time-picker-container' onClick={toggleDropDown}>
                         <input
                             type='text'
@@ -262,7 +263,7 @@ const TimePicker = (props: TTimerPickerProps) => {
                         start_date={start_date}
                         value={value}
                     />
-                </React.Fragment>
+                </>
             )}
         </div>
     );

package/app/DateTimePicker/calendar.props.ts

@@ -1,6 +1,9 @@
+import type { Dayjs } from 'dayjs';
+import dayjs from '../../src/utils/dayjs-config';
+
 export type TCalendarViewProps = {
     calendar_date: string;
-    isPeriodDisabled: (date: moment.Moment, unit: moment.unitOfTime.StartOf) => boolean;
+    isPeriodDisabled: (date: Dayjs | string, unit: dayjs.OpUnitType) => boolean;
     selected_date: string;
     onClick: {
         date: (e: React.SyntheticEvent<HTMLElement>, is_disabled: boolean) => void;

package/app/DateTimePicker/panels/CalendarDays.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import classNames from 'classnames';
-import moment from 'moment';
 import React from 'react';
+import dayjs from '../../../src/utils/dayjs-config';
 
 type TCalendarProps = {
     date_format: string;
@@ -37,33 +37,33 @@ const getDays = ({
 }: TCalendarProps) => {
     const dates = [];
     const days: React.ReactElement[] = [];
-    const moment_today = moment().utc().startOf('day');
-    const moment_cur_date = moment.utc(calendar_date);
+    const moment_today = dayjs().utc().startOf('day');
+    const moment_cur_date = dayjs.utc(calendar_date);
     const num_of_days = moment_cur_date.daysInMonth() + 1;
-    const moment_month_start = moment_cur_date.clone().startOf('month');
-    const moment_month_end = moment_cur_date.clone().endOf('month');
-    const first_day = calcDayIndexFromMonday(moment_month_start.day()); // moment.js method '.day()' return index the day of the week, with Sunday as 0 and Saturday as 6.
+    const moment_month_start = moment_cur_date.startOf('month');
+    const moment_month_end = moment_cur_date.endOf('month');
+    const first_day = calcDayIndexFromMonday(moment_month_start.day()); // dayjs method '.day()' return index the day of the week, with Sunday as 0 and Saturday as 6.
     const last_day = calcDayIndexFromMonday(moment_month_end.day());
-    const moment_min_date = moment.utc(min_date);
-    const moment_max_date = moment.utc(max_date);
-    const moment_selected = moment.utc(selected_date);
+    const moment_min_date = dayjs.utc(min_date);
+    const moment_max_date = dayjs.utc(max_date);
+    const moment_selected = dayjs.utc(selected_date);
 
     for (let i = first_day; i > 0; i--) {
-        dates.push(moment_month_start.clone().subtract(i, 'day').format(date_format));
+        dates.push(moment_month_start.subtract(i, 'day').format(date_format));
     }
     for (let idx = 1; idx < num_of_days; idx += 1) {
-        dates.push(moment_cur_date.clone().format(date_format.replace('DD', padLeft(idx, 2, '0'))));
+        dates.push(moment_cur_date.format(date_format.replace('DD', padLeft(idx, 2, '0'))));
     }
     for (let i = 1; i <= 6 - last_day; i++) {
-        dates.push(moment_month_end.clone().add(i, 'day').format(date_format));
+        dates.push(moment_month_end.add(i, 'day').format(date_format));
     }
 
-    const moment_start_date = moment
+    const moment_start_date = dayjs
         .unix(start_date || 0)
         .utc()
         .startOf('day');
     dates.map(date => {
-        const moment_date = moment.utc(date).startOf('day');
+        const moment_date = dayjs.utc(date).startOf('day');
         const is_active = selected_date && moment_date.isSame(moment_selected);
         const is_today = moment_date.isSame(moment_today, 'day');
         const is_disabled: boolean =
@@ -71,8 +71,7 @@ const getDays = ({
             moment_date.isAfter(moment_max_date) ||
             // for forward starting accounts, only show same day as start date and the day after
             (start_date
-                ? moment_date.isBefore(moment_start_date) ||
-                  moment_date.isAfter(moment_start_date.clone().add(1, 'day'))
+                ? moment_date.isBefore(moment_start_date) || moment_date.isAfter(moment_start_date.add(1, 'day'))
                 : false);
 
         const is_other_month = moment_date.month() !== moment_cur_date.month();

package/app/DateTimePicker/panels/calendar_decades.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/no-array-index-key */
-import moment from 'moment';
+import dayjs from '../../../src/utils/dayjs-config';
 import { TCalendarViewProps } from '../calendar.props';
 
 export const CalendarDecades = ({ calendar_date, isPeriodDisabled, onClick, selected_date }: TCalendarViewProps) => {
-    const selected_year = moment.utc(selected_date).year();
-    const moment_date = moment.utc(calendar_date);
+    const selected_year = dayjs.utc(selected_date).year();
+    const moment_date = dayjs.utc(calendar_date);
 
     const decades = [];
     let min_year = moment_date.year() - 10;

package/app/DateTimePicker/panels/calendar_months.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-array-index-key */
-import moment from 'moment';
+import dayjs from '../../../src/utils/dayjs-config';
 import { TCalendarViewProps } from '../calendar.props';
 
 const getMonthHeaders = () => ({
@@ -18,8 +18,8 @@ const getMonthHeaders = () => ({
 });
 
 export const CalendarMonths = ({ calendar_date, isPeriodDisabled, onClick, selected_date }: TCalendarViewProps) => {
-    const moment_date = moment.utc(calendar_date);
-    const selected_month = moment.utc(selected_date).month();
+    const moment_date = dayjs.utc(calendar_date);
+    const selected_month = dayjs.utc(selected_date).month();
     const month_headers = getMonthHeaders();
 
     return (
@@ -28,7 +28,7 @@ export const CalendarMonths = ({ calendar_date, isPeriodDisabled, onClick, selec
                 <span
                     key={month}
                     className={`calendar-month ${idx === selected_month ? 'active' : ''} ${
-                        isPeriodDisabled(moment_date.month(month), 'month') ? 'disabled' : ''
+                        isPeriodDisabled(moment_date.month(idx), 'month') ? 'disabled' : ''
                     } `}
                     onClick={onClick.month}
                     data-month={idx}

package/app/DateTimePicker/panels/calendar_years.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/no-array-index-key */
-import moment from 'moment';
+import dayjs from '../../../src/utils/dayjs-config';
 import { TCalendarViewProps } from '../calendar.props';
 
 export const CalendarYears = ({ calendar_date, isPeriodDisabled, onClick, selected_date }: TCalendarViewProps) => {
-    const selected_year = moment.utc(selected_date).year();
-    const moment_date = moment.utc(calendar_date);
+    const selected_year = dayjs.utc(selected_date).year();
+    const moment_date = dayjs.utc(calendar_date);
     const current_year = moment_date.year();
     const years = [];
     for (let year = current_year - 1; year < current_year + 11; year++) {

package/app/index.tsx

@@ -17,7 +17,7 @@ import {
 } from '@deriv-com/smartcharts'; // eslint-disable-line import/no-unresolved
 import whyDidYouRender from '@welldone-software/why-did-you-render';
 import { configure } from 'mobx';
-import moment from 'moment';
+import dayjs from '../src/utils/dayjs-config';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { TNotification } from 'src/store/Notifier';
@@ -77,7 +77,7 @@ const chartId = '1';
 const appId = localStorage.getItem('config.app_id') || 12812;
 const serverUrl = getServerUrl();
 const language = new URLSearchParams(window.location.search).get('l') || getLanguageStorage();
-const today = moment().format('YYYY/MM/DD 00:00');
+const today = dayjs().format('YYYY/MM/DD 00:00');
 const connectionManager = new ConnectionManager({
     appId,
     language,
@@ -503,7 +503,7 @@ const App = () => {
             {endEpoch ? (
                 <Marker className='chart-marker-historical' markerRef={onMarkerRef}>
                     <span>
-                        {moment(endEpoch * 1000)
+                        {dayjs(endEpoch * 1000)
                             .utc()
                             .format('DD MMMM YYYY - HH:mm')}
                     </span>