Localize date-range-picker (#18945)

src/common/datetime/localize_date.ts

@@ -0,0 +1,31 @@
+import memoizeOne from "memoize-one";
+
+export const localizeWeekdays = memoizeOne(
+  (language: string, short: boolean): string[] => {
+    const days: string[] = [];
+    const format = new Intl.DateTimeFormat(language, {
+      weekday: short ? "short" : "long",
+      timeZone: "UTC",
+    });
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(Date.UTC(1970, 0, 1 + 3 + i));
+      days.push(format.format(date));
+    }
+    return days;
+  }
+);
+
+export const localizeMonths = memoizeOne(
+  (language: string, short: boolean): string[] => {
+    const months: string[] = [];
+    const format = new Intl.DateTimeFormat(language, {
+      month: short ? "short" : "long",
+      timeZone: "UTC",
+    });
+    for (let i = 0; i < 12; i++) {
+      const date = new Date(Date.UTC(1970, 0 + i, 1));
+      months.push(format.format(date));
+    }
+    return months;
+  }
+);

src/components/date-range-picker.ts

@@ -5,6 +5,10 @@ import DateRangePicker from "vue2-daterange-picker";
 // @ts-ignore
 import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
 import { fireEvent } from "../common/dom/fire_event";
+import {
+  localizeWeekdays,
+  localizeMonths,
+} from "../common/datetime/localize_date";
 
 // Set the current date to the left picker instead of the right picker because the right is hidden
 const CustomDateRangePicker = Vue.extend({
@@ -63,6 +67,10 @@ const Component = Vue.extend({
       type: Boolean,
       default: false,
     },
+    language: {
+      type: String,
+      default: "en",
+    },
   },
   render(createElement) {
     // @ts-expect-error
@@ -77,6 +85,8 @@ const Component = Vue.extend({
         ranges: this.ranges ? {} : false,
         "locale-data": {
           firstDay: this.firstDay,
+          daysOfWeek: localizeWeekdays(this.language, true),
+          monthNames: localizeMonths(this.language, false),
         },
       },
       model: {
@@ -164,7 +174,7 @@ class DateRangePickerElement extends WrappedElement {
             color: var(--secondary-text-color);
             border-radius: 0;
             outline: none;
-            width: 32px;
+            min-width: 32px;
             height: 32px;
           }
           .daterangepicker td.off,
@@ -240,6 +250,9 @@ class DateRangePickerElement extends WrappedElement {
           }
           .daterangepicker .drp-calendar.left {
             padding: 8px;
+            width: unset;
+            max-width: unset;
+            min-width: 270px;
           }
           .daterangepicker.show-calendar .ranges {
             margin-top: 0;

src/components/ha-date-range-picker.ts

@@ -253,6 +253,7 @@ export class HaDateRangePicker extends LitElement {
         opening-direction=${this.openingDirection ||
         this._calcedOpeningDirection}
         first-day=${firstWeekdayIndex(this.hass.locale)}
+        language=${this.hass.locale.language}
       >
         <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
           ${!this.minimal