From 3b53cdc6bf85cd11dfc6f44f2d5dbb6b972aa62e Mon Sep 17 00:00:00 2001
From: JYC <jycouet@gmail.com>
Date: Thu, 11 Jan 2024 17:24:59 +0100
Subject: [PATCH] Feat/date range weekstarton (#208)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add fr translation & use the "week" to fit the weekstartOn

* range & fr & reactivity

* adding more translation

* internal var name

* typeHelpers

* fix my typo 🙈
---
 .../src/lib/components/DateButton.svelte      |   4 +-
 .../src/lib/components/DatePickerField.svelte |   6 +-
 .../src/lib/components/DateRange.svelte       |  30 +-
 .../lib/components/DateRangeDisplay.svelte    |   7 +-
 .../src/lib/components/DateRangeField.svelte  |  23 +-
 .../svelte-ux/src/lib/types/typeHelpers.ts    |  18 +
 packages/svelte-ux/src/lib/utils/date.test.ts |  16 +
 packages/svelte-ux/src/lib/utils/date.ts      | 268 ++++++------
 packages/svelte-ux/src/lib/utils/dateRange.ts | 407 +++++-------------
 .../svelte-ux/src/lib/utils/dictionary.ts     |  21 +
 packages/svelte-ux/src/lib/utils/locale.ts    |  43 ++
 packages/svelte-ux/src/routes/+layout.svelte  |  50 +++
 .../docs/components/DateField/+page.svelte    |  11 +-
 .../docs/components/DateRange/+page.svelte    |  35 +-
 14 files changed, 454 insertions(+), 485 deletions(-)

diff --git a/packages/svelte-ux/src/lib/components/DateButton.svelte b/packages/svelte-ux/src/lib/components/DateButton.svelte
index 8c4f6786b..94ac20538 100644
--- a/packages/svelte-ux/src/lib/components/DateButton.svelte
+++ b/packages/svelte-ux/src/lib/components/DateButton.svelte
@@ -19,7 +19,7 @@
   export let fade: boolean = false;
   export let format = getCustomFormat(periodType);
 
-  const { format: format_ux } = getSettings();
+  const { format: format_ux, localeSettings } = getSettings();
   const settingsClasses = getComponentClasses('DateButton');
 
   function getCustomFormat(periodType: PeriodType) {
@@ -32,7 +32,7 @@
     }
   }
 
-  const { start, end, isSame } = getDateFuncsByPeriodType(periodType);
+  const { start, end, isSame } = getDateFuncsByPeriodType($localeSettings, periodType);
 
   $: isSelected =
     selected instanceof Date
diff --git a/packages/svelte-ux/src/lib/components/DatePickerField.svelte b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
index bc795f9b6..e0a48ca8b 100644
--- a/packages/svelte-ux/src/lib/components/DatePickerField.svelte
+++ b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
@@ -32,7 +32,7 @@
   export let center = false;
 
   const settingsClasses = getComponentClasses('DatePickerField');
-  const { format } = getSettings();
+  const { format, localeSettings } = getSettings();
   $: dictionary = $format.settings.dictionary;
 
   let open: boolean = false;
@@ -83,7 +83,7 @@
           class="p-2"
           on:click={() => {
             if (value && periodType) {
-              const { add } = getDateFuncsByPeriodType(periodType);
+              const { add } = getDateFuncsByPeriodType($localeSettings, periodType);
               value = add(value, -1);
               dispatch('change', value);
             }
@@ -121,7 +121,7 @@
           class="p-2"
           on:click={() => {
             if (value && periodType) {
-              const { add } = getDateFuncsByPeriodType(periodType);
+              const { add } = getDateFuncsByPeriodType($localeSettings, periodType);
               value = add(value, 1);
               dispatch('change', value);
             }
diff --git a/packages/svelte-ux/src/lib/components/DateRange.svelte b/packages/svelte-ux/src/lib/components/DateRange.svelte
index 53458a214..7d253f6ba 100644
--- a/packages/svelte-ux/src/lib/components/DateRange.svelte
+++ b/packages/svelte-ux/src/lib/components/DateRange.svelte
@@ -26,8 +26,8 @@
   /** Period types to show */
   export let periodTypes: PeriodType[] = [
     PeriodType.Day,
-    PeriodType.WeekSun,
-    PeriodType.BiWeek1Sun,
+    PeriodType.Week,
+    PeriodType.BiWeek1,
     // PeriodType.BiWeek2Sun,
     PeriodType.Month,
     PeriodType.Quarter,
@@ -37,7 +37,7 @@
   export let getPeriodTypePresets = getDateRangePresets;
 
   const settingsClasses = getComponentClasses('DateRange');
-  const { format } = getSettings();
+  const { format, localeSettings } = getSettings();
 
   let selectedPeriodType = selected?.periodType ?? periodTypes[0];
   let selectedPreset: string | null = null;
@@ -53,7 +53,7 @@
     };
   });
 
-  $: presetOptions = getPeriodTypePresets(selectedPeriodType).map((preset) => {
+  $: presetOptions = getPeriodTypePresets($localeSettings, selectedPeriodType).map((preset) => {
     return {
       label: preset.label,
       value: getDateRangeStr(preset.value),
@@ -70,7 +70,7 @@
     // Apply date-fns function based on type and from/to.
     let newSelected = { ...selected, periodType: selectedPeriodType };
 
-    const { start, end } = getDateFuncsByPeriodType(selectedPeriodType);
+    const { start, end } = getDateFuncsByPeriodType($localeSettings, selectedPeriodType);
 
     let newActiveDate: typeof activeDate = activeDate === 'from' ? 'to' : 'from';
 
@@ -95,7 +95,7 @@
 
   // Expand selection range to match period type (day => month, etc)
   function onPeriodTypeChange(periodType: PeriodType) {
-    const { start, end } = getDateFuncsByPeriodType(periodType);
+    const { start, end } = getDateFuncsByPeriodType($localeSettings, periodType);
     if (selected!.from) {
       selected!.from = start(selected!.from);
     }
@@ -121,7 +121,9 @@
 
       // Attempt to maintain selected preset if labels match
       if (selected?.from && selected?.to && selected.periodType) {
-        const prevPeriodTypePreset = [...getPeriodTypePresets(selected.periodType)].find(
+        const prevPeriodTypePreset = [
+          ...getPeriodTypePresets($localeSettings, selected.periodType),
+        ].find(
           (x) =>
             x.value.from &&
             isSameDay(x.value.from, selected!.from!) &&
@@ -130,9 +132,9 @@
         );
 
         if (prevPeriodTypePreset && newPeriodType) {
-          const newPeriodTypePreset = [...getPeriodTypePresets(newPeriodType)].find(
-            (x) => x.label === prevPeriodTypePreset.label
-          );
+          const newPeriodTypePreset = [
+            ...getPeriodTypePresets($localeSettings, newPeriodType),
+          ].find((x) => x.label === prevPeriodTypePreset.label);
 
           if (newPeriodTypePreset) {
             newSelected.from = newPeriodTypePreset.value.from;
@@ -171,11 +173,11 @@
   <div class={cls(showSidebar && 'md:col-start-2')}>
     <ToggleGroup bind:value={activeDate} variant="outline" inset class="bg-surface-100">
       <ToggleOption value="from" class="flex-1">
-        <div class="text-xs text-surface-content/50">Start</div>
+        <div class="text-xs text-surface-content/50">{$localeSettings.dictionary.Date.Start}</div>
         {#if selected?.from}
           <div class="font-medium">{$format(selected.from, PeriodType.Day)}</div>
         {:else}
-          <div class="italic">Empty</div>
+          <div class="italic">{$localeSettings.dictionary.Date.Empty}</div>
         {/if}
         <!-- <div class="p-1">
             <DateField
@@ -193,11 +195,11 @@
       </ToggleOption>
 
       <ToggleOption value="to" class="flex-1">
-        <div class="text-xs text-surface-content/50">End</div>
+        <div class="text-xs text-surface-content/50">{$localeSettings.dictionary.Date.End}</div>
         {#if selected?.to}
           <div class="font-medium">{$format(selected.to, PeriodType.Day)}</div>
         {:else}
-          <div class="italic">Empty</div>
+          <div class="italic">{$localeSettings.dictionary.Date.Empty}</div>
         {/if}
         <!-- <div class="p-1">
             <DateField
diff --git a/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte b/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte
index 1a7665ca4..45c2d593e 100644
--- a/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte
+++ b/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte
@@ -5,12 +5,12 @@
 
   export let value: DateRange | null | undefined;
 
-  const { format: format_ux } = getSettings();
+  const { format: format_ux, localeSettings } = getSettings();
 
   let showToValue = false;
   $: if (value?.to) {
     if (value?.from && value?.periodType) {
-      const { isSame } = getDateFuncsByPeriodType(value.periodType);
+      const { isSame } = getDateFuncsByPeriodType($localeSettings, value.periodType);
 
       switch (value.periodType) {
         case PeriodType.Day:
@@ -39,6 +39,7 @@
       case PeriodType.WeekThu:
       case PeriodType.WeekFri:
       case PeriodType.WeekSat:
+      case PeriodType.Week:
 
       case PeriodType.BiWeek1Sun:
       case PeriodType.BiWeek1Mon:
@@ -47,6 +48,7 @@
       case PeriodType.BiWeek1Thu:
       case PeriodType.BiWeek1Fri:
       case PeriodType.BiWeek1Sat:
+      case PeriodType.BiWeek1:
 
       case PeriodType.BiWeek2Sun:
       case PeriodType.BiWeek2Mon:
@@ -55,6 +57,7 @@
       case PeriodType.BiWeek2Thu:
       case PeriodType.BiWeek2Fri:
       case PeriodType.BiWeek2Sat:
+      case PeriodType.BiWeek2:
         periodType = PeriodType.Day;
         break;
 
diff --git a/packages/svelte-ux/src/lib/components/DateRangeField.svelte b/packages/svelte-ux/src/lib/components/DateRangeField.svelte
index 88b85f11e..e048a1572 100644
--- a/packages/svelte-ux/src/lib/components/DateRangeField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateRangeField.svelte
@@ -14,8 +14,7 @@
   import { getSettings } from './settings';
 
   const dispatch = createEventDispatcher();
-  const settings = getSettings();
-  const { format } = settings;
+  const { format, localeSettings } = getSettings();
 
   const _defaultValue: DateRangeType = {
     from: null,
@@ -28,9 +27,9 @@
   export let center: boolean = false;
   export let periodTypes: PeriodType[] = [
     PeriodType.Day,
-    PeriodType.WeekSun,
-    PeriodType.BiWeek1Sun,
-    // PeriodType.BiWeek2Sun,
+    PeriodType.Week,
+    PeriodType.BiWeek1,
+    // PeriodType.BiWeek2,
     PeriodType.Month,
     PeriodType.Quarter,
     PeriodType.CalendarYear,
@@ -83,7 +82,10 @@
         class="p-2"
         on:click={() => {
           if (value && value.from && value.to && value.periodType) {
-            const { difference, start, end, add } = getDateFuncsByPeriodType(value.periodType);
+            const { difference, start, end, add } = getDateFuncsByPeriodType(
+              $localeSettings,
+              value.periodType
+            );
             const offset = difference(value.from, value.to) - 1;
             value = {
               from: start(add(value.from, offset)),
@@ -130,7 +132,10 @@
         class="p-2"
         on:click={() => {
           if (value && value.from && value.to && value.periodType) {
-            const { difference, start, end, add } = getDateFuncsByPeriodType(value.periodType);
+            const { difference, start, end, add } = getDateFuncsByPeriodType(
+              $localeSettings,
+              value.periodType
+            );
             const offset = difference(value.to, value.from) + 1;
             value = {
               from: start(add(value.from, offset)),
@@ -176,7 +181,7 @@
       color="primary"
       variant="fill"
     >
-      OK
+      {$localeSettings.dictionary.Ok}
     </Button>
 
     <Button
@@ -185,7 +190,7 @@
         currentValue = value;
       }}
     >
-      Cancel
+      {$localeSettings.dictionary.Cancel}
     </Button>
   </div>
 </Dialog>
diff --git a/packages/svelte-ux/src/lib/types/typeHelpers.ts b/packages/svelte-ux/src/lib/types/typeHelpers.ts
index f85188642..018003b54 100644
--- a/packages/svelte-ux/src/lib/types/typeHelpers.ts
+++ b/packages/svelte-ux/src/lib/types/typeHelpers.ts
@@ -122,3 +122,21 @@ export type EventWithTarget = Partial<Pick<Event, 'currentTarget' | 'target'>>;
 export type Prettify<T> = {
   [K in keyof T]: T[K];
 } & {};
+
+/**
+ * util to make sure we have handled all enum cases in a switch statement
+ * Just add at the end of the switch statement a `default` like this:
+ *
+ * ```ts
+ * switch (periodType) {
+ *   case xxx:
+ *     ...
+ *
+ *   default:
+ *     assertNever(periodType); // This will now report unhandled cases
+ * }
+ * ```
+ */
+export function assertNever(x: never): never {
+  throw new Error(`Unhandled enum case: ${x}`);
+}
diff --git a/packages/svelte-ux/src/lib/utils/date.test.ts b/packages/svelte-ux/src/lib/utils/date.test.ts
index 3caa232fe..f4e6f4dcc 100644
--- a/packages/svelte-ux/src/lib/utils/date.test.ts
+++ b/packages/svelte-ux/src/lib/utils/date.test.ts
@@ -6,6 +6,8 @@ import {
   utcToLocalDate,
   formatIntl,
   formatDateWithLocale,
+  getPeriodTypeByCode,
+  getPeriodTypeCode,
 } from './date';
 import { formatWithLocale } from '.';
 import { createLocaleSettings, defaultLocale } from './locale';
@@ -518,3 +520,17 @@ describe('getWeekStartsOnFromIntl() tokens', () => {
     expect(val).toBe(DayOfWeek.Monday);
   });
 });
+
+describe('getPeriodTypeByCode()', () => {
+  it('week', () => {
+    const val = getPeriodTypeByCode('WEEK');
+    expect(val).toBe(PeriodType.Week);
+  });
+});
+
+describe('getPeriodTypeCode()', () => {
+  it('BiWeek1Sat', () => {
+    const val = getPeriodTypeCode(PeriodType.BiWeek1Sat);
+    expect(val).toBe('BIWEEK1-SAT');
+  });
+});
diff --git a/packages/svelte-ux/src/lib/utils/date.ts b/packages/svelte-ux/src/lib/utils/date.ts
index 5c41116d3..03b69342c 100644
--- a/packages/svelte-ux/src/lib/utils/date.ts
+++ b/packages/svelte-ux/src/lib/utils/date.ts
@@ -42,6 +42,7 @@ import {
   type DateFormatVariantPreset,
 } from './date_types';
 import { defaultLocale, type LocaleSettings } from './locale';
+import { assertNever } from '$lib/types';
 
 export * from './date_types';
 
@@ -64,8 +65,15 @@ export function getPeriodTypeNameWithLocale(settings: LocaleSettings, periodType
   } = settings;
 
   switch (periodType) {
+    case PeriodType.Custom:
+      return 'Custom';
+
     case PeriodType.Day:
-      return dico?.Day;
+      return dico.Day;
+    case PeriodType.DayTime:
+      return dico.DayTime;
+    case PeriodType.TimeOnly:
+      return dico.Time;
 
     case PeriodType.WeekSun:
       return `${dico.Week} (${getDayOfWeekName(DayOfWeek.Sunday, locale)})`;
@@ -81,6 +89,8 @@ export function getPeriodTypeNameWithLocale(settings: LocaleSettings, periodType
       return `${dico.Week} (${getDayOfWeekName(5, locale)})`;
     case PeriodType.WeekSat:
       return `${dico.Week} (${getDayOfWeekName(6, locale)})`;
+    case PeriodType.Week:
+      return dico.Week;
 
     case PeriodType.Month:
       return dico.Month;
@@ -107,6 +117,8 @@ export function getPeriodTypeNameWithLocale(settings: LocaleSettings, periodType
       return `${dico.BiWeek} (${getDayOfWeekName(5, locale)})`;
     case PeriodType.BiWeek1Sat:
       return `${dico.BiWeek} (${getDayOfWeekName(6, locale)})`;
+    case PeriodType.BiWeek1:
+      return dico.BiWeek;
 
     case PeriodType.BiWeek2Sun:
       return `${dico.BiWeek} 2 (${getDayOfWeekName(0, locale)})`;
@@ -122,123 +134,62 @@ export function getPeriodTypeNameWithLocale(settings: LocaleSettings, periodType
       return `${dico.BiWeek} 2 (${getDayOfWeekName(5, locale)})`;
     case PeriodType.BiWeek2Sat:
       return `${dico.BiWeek} 2 (${getDayOfWeekName(6, locale)})`;
+    case PeriodType.BiWeek2:
+      return `${dico.BiWeek} 2`;
 
     default:
-      return 'Unknown';
+      assertNever(periodType); // This will now report unhandled cases
   }
 }
 
-export function getPeriodTypeCode(periodType: PeriodType) {
-  switch (periodType) {
-    case PeriodType.Day:
-      return 'DAY';
-
-    case PeriodType.WeekSun:
-      return 'WEEK-SUN';
-    case PeriodType.WeekMon:
-      return 'WEEK-MON';
-    case PeriodType.WeekTue:
-      return 'WEEK-TUE';
-    case PeriodType.WeekWed:
-      return 'WEEK-WED';
-    case PeriodType.WeekThu:
-      return 'WEEK-THU';
-    case PeriodType.WeekFri:
-      return 'WEEK-FRI';
-    case PeriodType.WeekSat:
-      return 'WEEK-SAT';
-
-    case PeriodType.Month:
-      return 'MTH';
-    case PeriodType.Quarter:
-      return 'QTR';
-    case PeriodType.CalendarYear:
-      return 'CY';
-    case PeriodType.FiscalYearOctober:
-      return 'FY-OCT';
-
-    case PeriodType.BiWeek1Sun:
-      return 'BIWEEK1-SUN';
-    case PeriodType.BiWeek1Mon:
-      return 'BIWEEK1-MON';
-    case PeriodType.BiWeek1Tue:
-      return 'BIWEEK1-TUE';
-    case PeriodType.BiWeek1Wed:
-      return 'BIWEEK1-WED';
-    case PeriodType.BiWeek1Thu:
-      return 'BIWEEK1-THU';
-    case PeriodType.BiWeek1Fri:
-      return 'BIWEEK1-FRI';
-    case PeriodType.BiWeek1Sat:
-      return 'BIWEEK1-SAT';
-
-    case PeriodType.BiWeek2Sun:
-      return 'BIWEEK2-SUN';
-    case PeriodType.BiWeek2Mon:
-      return 'BIWEEK2-MON';
-    case PeriodType.BiWeek2Tue:
-      return 'BIWEEK2-TUE';
-    case PeriodType.BiWeek2Wed:
-      return 'BIWEEK2-WED';
-    case PeriodType.BiWeek2Thu:
-      return 'BIWEEK2-THU';
-    case PeriodType.BiWeek2Fri:
-      return 'BIWEEK2-FRI';
-    case PeriodType.BiWeek2Sat:
-      return 'BIWEEK2-SAT';
-
-    default:
-      return 'UNK';
-  }
+const periodTypeMappings: Record<PeriodType, string> = {
+  [PeriodType.Custom]: 'CUSTOM',
+
+  [PeriodType.Day]: 'DAY',
+  [PeriodType.DayTime]: 'DAY-TIME',
+  [PeriodType.TimeOnly]: 'TIME',
+
+  [PeriodType.WeekSun]: 'WEEK-SUN',
+  [PeriodType.WeekMon]: 'WEEK-MON',
+  [PeriodType.WeekTue]: 'WEEK-TUE',
+  [PeriodType.WeekWed]: 'WEEK-WED',
+  [PeriodType.WeekThu]: 'WEEK-THU',
+  [PeriodType.WeekFri]: 'WEEK-FRI',
+  [PeriodType.WeekSat]: 'WEEK-SAT',
+  [PeriodType.Week]: 'WEEK',
+
+  [PeriodType.Month]: 'MTH',
+  [PeriodType.MonthYear]: 'MTH-CY',
+  [PeriodType.Quarter]: 'QTR',
+  [PeriodType.CalendarYear]: 'CY',
+  [PeriodType.FiscalYearOctober]: 'FY-OCT',
+
+  [PeriodType.BiWeek1Sun]: 'BIWEEK1-SUN',
+  [PeriodType.BiWeek1Mon]: 'BIWEEK1-MON',
+  [PeriodType.BiWeek1Tue]: 'BIWEEK1-TUE',
+  [PeriodType.BiWeek1Wed]: 'BIWEEK1-WED',
+  [PeriodType.BiWeek1Thu]: 'BIWEEK1-THU',
+  [PeriodType.BiWeek1Fri]: 'BIWEEK1-FRI',
+  [PeriodType.BiWeek1Sat]: 'BIWEEK1-SAT',
+  [PeriodType.BiWeek1]: 'BIWEEK1',
+
+  [PeriodType.BiWeek2Sun]: 'BIWEEK2-SUN',
+  [PeriodType.BiWeek2Mon]: 'BIWEEK2-MON',
+  [PeriodType.BiWeek2Tue]: 'BIWEEK2-TUE',
+  [PeriodType.BiWeek2Wed]: 'BIWEEK2-WED',
+  [PeriodType.BiWeek2Thu]: 'BIWEEK2-THU',
+  [PeriodType.BiWeek2Fri]: 'BIWEEK2-FRI',
+  [PeriodType.BiWeek2Sat]: 'BIWEEK2-SAT',
+  [PeriodType.BiWeek2]: 'BIWEEK2',
+};
+
+export function getPeriodTypeCode(periodType: PeriodType): string {
+  return periodTypeMappings[periodType];
 }
 
-export function getPeriodTypeByCode(code: string) {
-  switch (code) {
-    case 'DAY':
-      return PeriodType.Day;
-
-    case 'WEEK-SUN':
-      return PeriodType.WeekSun;
-    case 'WEEK-MON':
-      return PeriodType.WeekMon;
-    case 'WEEK-TUE':
-      return PeriodType.WeekTue;
-    case 'WEEK-WED':
-      return PeriodType.WeekWed;
-    case 'WEEK-THU':
-      return PeriodType.WeekThu;
-    case 'WEEK-FRI':
-      return PeriodType.WeekFri;
-    case 'WEEK-SAT':
-      return PeriodType.WeekSat;
-
-    case 'MTH':
-      return PeriodType.Month;
-    case 'QTR':
-      return PeriodType.Quarter;
-    case 'CY':
-      return PeriodType.CalendarYear;
-    case 'FY-OCT':
-      return PeriodType.FiscalYearOctober;
-
-    case 'BIWEEK1-SUN':
-      return PeriodType.BiWeek1Sun;
-    case 'BIWEEK1-MON':
-      return PeriodType.BiWeek1Mon;
-    case 'BIWEEK1-TUE':
-      return PeriodType.BiWeek1Tue;
-    case 'BIWEEK1-WED':
-      return PeriodType.BiWeek1Wed;
-    case 'BIWEEK1-THU':
-      return PeriodType.BiWeek1Thu;
-    case 'BIWEEK1-FRI':
-      return PeriodType.BiWeek1Fri;
-    case 'BIWEEK1-SAT':
-      return PeriodType.BiWeek1Sat;
-
-    default:
-      return null;
-  }
+export function getPeriodTypeByCode(code: string): PeriodType {
+  const element = Object.entries(periodTypeMappings).find((c) => c[1] === code);
+  return parseInt(element?.[0] ?? '1');
 }
 
 export function getDayOfWeek(periodType: PeriodType) {
@@ -260,8 +211,21 @@ export function replaceDayOfWeek(periodType: PeriodType, dayOfWeek: DayOfWeek) {
 }
 
 export function hasDayOfWeek(periodType: PeriodType) {
-  const periodTypeCode = getPeriodTypeCode(periodType);
-  return /\-(SUN|MON|TUE|WED|THU|FRI|SAT)/.test(periodTypeCode);
+  // It's more: is it week related and .Week, .BiWeek1 or .BiWeek2 don't contain a day...
+  // const periodTypeCode = getPeriodTypeCode(periodType);
+  // return /\-(SUN|MON|TUE|WED|THU|FRI|SAT)/.test(periodTypeCode);
+
+  if (periodType >= PeriodType.WeekSun && periodType <= PeriodType.Week) {
+    return true;
+  }
+  if (periodType >= PeriodType.BiWeek1Sun && periodType <= PeriodType.BiWeek1) {
+    return true;
+  }
+  if (periodType >= PeriodType.BiWeek2Sun && periodType <= PeriodType.BiWeek2) {
+    return true;
+  }
+
+  return false;
 }
 
 export function getMonths(year = new Date().getFullYear()) {
@@ -367,7 +331,14 @@ export function endOfBiWeek(date: Date, week: number, startOfWeek: DayOfWeek) {
   return addDays(startOfBiWeek(date, week, startOfWeek), 13);
 }
 
-export function getDateFuncsByPeriodType(periodType: PeriodType | null | undefined) {
+export function getDateFuncsByPeriodType(
+  settings: LocaleSettings,
+  periodType: PeriodType | null | undefined
+) {
+  if (settings) {
+    periodType = updatePeriodTypeWithWeekStartsOn(settings.formats.dates.weekStartsOn, periodType);
+  }
+
   switch (periodType) {
     case PeriodType.Day:
       return {
@@ -378,6 +349,7 @@ export function getDateFuncsByPeriodType(periodType: PeriodType | null | undefin
         isSame: isSameDay,
       };
 
+    case PeriodType.Week:
     case PeriodType.WeekSun:
       return {
         start: startOfWeek,
@@ -475,6 +447,7 @@ export function getDateFuncsByPeriodType(periodType: PeriodType | null | undefin
       };
 
     // BiWeek 1
+    case PeriodType.BiWeek1:
     case PeriodType.BiWeek1Sun:
     case PeriodType.BiWeek1Mon:
     case PeriodType.BiWeek1Tue:
@@ -483,6 +456,7 @@ export function getDateFuncsByPeriodType(periodType: PeriodType | null | undefin
     case PeriodType.BiWeek1Fri:
     case PeriodType.BiWeek1Sat:
     // BiWeek 2
+    case PeriodType.BiWeek2:
     case PeriodType.BiWeek2Sun:
     case PeriodType.BiWeek2Mon:
     case PeriodType.BiWeek2Tue:
@@ -508,7 +482,14 @@ export function getDateFuncsByPeriodType(periodType: PeriodType | null | undefin
       };
     }
 
-    default:
+    // All cases not handled above
+    case PeriodType.Custom:
+    case PeriodType.DayTime:
+    case PeriodType.TimeOnly:
+
+    case PeriodType.MonthYear:
+    case null:
+    case undefined:
       // Default to end of day if periodType == null, etc
       return {
         start: startOfDay,
@@ -517,6 +498,9 @@ export function getDateFuncsByPeriodType(periodType: PeriodType | null | undefin
         difference: differenceInDays,
         isSame: isSameDay,
       };
+
+    default:
+      assertNever(periodType); // This will now report unhandled cases
   }
 }
 
@@ -666,26 +650,10 @@ export function formatDate(
   return formatDateWithLocale(defaultLocale, date, periodType, options);
 }
 
-export function formatDateWithLocale(
-  settings: LocaleSettings,
-  date: Date | string | null | undefined,
-  periodType: PeriodType,
-  options: FormatDateOptions = {}
-): string {
-  if (typeof date === 'string') {
-    date = parseISO(date);
-  }
-
-  // Handle 'Invalid Date'
-  // @ts-ignore - Date is a number (see: https://stackoverflow.com/questions/1353684/detecting-an-invalid-date-date-instance-in-javascript)
-  if (date == null || isNaN(date)) {
-    return '';
-  }
-
-  const weekStartsOn = options.weekStartsOn ?? settings.formats.dates.weekStartsOn;
-
-  const { day, dayTime, timeOnly, week, month, monthsYear, year } = settings.formats.dates.presets;
-
+export function updatePeriodTypeWithWeekStartsOn(
+  weekStartsOn: DayOfWeek,
+  periodType: PeriodType | null | undefined
+) {
   if (periodType === PeriodType.Week) {
     periodType = [
       PeriodType.WeekSun,
@@ -718,6 +686,31 @@ export function formatDateWithLocale(
     ][weekStartsOn];
   }
 
+  return periodType;
+}
+
+export function formatDateWithLocale(
+  settings: LocaleSettings,
+  date: Date | string | null | undefined,
+  periodType: PeriodType,
+  options: FormatDateOptions = {}
+): string {
+  if (typeof date === 'string') {
+    date = parseISO(date);
+  }
+
+  // Handle 'Invalid Date'
+  // @ts-ignore - Date is a number (see: https://stackoverflow.com/questions/1353684/detecting-an-invalid-date-date-instance-in-javascript)
+  if (date == null || isNaN(date)) {
+    return '';
+  }
+
+  const weekStartsOn = options.weekStartsOn ?? settings.formats.dates.weekStartsOn;
+
+  const { day, dayTime, timeOnly, week, month, monthsYear, year } = settings.formats.dates.presets;
+
+  periodType = updatePeriodTypeWithWeekStartsOn(weekStartsOn, periodType) ?? periodType;
+
   /** Resolve a preset given the chosen variant */
   function rv(preset: DateFormatVariantPreset) {
     if (options.variant === 'custom') {
@@ -742,6 +735,7 @@ export function formatDateWithLocale(
     case PeriodType.TimeOnly:
       return formatIntl(settings, date, rv(timeOnly!)!);
 
+    case PeriodType.Week: //Should never happen, but to make types happy
     case PeriodType.WeekSun:
       return range(settings, date, 0, rv(week!)!);
     case PeriodType.WeekMon:
@@ -776,6 +770,7 @@ export function formatDateWithLocale(
       const fDate = new Date(getFiscalYear(date), 0, 1);
       return formatIntl(settings, fDate, rv(year!)!);
 
+    case PeriodType.BiWeek1: //Should never happen, but to make types happy
     case PeriodType.BiWeek1Sun:
       return range(settings, date, 0, rv(week!)!, 1);
     case PeriodType.BiWeek1Mon:
@@ -791,6 +786,7 @@ export function formatDateWithLocale(
     case PeriodType.BiWeek1Sat:
       return range(settings, date, 6, rv(week!)!, 1);
 
+    case PeriodType.BiWeek2: //Should never happen, but to make types happy
     case PeriodType.BiWeek2Sun:
       return range(settings, date, 0, rv(week!)!, 2);
     case PeriodType.BiWeek2Mon:
@@ -808,6 +804,8 @@ export function formatDateWithLocale(
 
     default:
       return formatISO(date);
+    // default:
+    //   assertNever(periodType); // This will now report unhandled cases
   }
 }
 
diff --git a/packages/svelte-ux/src/lib/utils/dateRange.ts b/packages/svelte-ux/src/lib/utils/dateRange.ts
index 4689e462d..cde3271af 100644
--- a/packages/svelte-ux/src/lib/utils/dateRange.ts
+++ b/packages/svelte-ux/src/lib/utils/dateRange.ts
@@ -1,7 +1,8 @@
 import { startOfDay, isLeapYear, isAfter, isBefore, subYears } from 'date-fns';
 
-import { getDateFuncsByPeriodType } from './date';
+import { getDateFuncsByPeriodType, updatePeriodTypeWithWeekStartsOn } from './date';
 import { PeriodType } from './date_types';
+import type { LocaleSettings } from '.';
 
 export type DateRange = {
   from: Date | null;
@@ -9,90 +10,54 @@ export type DateRange = {
   periodType?: PeriodType | null;
 };
 
-export const dayPresets = getDateRangePresets(PeriodType.Day);
-export const biWeekSun1Presets = getDateRangePresets(PeriodType.BiWeek1Sun);
-export const biWeekMon1Presets = getDateRangePresets(PeriodType.BiWeek1Mon);
-export const monthPresets = getDateRangePresets(PeriodType.Month);
-export const quarterPresets = getDateRangePresets(PeriodType.Quarter);
-export const fiscalYearPresets = getDateRangePresets(PeriodType.FiscalYearOctober);
-
-const now = new Date();
+function formatMsg(
+  settings: LocaleSettings,
+  type:
+    | 'PeriodDay'
+    | 'PeriodWeek'
+    | 'PeriodBiWeek'
+    | 'PeriodMonth'
+    | 'PeriodQuarter'
+    | 'PeriodYear'
+    | 'PeriodFiscalYear',
+  lastX: number
+) {
+  return lastX === 0
+    ? settings.dictionary.Date[type].Current
+    : lastX === 1
+      ? settings.dictionary.Date[type].Last
+      : settings.dictionary.Date[type].LastX.replace('{0}', lastX.toString());
+}
 
-export function getDateRangePresets(periodType: PeriodType): { label: string; value: DateRange }[] {
+export function getDateRangePresets(
+  settings: LocaleSettings,
+  periodType: PeriodType
+): { label: string; value: DateRange }[] {
   let now = new Date();
   const today = startOfDay(now);
-  const { start, end, add } = getDateFuncsByPeriodType(periodType);
+
+  if (settings) {
+    periodType =
+      updatePeriodTypeWithWeekStartsOn(settings.formats.dates.weekStartsOn, periodType) ??
+      periodType;
+  }
+
+  const { start, end, add } = getDateFuncsByPeriodType(settings, periodType);
 
   switch (periodType) {
     case PeriodType.Day: {
-      const yesterday = start(add(today, -1));
+      const last = start(add(today, -1));
 
-      return [
-        {
-          label: 'Today', // Current Day
-          value: {
-            from: today,
-            to: end(today),
-            periodType,
-          },
-        },
-        {
-          label: 'Yesterday', // Last Day
-          value: {
-            from: yesterday,
-            to: end(yesterday),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 3 days',
+      return [0, 1, 3, 7, 14, 30].map((lastX) => {
+        return {
+          label: formatMsg(settings, 'PeriodDay', lastX),
           value: {
-            from: add(yesterday, -2),
-            to: end(yesterday),
+            from: add(last, -lastX + 1),
+            to: lastX === 0 ? end(today) : end(last),
             periodType,
           },
-        },
-        {
-          label: 'Last 7 days',
-          value: {
-            from: add(yesterday, -6),
-            to: end(yesterday),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 14 days',
-          value: {
-            from: add(yesterday, -13),
-            to: end(yesterday),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 30 days',
-          value: {
-            from: add(yesterday, -29),
-            to: end(yesterday),
-            periodType,
-          },
-        },
-        // {
-        //   label: 'Last 60 days',
-        //   value: {
-        //     from: add(yesterday, -59),
-        //     to: end(yesterday),
-        //     periodType,
-        //   },
-        // },
-        // {
-        //   label: 'Last 90 days',
-        //   value: {
-        //     from: add(yesterday, -89),
-        //     to: end(yesterday),
-        //     periodType,
-        //   },
-        // },
-      ];
+        };
+      });
     }
 
     case PeriodType.WeekSun:
@@ -102,50 +67,18 @@ export function getDateRangePresets(periodType: PeriodType): { label: string; va
     case PeriodType.WeekThu:
     case PeriodType.WeekFri:
     case PeriodType.WeekSat: {
-      const lastWeek = start(add(today, -1));
+      const last = start(add(today, -1));
 
-      return [
-        {
-          label: 'Current week', // Week to Date
-          value: {
-            from: start(today),
-            to: end(today),
-            periodType,
-          },
-        },
-        {
-          label: 'Last week', // Week to Date
-          value: {
-            from: lastWeek,
-            to: end(lastWeek),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 2 weeks',
-          value: {
-            from: start(add(lastWeek, -1)),
-            to: end(lastWeek),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 4 weeks',
-          value: {
-            from: start(add(lastWeek, -3)),
-            to: end(lastWeek),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 6 weeks',
+      return [0, 1, 2, 4, 6].map((lastX) => {
+        return {
+          label: formatMsg(settings, 'PeriodWeek', lastX),
           value: {
-            from: start(add(lastWeek, -5)),
-            to: end(lastWeek),
+            from: add(last, -lastX + 1),
+            to: lastX === 0 ? end(today) : end(last),
             periodType,
           },
-        },
-      ];
+        };
+      });
     }
 
     case PeriodType.BiWeek1Sun:
@@ -162,222 +95,90 @@ export function getDateRangePresets(periodType: PeriodType): { label: string; va
     case PeriodType.BiWeek2Thu:
     case PeriodType.BiWeek2Fri:
     case PeriodType.BiWeek2Sat: {
-      const lastBiWeek = start(add(today, -1));
+      const last = start(add(today, -1));
 
-      return [
-        {
-          label: 'Current bi-week',
-          value: {
-            from: start(today),
-            to: end(today),
-            periodType,
-          },
-        },
-        {
-          label: 'Last bi-week',
-          value: {
-            from: lastBiWeek,
-            to: end(lastBiWeek),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 2 bi-weeks',
-          value: {
-            from: start(add(lastBiWeek, -1)),
-            to: end(lastBiWeek),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 4 bi-weeks',
-          value: {
-            from: start(add(lastBiWeek, -3)),
-            to: end(lastBiWeek),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 6 bi-weeks',
+      return [0, 1, 2, 4, 6].map((lastX) => {
+        return {
+          label: formatMsg(settings, 'PeriodBiWeek', lastX),
           value: {
-            from: start(add(lastBiWeek, -5)),
-            to: end(lastBiWeek),
+            from: add(last, -lastX + 1),
+            to: lastX === 0 ? end(today) : end(last),
             periodType,
           },
-        },
-      ];
+        };
+      });
     }
 
     case PeriodType.Month: {
-      const lastMonth = start(add(today, -1));
+      const last = start(add(today, -1));
 
-      return [
-        {
-          label: 'Current month', // Month to Date
+      return [0, 1, 2, 3, 6, 12].map((lastX) => {
+        return {
+          label: formatMsg(settings, 'PeriodMonth', lastX),
           value: {
-            from: start(today),
-            to: end(today),
+            from: add(last, -lastX + 1),
+            to: lastX === 0 ? end(today) : end(last),
             periodType,
           },
-        },
-        {
-          label: 'Last month',
-          value: {
-            from: lastMonth,
-            to: end(lastMonth),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 3 months',
-          value: {
-            from: start(add(lastMonth, -2)),
-            to: end(lastMonth),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 6 months',
-          value: {
-            from: start(add(lastMonth, -5)),
-            to: end(lastMonth),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 12 months',
-          value: {
-            from: start(add(lastMonth, -11)),
-            to: end(lastMonth),
-            periodType,
-          },
-        },
-      ];
+        };
+      });
     }
 
     case PeriodType.Quarter: {
-      const lastQuarter = start(add(today, -1));
+      const last = start(add(today, -1));
 
-      return [
-        {
-          label: 'Current quarter', // Quarter to Date
-          value: {
-            from: start(today),
-            to: end(today),
-            periodType,
-          },
-        },
-        {
-          label: 'Last quarter',
-          value: {
-            from: lastQuarter,
-            to: end(lastQuarter),
-            periodType,
-          },
-        },
-        {
-          label: 'Same quarter, last year',
-          value: {
-            from: start(add(today, -4)),
-            to: end(add(today, -4)),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 4 quarters',
-          value: {
-            from: start(add(lastQuarter, -3)),
-            to: end(lastQuarter),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 3 years',
+      return [0, 1, -1, 4, 12].map((lastX) => {
+        // Special thing
+        if (lastX === -1) {
+          return {
+            label: settings.dictionary.Date.PeriodQuarterSameLastyear,
+            value: {
+              from: start(add(today, -4)),
+              to: end(add(today, -4)),
+              periodType,
+            },
+          };
+        }
+
+        return {
+          label: formatMsg(settings, 'PeriodQuarter', lastX),
           value: {
-            from: start(add(lastQuarter, -11)),
-            to: end(lastQuarter),
+            from: add(last, -lastX + 1),
+            to: lastX === 0 ? end(today) : end(last),
             periodType,
           },
-        },
-      ];
+        };
+      });
     }
 
     case PeriodType.CalendarYear: {
-      const lastYear = start(add(today, -1));
+      const last = start(add(today, -1));
 
-      return [
-        {
-          label: 'Current year', // Year to Date
-          value: {
-            from: start(today),
-            to: end(today),
-            periodType,
-          },
-        },
-        {
-          label: 'Last year',
-          value: {
-            from: lastYear,
-            to: end(lastYear),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 3 years',
-          value: {
-            from: start(add(lastYear, -2)),
-            to: end(lastYear),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 5 years',
+      return [0, 1, 3, 5].map((lastX) => {
+        return {
+          label: formatMsg(settings, 'PeriodYear', lastX),
           value: {
-            from: start(add(lastYear, -4)),
-            to: end(lastYear),
+            from: add(last, -lastX + 1),
+            to: lastX === 0 ? end(today) : end(last),
             periodType,
           },
-        },
-      ];
+        };
+      });
     }
 
     case PeriodType.FiscalYearOctober: {
-      const lastFiscalYear = start(add(today, -1));
+      const last = start(add(today, -1));
 
-      return [
-        {
-          label: 'Current fiscal year', // Fiscal Year to Date
-          value: {
-            from: start(today),
-            to: end(today),
-            periodType,
-          },
-        },
-        {
-          label: 'Last fiscal year',
-          value: {
-            from: lastFiscalYear,
-            to: end(lastFiscalYear),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 3 years',
-          value: {
-            from: start(add(lastFiscalYear, -2)),
-            to: end(lastFiscalYear),
-            periodType,
-          },
-        },
-        {
-          label: 'Last 5 years',
+      return [0, 1, 3, 5].map((lastX) => {
+        return {
+          label: formatMsg(settings, 'PeriodFiscalYear', lastX),
           value: {
-            from: start(add(lastFiscalYear, -4)),
-            to: end(lastFiscalYear),
+            from: add(last, -lastX + 1),
+            to: lastX === 0 ? end(today) : end(last),
             periodType,
           },
-        },
-      ];
+        };
+      });
     }
 
     default: {
@@ -456,14 +257,18 @@ export function getPreviousYearPeriodOffset(
 
 export type PeriodComparison = 'prevPeriod' | 'prevYear' | 'fiftyTwoWeeksAgo';
 
-export function getPeriodComparisonOffset(view: PeriodComparison, period: DateRange | undefined) {
+export function getPeriodComparisonOffset(
+  settings: LocaleSettings,
+  view: PeriodComparison,
+  period: DateRange | undefined
+) {
   if (period == null || period.from == null || period.to == null || period.periodType == null) {
     throw new Error('Period must be defined to calculate offset');
   }
 
   switch (view) {
     case 'prevPeriod':
-      const dateFuncs = getDateFuncsByPeriodType(period.periodType);
+      const dateFuncs = getDateFuncsByPeriodType(settings, period.periodType);
       return dateFuncs.difference(period.from, period.to) - 1; // Difference counts full days, need additoinal offset
 
     case 'prevYear':
diff --git a/packages/svelte-ux/src/lib/utils/dictionary.ts b/packages/svelte-ux/src/lib/utils/dictionary.ts
index ad59883e0..614d024f4 100644
--- a/packages/svelte-ux/src/lib/utils/dictionary.ts
+++ b/packages/svelte-ux/src/lib/utils/dictionary.ts
@@ -3,16 +3,37 @@ export type DictionaryMessagesOptions = {
   Cancel?: string;
 
   Date?: {
+    Start?: string;
+    End?: string;
+    Empty?: string;
+
     Day?: string;
+    DayTime?: string;
+    Time?: string;
     Week?: string;
     BiWeek?: string;
     Month?: string;
     Quarter?: string;
     CalendarYear?: string;
     FiscalYearOct?: string;
+
+    PeriodDay?: PeriodDayMsg;
+    PeriodWeek?: PeriodDayMsg;
+    PeriodBiWeek?: PeriodDayMsg;
+    PeriodMonth?: PeriodDayMsg;
+    PeriodQuarter?: PeriodDayMsg;
+    PeriodQuarterSameLastyear?: string;
+    PeriodYear?: PeriodDayMsg;
+    PeriodFiscalYear?: PeriodDayMsg;
   };
 };
 
+export type PeriodDayMsg = {
+  Current?: string;
+  Last?: string;
+  LastX?: string;
+};
+
 type DeepRequired<T> = Required<{
   [K in keyof T]: T[K] extends Required<T[K]> ? Required<T[K]> : DeepRequired<T[K]>;
 }>;
diff --git a/packages/svelte-ux/src/lib/utils/locale.ts b/packages/svelte-ux/src/lib/utils/locale.ts
index 307a54cd7..450a6440c 100644
--- a/packages/svelte-ux/src/lib/utils/locale.ts
+++ b/packages/svelte-ux/src/lib/utils/locale.ts
@@ -85,13 +85,56 @@ const defaultLocaleSettings: LocaleSettings = {
     Ok: 'Ok',
     Cancel: 'Cancel',
     Date: {
+      Start: 'Start',
+      End: 'End',
+      Empty: 'Empty',
+
       Day: 'Day',
+      DayTime: 'Day Time',
+      Time: 'Time',
       Week: 'Week',
       BiWeek: 'Bi-Week',
       Month: 'Month',
       Quarter: 'Quarter',
       CalendarYear: 'Calendar Year',
       FiscalYearOct: 'Fiscal Year (Oct)',
+
+      PeriodDay: {
+        Current: 'Today',
+        Last: 'Yesterday',
+        LastX: 'Last {0} days',
+      },
+      PeriodWeek: {
+        Current: 'This week',
+        Last: 'Last week',
+        LastX: 'Last {0} weeks',
+      },
+      PeriodBiWeek: {
+        Current: 'This bi-week',
+        Last: 'Last bi-week',
+        LastX: 'Last {0} bi-weeks',
+      },
+      PeriodMonth: {
+        Current: 'This month',
+        Last: 'Last month',
+        LastX: 'Last {0} months',
+      },
+      PeriodQuarter: {
+        Current: 'This quarter',
+        Last: 'Last quarter',
+        LastX: 'Last {0} quarters',
+      },
+      PeriodQuarterSameLastyear: 'Same quarter last year',
+      PeriodYear: {
+        Current: 'This year',
+        Last: 'Last year',
+        LastX: 'Last {0} years',
+      },
+      PeriodFiscalYear: {
+        Current: 'This fiscal year',
+        Last: 'Last fiscal year',
+        LastX: 'Last {0} fiscal years',
+      },
     },
   },
   formats: {
diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
index adc4b57b8..981fd3227 100644
--- a/packages/svelte-ux/src/routes/+layout.svelte
+++ b/packages/svelte-ux/src/routes/+layout.svelte
@@ -51,9 +51,59 @@
           },
         },
         dictionary: {
+          Ok: 'Valider',
           Cancel: 'Annuler',
           Date: {
+            Start: 'Début',
+            End: 'Fin',
+            Empty: 'Vide',
+
             Day: 'Jour',
+            DayTime: 'Jour & Heure',
+            Time: 'Heure',
+            Week: 'Semaine',
+            Month: 'Mois',
+            Quarter: 'Trimestre',
+            CalendarYear: 'Année',
+            FiscalYearOct: 'Année fiscale (octobre)',
+            BiWeek: 'Bi-hebdomadaire',
+
+            PeriodDay: {
+              Current: "Aujourd'hui",
+              Last: 'Hier',
+              LastX: 'Les {0} derniers jours',
+            },
+            PeriodWeek: {
+              Current: 'Cette semaine',
+              Last: 'La semaine dernière',
+              LastX: 'Les {0} dernières semaines',
+            },
+            PeriodBiWeek: {
+              Current: 'Cette quinzaine',
+              Last: 'La quinzaine dernière',
+              LastX: 'Les {0} dernières quinzaines',
+            },
+            PeriodMonth: {
+              Current: 'Ce mois-ci',
+              Last: 'Le mois dernier',
+              LastX: 'Les {0} derniers mois',
+            },
+            PeriodQuarter: {
+              Current: 'Ce trimestre',
+              Last: 'Le trimestre dernier',
+              LastX: 'Les {0} derniers trimestres',
+            },
+            PeriodQuarterSameLastyear: "Même trimestre l'année dernière",
+            PeriodYear: {
+              Current: 'Cette année',
+              Last: "L'année dernière",
+              LastX: 'Les {0} dernières années',
+            },
+            PeriodFiscalYear: {
+              Current: 'Cette année fiscale',
+              Last: "L'année fiscale dernière",
+              LastX: 'Les {0} dernières années fiscales',
+            },
           },
         },
       }),
diff --git a/packages/svelte-ux/src/routes/docs/components/DateField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/DateField/+page.svelte
index 0a48fdd37..840223c8a 100644
--- a/packages/svelte-ux/src/routes/docs/components/DateField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/DateField/+page.svelte
@@ -7,7 +7,10 @@
   import DateField from '$lib/components/DateField.svelte';
   import Preview from '$lib/components/Preview.svelte';
 
-  let value;
+  import { getSettings } from '$lib/components/settings';
+  const { localeSettings } = getSettings();
+
+  let value: Date;
 </script>
 
 <h1>Examples</h1>
@@ -29,8 +32,10 @@
 
 <Preview>
   <DateField {value} />
-  <Button on:click={() => (value = new Date())}>Today</Button>
-  <Button on:click={() => (value = addDays(new Date(), -1))}>Yesterday</Button>
+  <Button on:click={() => (value = new Date())}>{$localeSettings.dictionary.Date.Today}</Button>
+  <Button on:click={() => (value = addDays(new Date(), -1))}
+    >{$localeSettings.dictionary.Date.Yesterday}</Button
+  >
   <Button on:click={() => (value = addDays(new Date(), -7))}>Last Week</Button>
   <Button on:click={() => (value = addDays(new Date(), 7))}>Next Week</Button>
 </Preview>
diff --git a/packages/svelte-ux/src/routes/docs/components/DateRange/+page.svelte b/packages/svelte-ux/src/routes/docs/components/DateRange/+page.svelte
index 8e6e6701d..6c0ee686c 100644
--- a/packages/svelte-ux/src/routes/docs/components/DateRange/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/DateRange/+page.svelte
@@ -4,6 +4,9 @@
   import Preview from '$lib/components/Preview.svelte';
   import DateRange from '$lib/components/DateRange.svelte';
   import { PeriodType, getDateFuncsByPeriodType } from '$lib/utils/date';
+  import { getSettings } from '$lib/components/settings';
+
+  const { localeSettings } = getSettings();
 
   let selected = {
     from: new Date('1982-03-01T00:00:00'),
@@ -57,10 +60,10 @@
 <Preview>
   <DateRange
     periodTypes={[PeriodType.Day, PeriodType.Month]}
-    getPeriodTypePresets={(periodType) => {
-      const { start, end, add } = getDateFuncsByPeriodType(periodType);
+    getPeriodTypePresets={(fnSettings, fnPeriodType) => {
+      const { start, end, add } = getDateFuncsByPeriodType($localeSettings, fnPeriodType);
 
-      if (periodType === PeriodType.Day) {
+      if (fnPeriodType === PeriodType.Day) {
         const today = startOfDay(new Date());
         const yesterday = start(add(today, -1));
         return [
@@ -69,7 +72,7 @@
             value: {
               from: startOfMonth(today),
               to: end(today),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -77,7 +80,7 @@
             value: {
               from: startOfYear(today),
               to: end(today),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -85,7 +88,7 @@
             value: {
               from: add(yesterday, -29),
               to: end(yesterday),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -93,7 +96,7 @@
             value: {
               from: add(yesterday, -59),
               to: end(yesterday),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -101,7 +104,7 @@
             value: {
               from: add(yesterday, -89),
               to: end(yesterday),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -109,7 +112,7 @@
             value: {
               from: add(yesterday, -179),
               to: end(yesterday),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -117,11 +120,11 @@
             value: {
               from: add(yesterday, -364),
               to: end(yesterday),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
         ];
-      } else if (periodType === PeriodType.Month) {
+      } else if (fnPeriodType === PeriodType.Month) {
         const today = endOfMonth(new Date());
         const lastMonth = start(add(today, -1));
 
@@ -131,7 +134,7 @@
             value: {
               from: start(today),
               to: end(today),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -139,7 +142,7 @@
             value: {
               from: lastMonth,
               to: end(lastMonth),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -147,7 +150,7 @@
             value: {
               from: start(add(lastMonth, -2)),
               to: end(lastMonth),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -155,7 +158,7 @@
             value: {
               from: start(add(lastMonth, -5)),
               to: end(lastMonth),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
           {
@@ -163,7 +166,7 @@
             value: {
               from: start(add(lastMonth, -11)),
               to: end(lastMonth),
-              periodType,
+              periodType: fnPeriodType,
             },
           },
         ];