diff --git a/.changeset/clever-weeks-grin.md b/.changeset/clever-weeks-grin.md
new file mode 100644
index 00000000000..f11e5cfa9b5
--- /dev/null
+++ b/.changeset/clever-weeks-grin.md
@@ -0,0 +1,7 @@
+---
+"@siemens/ix-angular": minor
+"@siemens/ix": minor
+"@siemens/ix-vue": minor
+---
+
+feat(core/date-dropdown|date-picker|datetime-picker): add missing properties to picker components
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
index 9eb6d100afe..13560587b85 100644
--- a/packages/angular/src/components.ts
+++ b/packages/angular/src/components.ts
@@ -488,7 +488,7 @@ export declare interface IxContentHeader extends Components.IxContentHeader {
 
 
 @ProxyCmp({
-  inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'],
+  inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'locale', 'maxDate', 'minDate', 'range', 'to', 'weekStartIndex'],
   methods: ['getDateRange']
 })
 @Component({
@@ -496,7 +496,7 @@ export declare interface IxContentHeader extends Components.IxContentHeader {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'],
+  inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'locale', 'maxDate', 'minDate', 'range', 'to', 'weekStartIndex'],
 })
 export class IxDateDropdown {
   protected el: HTMLElement;
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index 15c74bf5562..ad52a530aa9 100644
--- a/packages/core/component-doc.json
+++ b/packages/core/component-doc.json
@@ -3579,6 +3579,32 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "locale",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "locale",
+          "reflectToAttr": false,
+          "docs": "Locale identifier (e.g. 'en' or 'de').",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.6.0"
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "maxDate",
           "type": "string",
@@ -3666,6 +3692,33 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "weekStartIndex",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "week-start-index",
+          "reflectToAttr": false,
+          "docs": "The index of which day to start the week on, based on the Locale#weekdays array.\nE.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.6.0"
+            }
+          ],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [
@@ -3954,7 +4007,7 @@
           "mutable": false,
           "attr": "locale",
           "reflectToAttr": false,
-          "docs": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.",
+          "docs": "Locale identifier (e.g. 'en' or 'de').",
           "docsTags": [
             {
               "name": "since",
@@ -17749,6 +17802,11 @@
       "docstring": "",
       "path": "src/components/css-grid/css-grid.tsx"
     },
+    "src/components/date-time-card/date-time-card.tsx::DateTimeCardCorners": {
+      "declaration": "export type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';",
+      "docstring": "",
+      "path": "src/components/date-time-card/date-time-card.tsx"
+    },
     "src/components/date-dropdown/date-dropdown.tsx::DateDropdownOption": {
       "declaration": "{\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n}",
       "docstring": "",
@@ -17759,11 +17817,6 @@
       "docstring": "",
       "path": "src/components/date-dropdown/date-dropdown.tsx"
     },
-    "src/components/date-time-card/date-time-card.tsx::DateTimeCardCorners": {
-      "declaration": "export type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';",
-      "docstring": "",
-      "path": "src/components/date-time-card/date-time-card.tsx"
-    },
     "src/components/date-picker/date-picker.tsx::DateChangeEvent": {
       "declaration": "{\n  from: string;\n  to: string;\n}",
       "docstring": "",
@@ -17785,7 +17838,7 @@
       "path": "src/components/dropdown-button/dropdown-button.tsx"
     },
     "src/components/dropdown/placement.ts::AlignedPlacement": {
-      "declaration": "\"bottom-start\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-end\" | \"left-start\" | \"left-end\"",
+      "declaration": "\"bottom-start\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\" | \"top-start\" | \"top-end\" | \"bottom-end\"",
       "docstring": "",
       "path": "src/components/dropdown/placement.ts"
     },
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 00edf5ba082..588eb0da58b 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -576,6 +576,11 @@ export namespace Components {
           * Text for the done button. Will be used for translation.
          */
         "i18nNoRange": string;
+        /**
+          * Locale identifier (e.g. 'en' or 'de').
+          * @since 2.6.0
+         */
+        "locale"?: string;
         /**
           * The latest date that can be selected by the date picker. If not set there will be no restriction.
          */
@@ -593,6 +598,11 @@ export namespace Components {
          */
         "to": string;
         "today": string;
+        /**
+          * The index of which day to start the week on, based on the Locale#weekdays array. E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+          * @since 2.6.0
+         */
+        "weekStartIndex": number;
     }
     interface IxDatePicker {
         /**
@@ -628,7 +638,7 @@ export namespace Components {
          */
         "individual": boolean;
         /**
-          * Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+          * Locale identifier (e.g. 'en' or 'de').
           * @since 2.1.0
          */
         "locale"?: string;
@@ -4669,6 +4679,11 @@ declare namespace LocalJSX {
           * Text for the done button. Will be used for translation.
          */
         "i18nNoRange"?: string;
+        /**
+          * Locale identifier (e.g. 'en' or 'de').
+          * @since 2.6.0
+         */
+        "locale"?: string;
         /**
           * The latest date that can be selected by the date picker. If not set there will be no restriction.
          */
@@ -4690,6 +4705,11 @@ declare namespace LocalJSX {
          */
         "to"?: string;
         "today"?: string;
+        /**
+          * The index of which day to start the week on, based on the Locale#weekdays array. E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+          * @since 2.6.0
+         */
+        "weekStartIndex"?: number;
     }
     interface IxDatePicker {
         /**
@@ -4721,7 +4741,7 @@ declare namespace LocalJSX {
          */
         "individual"?: boolean;
         /**
-          * Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+          * Locale identifier (e.g. 'en' or 'de').
           * @since 2.1.0
          */
         "locale"?: string;
diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx
index 80a2a0f6f80..78def47fefb 100644
--- a/packages/core/src/components/date-dropdown/date-dropdown.tsx
+++ b/packages/core/src/components/date-dropdown/date-dropdown.tsx
@@ -21,6 +21,7 @@ import {
   Watch,
 } from '@stencil/core';
 import { DateTime } from 'luxon';
+import { IxDatePickerComponent } from '../date-picker/date-picker-component';
 import { makeRef } from '../utils/make-ref';
 
 export type DateDropdownOption = {
@@ -44,7 +45,7 @@ export type DateRangeChangeEvent = {
   styleUrl: 'date-dropdown.scss',
   shadow: true,
 })
-export class DateDropdown {
+export class DateDropdown implements Omit<IxDatePickerComponent, 'corners'> {
   @Element() hostElement!: HTMLIxDateDropdownElement;
 
   /**
@@ -144,6 +145,21 @@ export class DateDropdown {
     this.onDateRangeIdChange();
   }
 
+  /**
+   * Locale identifier (e.g. 'en' or 'de').
+   *
+   * @since 2.6.0
+   */
+  @Prop() locale?: string;
+
+  /**
+   * The index of which day to start the week on, based on the Locale#weekdays array.
+   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+   *
+   * @since 2.6.0
+   */
+  @Prop() weekStartIndex = 0;
+
   /**
    * Text for custom dropdown item. Will be used for translation.
    */
@@ -365,6 +381,7 @@ export class DateDropdown {
                   <Fragment>
                     <ix-date-picker
                       standaloneAppearance={false}
+                      locale={this.locale}
                       onDateChange={(e) => {
                         e.stopPropagation();
                         this.currentRangeValue = {
@@ -381,6 +398,7 @@ export class DateDropdown {
                       minDate={this.minDate}
                       maxDate={this.maxDate}
                       today={this.today}
+                      weekStartIndex={this.weekStartIndex}
                     ></ix-date-picker>
                     <div class="pull-right">
                       <ix-button
diff --git a/packages/core/src/components/date-picker/date-picker-component.ts b/packages/core/src/components/date-picker/date-picker-component.ts
new file mode 100644
index 00000000000..93a1caf5c7f
--- /dev/null
+++ b/packages/core/src/components/date-picker/date-picker-component.ts
@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { DateTimeCardCorners } from '../date-time-card/date-time-card';
+
+export interface IxDatePickerComponent {
+  /**
+   * Annotate with @Prop() decorator
+   */
+  format: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  range: boolean;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  corners: DateTimeCardCorners;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  from?: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  to?: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  minDate: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  maxDate: string;
+
+  /**
+   * Annotate with @Prop({ attribute: 'i18n-done' }) decorator
+   */
+  i18nDone: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  weekStartIndex: number;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  locale?: string;
+}
diff --git a/packages/core/src/components/date-picker/date-picker.scss b/packages/core/src/components/date-picker/date-picker.scss
index ba2821f4a49..306655dbe82 100644
--- a/packages/core/src/components/date-picker/date-picker.scss
+++ b/packages/core/src/components/date-picker/date-picker.scss
@@ -9,6 +9,7 @@
 
 @import 'common-variables';
 @import 'mixins/shadow-dom/component';
+@import 'mixins/text-truncation';
 
 :host {
   @include ix-component;
@@ -143,23 +144,23 @@
 
           &:hover {
             background-color: var(
-                            --theme-datepicker-day--background--selected-hover
+              --theme-datepicker-day--background--selected-hover
             );
           }
 
           &:active {
             background-color: var(
-                            --theme-datepicker-day--background--selected-active
+              --theme-datepicker-day--background--selected-active
             );
           }
 
           &.disabled {
             pointer-events: none;
             background-color: var(
-                            --theme-datepicker-day--background--selected-disabled
+              --theme-datepicker-day--background--selected-disabled
             );
             border: 1px solid
-            var(--theme-datepicker-day--background--selected-disabled);
+              var(--theme-datepicker-day--background--selected-disabled);
             color: var(--theme-datepicker-day--color--selected-disabled);
           }
         }
@@ -172,27 +173,27 @@
 
           &:hover {
             background-color: var(
-                            --theme-datepicker-day--background--range-hover
+              --theme-datepicker-day--background--range-hover
             );
             border: 1px solid
-            var(--theme-datepicker-today--border-color--range-hover);
+              var(--theme-datepicker-today--border-color--range-hover);
           }
 
           &:active {
             background-color: var(
-                            --theme-datepicker-day--background--range-active
+              --theme-datepicker-day--background--range-active
             );
             border: 1px solid
-            var(--theme-datepicker-today--border-color--range-active);
+              var(--theme-datepicker-today--border-color--range-active);
           }
 
           &.disabled {
             background-color: var(
-                            --theme-datepicker-day--background--range-disabled
+              --theme-datepicker-day--background--range-disabled
             );
             color: var(--theme-datepicker-day--color--range-disabled);
             border: 1px solid
-            var(--theme-datepicker-today--border-color--range-disabled);
+              var(--theme-datepicker-today--border-color--range-disabled);
           }
         }
 
@@ -219,20 +220,20 @@
 
         &:hover {
           background-color: var(
-                          --theme-datepicker-day--background--selected-hover
+            --theme-datepicker-day--background--selected-hover
           );
         }
 
         &:active {
           background-color: var(
-                          --theme-datepicker-day--background--selected-active
+            --theme-datepicker-day--background--selected-active
           );
         }
 
         &.disabled {
           pointer-events: none;
           background-color: var(
-                          --theme-datepicker-day--background--selected-disabled
+            --theme-datepicker-day--background--selected-disabled
           );
           color: var(--theme-datepicker-day--color--selected-disabled);
         }
@@ -244,20 +245,20 @@
 
         &:hover {
           background-color: var(
-                          --theme-datepicker-day--background--range-hover
+            --theme-datepicker-day--background--range-hover
           );
         }
 
         &:active {
           background-color: var(
-                          --theme-datepicker-day--background--range-active
+            --theme-datepicker-day--background--range-active
           );
         }
 
         &.disabled {
           pointer-events: none;
           background-color: var(
-                          --theme-datepicker-day--background--range-disabled
+            --theme-datepicker-day--background--range-disabled
           );
           color: var(--theme-datepicker-day--color--range-disabled);
         }
@@ -276,6 +277,10 @@
         border: none;
         background: none;
         cursor: initial;
+
+        .overflow {
+          @include ellipsis;
+        }
       }
 
       &.empty-day {
@@ -296,7 +301,7 @@
       &:focus-visible {
         background-color: var(--theme-datepicker-day--background--selected);
         border: inset 1px solid
-        var(--theme-datepicker-day--border-color--selected);
+          var(--theme-datepicker-day--border-color--selected);
         color: var(--theme-datepicker-day--color--selected);
         font-size: 14px;
         line-height: 20px;
diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx
index e0e82524523..0b3630a7173 100644
--- a/packages/core/src/components/date-picker/date-picker.tsx
+++ b/packages/core/src/components/date-picker/date-picker.tsx
@@ -24,6 +24,7 @@ import { DateTimeCardCorners } from '../date-time-card/date-time-card';
 
 import { DateTime, Info } from 'luxon';
 import { OnListener } from '../utils/listener';
+import { IxDatePickerComponent } from './date-picker-component';
 import { makeRef } from '../utils/make-ref';
 
 export type DateChangeEvent = {
@@ -31,8 +32,6 @@ export type DateChangeEvent = {
   to: string;
 };
 
-export type DateTimeCorners = DateTimeCardCorners;
-
 interface CalendarWeek {
   weekNumber: number;
   dayNumbers: (number | undefined)[];
@@ -43,7 +42,7 @@ interface CalendarWeek {
   styleUrl: 'date-picker.scss',
   shadow: true,
 })
-export class DatePicker {
+export class DatePicker implements IxDatePickerComponent {
   @Element() hostElement!: HTMLIxDatePickerElement;
 
   /**
@@ -142,8 +141,7 @@ export class DatePicker {
   @Prop() weekStartIndex = 0;
 
   /**
-   * Format of time string
-   * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+   * Locale identifier (e.g. 'en' or 'de').
    *
    * @since 2.1.0
    */
@@ -783,7 +781,7 @@ export class DatePicker {
             <div class="calendar-item week-day"></div>
             {this.dayNames.map((name) => (
               <div key={name} class="calendar-item week-day">
-                {name.slice(0, 3)}
+                <div class="overflow">{name.slice(0, 3)}</div>
               </div>
             ))}
             {this.calendar.map((week) => {
diff --git a/packages/core/src/components/datetime-picker/datetime-picker.tsx b/packages/core/src/components/datetime-picker/datetime-picker.tsx
index 7324899a1f0..3c71b684ad4 100644
--- a/packages/core/src/components/datetime-picker/datetime-picker.tsx
+++ b/packages/core/src/components/datetime-picker/datetime-picker.tsx
@@ -9,6 +9,7 @@
 
 import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 import type { DateChangeEvent } from '../date-picker/date-picker';
+import { IxDatePickerComponent } from '../date-picker/date-picker-component';
 
 export type DateTimeSelectEvent = {
   from: string;
@@ -25,7 +26,9 @@ export type DateTimeDateChangeEvent =
   styleUrl: 'datetime-picker.scss',
   shadow: true,
 })
-export class DatetimePicker {
+export class DatetimePicker
+  implements Omit<IxDatePickerComponent, 'corners' | 'format'>
+{
   /**
    * If true a date-range can be selected (from/to).
    */
@@ -241,7 +244,6 @@ export class DatetimePicker {
               <ix-time-picker
                 class="min-width"
                 ref={(ref) => (this.timePickerElement = ref)}
-                corners="right"
                 standaloneAppearance={false}
                 showHour={this.showHour}
                 showMinutes={this.showMinutes}
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts b/packages/core/src/tests/date-picker/date-picker.e2e.ts
index 86ab0ad9beb..797d7b82b8c 100644
--- a/packages/core/src/tests/date-picker/date-picker.e2e.ts
+++ b/packages/core/src/tests/date-picker/date-picker.e2e.ts
@@ -13,15 +13,16 @@ import { regressionTest } from '@utils/test';
 regressionTest.describe('date picker', () => {
   regressionTest('basic', async ({ page }) => {
     await page.goto('date-picker/basic');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixels: 4,
-    });
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 
   regressionTest('range', async ({ page }) => {
     await page.goto('date-picker/range');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixels: 4,
-    });
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('locales', async ({ page }) => {
+    await page.goto('date-picker/i18n');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 });
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..6bcd5de2f07
Binary files /dev/null and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..9e51e94c957
Binary files /dev/null and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-locales-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-picker/i18n/index.html b/packages/core/src/tests/date-picker/i18n/index.html
new file mode 100644
index 00000000000..8c00b845498
--- /dev/null
+++ b/packages/core/src/tests/date-picker/i18n/index.html
@@ -0,0 +1,43 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <div
+      style="
+        display: flex;
+        justify-content: center;
+        position: relative;
+        margin-top: 2rem;
+      "
+    >
+      <ix-date-picker
+        range="false"
+        from="1990/03/29"
+        min-date="1990/03/05"
+        max-date="1990/03/30"
+        locale="ja"
+      ></ix-date-picker>
+      <ix-date-picker
+        range="false"
+        from="1990/03/29"
+        min-date="1990/03/05"
+        max-date="1990/03/30"
+        locale="ru"
+      ></ix-date-picker>
+    </div>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
index 1ea941c4d8b..7c74b6097b8 100644
--- a/packages/vue/src/components.ts
+++ b/packages/vue/src/components.ts
@@ -285,6 +285,8 @@ export const IxDateDropdown = /*@__PURE__*/ defineContainer<JSX.IxDateDropdown>(
   'dateRangeId',
   'customRangeAllowed',
   'dateRangeOptions',
+  'locale',
+  'weekStartIndex',
   'i18nCustomItem',
   'i18nDone',
   'i18nNoRange',