diff --git a/packages/svelte-ux/src/lib/components/DateRangeField.svelte b/packages/svelte-ux/src/lib/components/DateRangeField.svelte
index 30930eb26..88b85f11e 100644
--- a/packages/svelte-ux/src/lib/components/DateRangeField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateRangeField.svelte
@@ -8,13 +8,14 @@
   import Dialog from './Dialog.svelte';
   import Field from './Field.svelte';
 
-  import { PeriodType, getDateFuncsByPeriodType, getPeriodTypeName } from '../utils/date';
+  import { PeriodType, getDateFuncsByPeriodType } from '../utils/date';
   import { getDateRangePresets, type DateRange as DateRangeType } from '../utils/dateRange';
   import { cls } from '../utils/styles';
   import { getSettings } from './settings';
 
   const dispatch = createEventDispatcher();
   const settings = getSettings();
+  const { format } = settings;
 
   const _defaultValue: DateRangeType = {
     from: null,
@@ -60,7 +61,7 @@
 </script>
 
 <Field
-  label={label ?? (value.periodType ? getPeriodTypeName(settings, value.periodType) : '')}
+  label={label ?? (value.periodType ? $format.getPeriodTypeName(value.periodType) : '')}
   {icon}
   {error}
   {hint}
@@ -153,7 +154,7 @@
 >
   <div class="flex flex-col justify-center bg-primary text-primary-content px-6 h-24">
     <div class="text-sm opacity-50">
-      {currentValue.periodType ? getPeriodTypeName(settings, currentValue.periodType) : ''}&nbsp;
+      {currentValue.periodType ? $format.getPeriodTypeName(currentValue.periodType) : ''}&nbsp;
     </div>
     <div class="text-xl sm:text-2xl">
       <DateRangeDisplay value={currentValue} />