Use firstday of the week for range shortcuts in date pickers (#14210)

This commit is contained in:
Paul Bottein 2022-10-27 14:24:24 +02:00 committed by GitHub
parent 16848d03ae
commit 4c8e863c0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 10 deletions

View File

@ -11,16 +11,20 @@ export const weekdays = [
"saturday",
] as const;
export const firstWeekdayIndex = (locale: FrontendLocaleData): number => {
type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
export const firstWeekdayIndex = (locale: FrontendLocaleData): WeekdayIndex => {
if (locale.first_weekday === FirstWeekday.language) {
// @ts-ignore
if ("weekInfo" in Intl.Locale.prototype) {
// @ts-ignore
return new Intl.Locale(locale.language).weekInfo.firstDay % 7;
}
return getWeekStartByLocale(locale.language) % 7;
return (getWeekStartByLocale(locale.language) % 7) as WeekdayIndex;
}
return weekdays.indexOf(locale.first_weekday);
return weekdays.includes(locale.first_weekday)
? (weekdays.indexOf(locale.first_weekday) as WeekdayIndex)
: 1;
};
export const firstWeekday = (locale: FrontendLocaleData) => {

View File

@ -16,6 +16,7 @@ import {
} from "home-assistant-js-websocket/dist/types";
import { css, html, LitElement, PropertyValues } from "lit";
import { property, state } from "lit/decorators";
import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
import { LocalStorage } from "../../common/decorators/local-storage";
import { ensureArray } from "../../common/ensure-array";
import { navigate } from "../../common/navigate";
@ -179,8 +180,9 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
}
const today = new Date();
const weekStart = startOfWeek(today);
const weekEnd = endOfWeek(today);
const weekStartsOn = firstWeekdayIndex(this.hass.locale);
const weekStart = startOfWeek(today, { weekStartsOn });
const weekEnd = endOfWeek(today, { weekStartsOn });
this._ranges = {
[this.hass.localize("ui.components.date-range-picker.ranges.today")]: [

View File

@ -12,6 +12,7 @@ import {
} from "date-fns/esm";
import { css, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
import { navigate } from "../../common/navigate";
import {
createSearchParam,
@ -108,8 +109,9 @@ export class HaPanelLogbook extends LitElement {
}
const today = new Date();
const weekStart = startOfWeek(today);
const weekEnd = endOfWeek(today);
const weekStartsOn = firstWeekdayIndex(this.hass.locale);
const weekStart = startOfWeek(today, { weekStartsOn });
const weekEnd = endOfWeek(today, { weekStartsOn });
this._ranges = {
[this.hass.localize("ui.components.date-range-picker.ranges.today")]: [

View File

@ -36,6 +36,7 @@ import { EnergyData, getEnergyDataCollection } from "../../../data/energy";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { HomeAssistant, ToggleButton } from "../../../types";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { firstWeekdayIndex } from "../../../common/datetime/first_weekday";
@customElement("hui-energy-period-selector")
export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
@ -179,11 +180,13 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
? today
: this._startDate;
const weekStartsOn = firstWeekdayIndex(this.hass.locale);
this._setDate(
this._period === "day"
? startOfDay(start)
: this._period === "week"
? startOfWeek(start, { weekStartsOn: 1 })
? startOfWeek(start, { weekStartsOn })
: this._period === "month"
? startOfMonth(start)
: startOfYear(start)
@ -191,11 +194,13 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
}
private _pickToday() {
const weekStartsOn = firstWeekdayIndex(this.hass.locale);
this._setDate(
this._period === "day"
? startOfToday()
: this._period === "week"
? startOfWeek(new Date(), { weekStartsOn: 1 })
? startOfWeek(new Date(), { weekStartsOn })
: this._period === "month"
? startOfMonth(new Date())
: startOfYear(new Date())
@ -227,11 +232,13 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
}
private _setDate(startDate: Date) {
const weekStartsOn = firstWeekdayIndex(this.hass.locale);
const endDate =
this._period === "day"
? endOfDay(startDate)
: this._period === "week"
? endOfWeek(startDate, { weekStartsOn: 1 })
? endOfWeek(startDate, { weekStartsOn })
: this._period === "month"
? endOfMonth(startDate)
: endOfYear(startDate);