diff --git a/assets/js/utils/calendar_table_view.js b/assets/js/utils/calendar_table_view.js
index 7b0965df..5bc101c6 100755
--- a/assets/js/utils/calendar_table_view.js
+++ b/assets/js/utils/calendar_table_view.js
@@ -383,61 +383,13 @@ App.Utils.CalendarTableView = (function () {
             ]
         }).appendTo($calendarHeader);
 
-        let dateFormat;
-
-        switch (vars('date_format')) {
-            case 'DMY':
-                dateFormat = 'dd/mm/yy';
-                break;
-
-            case 'MDY':
-                dateFormat = 'mm/dd/yy';
-                break;
-
-            case 'YMD':
-                dateFormat = 'yy/mm/dd';
-                break;
-
-            default:
-                throw new Error('Invalid date format setting provided: ' + vars('date_format'));
-        }
-
-        const firstWeekday = vars('first_weekday');
-        const firstWeekdayNumber = App.Utils.Date.getWeekdayId(firstWeekday);
-
-        $calendarHeader.find('.select-date').datepicker({
-            defaultDate: new Date(),
-            dateFormat: dateFormat,
-
-            // Translation
-            dayNames: [lang('sunday'), lang('monday'), lang('tuesday'), lang('wednesday'),
-                lang('thursday'), lang('friday'), lang('saturday')],
-            dayNamesShort: [lang('sunday').substring(0, 3), lang('monday').substring(0, 3),
-                lang('tuesday').substring(0, 3), lang('wednesday').substring(0, 3),
-                lang('thursday').substring(0, 3), lang('friday').substring(0, 3),
-                lang('saturday').substring(0, 3)],
-            dayNamesMin: [lang('sunday').substring(0, 2), lang('monday').substring(0, 2),
-                lang('tuesday').substring(0, 2), lang('wednesday').substring(0, 2),
-                lang('thursday').substring(0, 2), lang('friday').substring(0, 2),
-                lang('saturday').substring(0, 2)],
-            monthNames: [lang('january'), lang('february'), lang('march'), lang('april'),
-                lang('may'), lang('june'), lang('july'), lang('august'), lang('september'),
-                lang('october'), lang('november'), lang('december')],
-            prevText: lang('previous'),
-            nextText: lang('next'),
-            currentText: lang('now'),
-            closeText: lang('close'),
-            timeOnlyTitle: lang('select_time'),
-            timeText: lang('time'),
-            hourText: lang('hour'),
-            minuteText: lang('minutes'),
-            firstDay: firstWeekdayNumber,
-            onSelect: (dateText, instance) => {
-                const startDate = new Date(instance.currentYear, instance.currentMonth, instance.currentDay);
+        App.Utils.UI.initializeDatepicker($calendarHeader.find('.select-date'), {
+            onChange(selectedDates) {
+                const startDate = selectedDates[0];
                 const endDate = moment(startDate).add(parseInt($selectFilterItem.val()) - 1, 'days').toDate();
                 createView(startDate, endDate);
             }
-        });
+        }); 
 
         const providers = vars('available_providers').filter(
             (provider) =>