From ce632b36c9e828ec7caca210a9f674cda411da9f Mon Sep 17 00:00:00 2001 From: karwosts Date: Thu, 7 Dec 2023 06:14:46 -0800 Subject: [PATCH 1/4] Localize date-range-picker --- src/components/date-range-picker.ts | 37 ++++++++++++++++++++++++++ src/components/ha-date-range-picker.ts | 20 ++++++++++++++ src/translations/en.json | 9 +++++++ 3 files changed, 66 insertions(+) diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts index b60ce14763e3..fd95cbabb0cc 100644 --- a/src/components/date-range-picker.ts +++ b/src/components/date-range-picker.ts @@ -63,6 +63,34 @@ const Component = Vue.extend({ type: Boolean, default: false, }, + weekdaySu: { + type: String, + default: "Su", + }, + weekdayMo: { + type: String, + default: "Mo", + }, + weekdayTu: { + type: String, + default: "Tu", + }, + weekdayWe: { + type: String, + default: "We", + }, + weekdayTh: { + type: String, + default: "Th", + }, + weekdayFr: { + type: String, + default: "Fr", + }, + weekdaySa: { + type: String, + default: "Sa", + }, }, render(createElement) { // @ts-expect-error @@ -77,6 +105,15 @@ const Component = Vue.extend({ ranges: this.ranges ? {} : false, "locale-data": { firstDay: this.firstDay, + daysOfWeek: [ + this.weekdaySu, + this.weekdayMo, + this.weekdayTu, + this.weekdayWe, + this.weekdayTh, + this.weekdayFr, + this.weekdaySa, + ], }, }, model: { diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 29b43c697918..39d44989b21f 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -42,6 +42,8 @@ export interface DateRangePickerRanges { [key: string]: [Date, Date]; } +const DAYS = ["su", "mo", "tu", "we", "th", "fr", "sa"] as const; + @customElement("ha-date-range-picker") export class HaDateRangePicker extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -76,12 +78,23 @@ export class HaDateRangePicker extends LitElement { | "center" | "inline"; + @state() private _weekdays?: string[]; + protected willUpdate(changedProps: PropertyValues) { if ( (!this.hasUpdated && this.ranges === undefined) || (changedProps.has("hass") && this.hass?.localize !== changedProps.get("hass")?.localize) ) { + this._weekdays = DAYS.map((day) => + this.hass.localize( + `ui.components.date-range-picker.weekdays_short.${day}` + ) + ); + + // temporary for development so I can view other languages + // this._weekdays = DAYS.map((day) => this.hass.localize(`ui.components.calendar.event.repeat.weekly.weekday.${day}`)); + const today = new Date(); const weekStartsOn = firstWeekdayIndex(this.hass.locale); const weekStart = calcDate( @@ -253,6 +266,13 @@ export class HaDateRangePicker extends LitElement { opening-direction=${this.openingDirection || this._calcedOpeningDirection} first-day=${firstWeekdayIndex(this.hass.locale)} + weekday-su=${this._weekdays?.[0]} + weekday-mo=${this._weekdays?.[1]} + weekday-tu=${this._weekdays?.[2]} + weekday-we=${this._weekdays?.[3]} + weekday-th=${this._weekdays?.[4]} + weekday-fr=${this._weekdays?.[5]} + weekday-sa=${this._weekdays?.[6]} >
${!this.minimal diff --git a/src/translations/en.json b/src/translations/en.json index 41ed918e2319..892d649bf989 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -604,6 +604,15 @@ "end_date": "End date", "select": "Select", "select_date_range": "Select time period", + "weekdays_short": { + "su": "[%key:ui::components::calendar::event::repeat::weekly::weekday::su%]", + "mo": "[%key:ui::components::calendar::event::repeat::weekly::weekday::mo%]", + "tu": "[%key:ui::components::calendar::event::repeat::weekly::weekday::tu%]", + "we": "[%key:ui::components::calendar::event::repeat::weekly::weekday::we%]", + "th": "[%key:ui::components::calendar::event::repeat::weekly::weekday::th%]", + "fr": "[%key:ui::components::calendar::event::repeat::weekly::weekday::fr%]", + "sa": "[%key:ui::components::calendar::event::repeat::weekly::weekday::sa%]" + }, "ranges": { "today": "Today", "yesterday": "Yesterday", From 055b0f7e3ac168adf215b574dd07840ec6c2dee6 Mon Sep 17 00:00:00 2001 From: karwosts Date: Fri, 8 Dec 2023 07:21:27 -0800 Subject: [PATCH 2/4] updates --- src/common/datetime/localize_date.ts | 47 +++++++++++++++++++++++++ src/components/date-range-picker.ts | 48 +++++++------------------- src/components/ha-date-range-picker.ts | 21 +---------- 3 files changed, 60 insertions(+), 56 deletions(-) create mode 100644 src/common/datetime/localize_date.ts diff --git a/src/common/datetime/localize_date.ts b/src/common/datetime/localize_date.ts new file mode 100644 index 000000000000..e73cd5ab4711 --- /dev/null +++ b/src/common/datetime/localize_date.ts @@ -0,0 +1,47 @@ +import memoizeOne from "memoize-one"; + +// Sunday = 0 +const localizeWeekday = ( + language: string, + day_of_week: number, + short: boolean +): string => { + const date = new Date(Date.UTC(1970, 0, 1 + 3 + day_of_week)); + return new Intl.DateTimeFormat(language, { + weekday: short ? "short" : "long", + timeZone: "UTC", + }).format(date); +}; + +export const localizeWeekdays = memoizeOne( + (language: string, short: boolean): string[] => { + const days: string[] = []; + for (let i = 0; i < 7; i++) { + days.push(localizeWeekday(language, i, short)); + } + return days; + } +); + +// January = 0 +const localizeMonth = ( + language: string, + month: number, + short: boolean +): string => { + const date = new Date(Date.UTC(1970, 0 + month, 1)); + return new Intl.DateTimeFormat(language, { + month: short ? "short" : "long", + timeZone: "UTC", + }).format(date); +}; + +export const localizeMonths = memoizeOne( + (language: string, short: boolean): string[] => { + const months: string[] = []; + for (let i = 0; i < 12; i++) { + months.push(localizeMonth(language, i, short)); + } + return months; + } +); diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts index fd95cbabb0cc..8aab8cbe67ab 100644 --- a/src/components/date-range-picker.ts +++ b/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,33 +67,9 @@ const Component = Vue.extend({ type: Boolean, default: false, }, - weekdaySu: { + language: { type: String, - default: "Su", - }, - weekdayMo: { - type: String, - default: "Mo", - }, - weekdayTu: { - type: String, - default: "Tu", - }, - weekdayWe: { - type: String, - default: "We", - }, - weekdayTh: { - type: String, - default: "Th", - }, - weekdayFr: { - type: String, - default: "Fr", - }, - weekdaySa: { - type: String, - default: "Sa", + default: "en", }, }, render(createElement) { @@ -105,15 +85,8 @@ const Component = Vue.extend({ ranges: this.ranges ? {} : false, "locale-data": { firstDay: this.firstDay, - daysOfWeek: [ - this.weekdaySu, - this.weekdayMo, - this.weekdayTu, - this.weekdayWe, - this.weekdayTh, - this.weekdayFr, - this.weekdaySa, - ], + daysOfWeek: localizeWeekdays(this.language, true), + monthNames: localizeMonths(this.language, false), }, }, model: { @@ -199,7 +172,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, @@ -275,6 +248,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; diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 39d44989b21f..7e16fecd22db 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -42,8 +42,6 @@ export interface DateRangePickerRanges { [key: string]: [Date, Date]; } -const DAYS = ["su", "mo", "tu", "we", "th", "fr", "sa"] as const; - @customElement("ha-date-range-picker") export class HaDateRangePicker extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -78,23 +76,12 @@ export class HaDateRangePicker extends LitElement { | "center" | "inline"; - @state() private _weekdays?: string[]; - protected willUpdate(changedProps: PropertyValues) { if ( (!this.hasUpdated && this.ranges === undefined) || (changedProps.has("hass") && this.hass?.localize !== changedProps.get("hass")?.localize) ) { - this._weekdays = DAYS.map((day) => - this.hass.localize( - `ui.components.date-range-picker.weekdays_short.${day}` - ) - ); - - // temporary for development so I can view other languages - // this._weekdays = DAYS.map((day) => this.hass.localize(`ui.components.calendar.event.repeat.weekly.weekday.${day}`)); - const today = new Date(); const weekStartsOn = firstWeekdayIndex(this.hass.locale); const weekStart = calcDate( @@ -266,13 +253,7 @@ export class HaDateRangePicker extends LitElement { opening-direction=${this.openingDirection || this._calcedOpeningDirection} first-day=${firstWeekdayIndex(this.hass.locale)} - weekday-su=${this._weekdays?.[0]} - weekday-mo=${this._weekdays?.[1]} - weekday-tu=${this._weekdays?.[2]} - weekday-we=${this._weekdays?.[3]} - weekday-th=${this._weekdays?.[4]} - weekday-fr=${this._weekdays?.[5]} - weekday-sa=${this._weekdays?.[6]} + language=${this.hass.locale.language} >
${!this.minimal From 9b283f5498e7dd28ccb3b2b13991523df840322f Mon Sep 17 00:00:00 2001 From: karwosts Date: Fri, 8 Dec 2023 07:24:02 -0800 Subject: [PATCH 3/4] remove unnecessary translations --- src/translations/en.json | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/translations/en.json b/src/translations/en.json index 892d649bf989..41ed918e2319 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -604,15 +604,6 @@ "end_date": "End date", "select": "Select", "select_date_range": "Select time period", - "weekdays_short": { - "su": "[%key:ui::components::calendar::event::repeat::weekly::weekday::su%]", - "mo": "[%key:ui::components::calendar::event::repeat::weekly::weekday::mo%]", - "tu": "[%key:ui::components::calendar::event::repeat::weekly::weekday::tu%]", - "we": "[%key:ui::components::calendar::event::repeat::weekly::weekday::we%]", - "th": "[%key:ui::components::calendar::event::repeat::weekly::weekday::th%]", - "fr": "[%key:ui::components::calendar::event::repeat::weekly::weekday::fr%]", - "sa": "[%key:ui::components::calendar::event::repeat::weekly::weekday::sa%]" - }, "ranges": { "today": "Today", "yesterday": "Yesterday", From 278713637e9cb92676f9bf6c9d2689cb67ad8768 Mon Sep 17 00:00:00 2001 From: karwosts Date: Mon, 18 Dec 2023 10:06:18 -0800 Subject: [PATCH 4/4] reuse dtformat --- src/common/datetime/localize_date.ts | 40 +++++++++------------------- 1 file changed, 12 insertions(+), 28 deletions(-) diff --git a/src/common/datetime/localize_date.ts b/src/common/datetime/localize_date.ts index e73cd5ab4711..428261801d58 100644 --- a/src/common/datetime/localize_date.ts +++ b/src/common/datetime/localize_date.ts @@ -1,46 +1,30 @@ import memoizeOne from "memoize-one"; -// Sunday = 0 -const localizeWeekday = ( - language: string, - day_of_week: number, - short: boolean -): string => { - const date = new Date(Date.UTC(1970, 0, 1 + 3 + day_of_week)); - return new Intl.DateTimeFormat(language, { - weekday: short ? "short" : "long", - timeZone: "UTC", - }).format(date); -}; - 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++) { - days.push(localizeWeekday(language, i, short)); + const date = new Date(Date.UTC(1970, 0, 1 + 3 + i)); + days.push(format.format(date)); } return days; } ); -// January = 0 -const localizeMonth = ( - language: string, - month: number, - short: boolean -): string => { - const date = new Date(Date.UTC(1970, 0 + month, 1)); - return new Intl.DateTimeFormat(language, { - month: short ? "short" : "long", - timeZone: "UTC", - }).format(date); -}; - 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++) { - months.push(localizeMonth(language, i, short)); + const date = new Date(Date.UTC(1970, 0 + i, 1)); + months.push(format.format(date)); } return months; }