Получить предпочитаемый hourCycle пользователя в его локале

Получить предпочитаемый hourCycle пользователя в его локале

На чтение 3 мин Опубликовано 08.10.2024

Вопрос или проблема

Как мне получить предпочитаемый hourCycle текущей локали пользователя? Я попробовал несколько локалей ((new Intl.Locale('en-US')).hourCycle) как в Firefox 131, так и в Chrome 129, но в обоих случаях возвращается undefined.

console.log(new Intl.Locale('en-US').hourCycle);

Intl.Locale() возвращает эту информацию только в том случае, если она передана через тег локали или опцию hourCycle. Чтобы получить hourCycle, даже если ни одна из этих опций не применима, вам нужно использовать Intl.DateTimeFormat().resolvedOptions() вместо этого (обратите внимание, что необходимо указать опцию timeStyle):

const dateTimeFormat = new Intl.DateTimeFormat('en-US', { timeStyle: 'long' });
const { hourCycle } = dateTimeFormat.resolvedOptions();
console.log(hourCycle);

вы можете вручную определить hourCycle, отформатировав дату и проверив вывод:

function getHourCycle() {
    const date = new Date(2023, 0, 1, 15); // 15:00
    const formatter12 = new Intl.DateTimeFormat(navigator.language, { hour: 'numeric', hour12: true });
    //const formatter24 = new Intl.DateTimeFormat(navigator.language, { hour: 'numeric', hour12: false });

    const formatted12 = formatter12.format(date);
    //const formatted24 = formatter24.format(date);

    // Проверьте, указывает ли вывод на 12-часовой формат
    if (formatted12.includes('PM') || formatted12.includes('AM')) {
        return 'h12';
    } else {
        return 'h24';
    }
}

const hourCycle = getHourCycle();
console.log(hourCycle);

Вывод от форматировщика 12-часового формата содержит “AM” или “PM”, в противном случае он по умолчанию использует 24-часовой формат.

Ответ или решение

Для получения предпочитаемого hourCycle (часового цикла) текущей локали пользователя в JavaScript следует учесть, что метод Intl.Locale не всегда возвращает это значение, если оно не было явно указано в строке локали или в опциях. Тем не менее, вы можете использовать метод Intl.DateTimeFormat().resolvedOptions(), чтобы получить эту информацию.

Вот как можно осуществить данный процесс:

Создайте объект Intl.DateTimeFormat, указав желаемую локаль и опцию timeStyle.
Используйте метод resolvedOptions(), чтобы получить hourCycle.

Пример кода:

const dateTimeFormat = new Intl.DateTimeFormat(navigator.language, { timeStyle: 'long' });
const { hourCycle } = dateTimeFormat.resolvedOptions();
console.log(hourCycle);

Этот способ вернет hourCycle, соответствующий текущей локали пользователя. Обратите внимание, что hourCycle может иметь значения: h11, h12, или h23, h24, в зависимости от используемой локали.

Кроме того, можно определить hourCycle вручную, форматируя дату и проверяя вывод. Вот пример функции для этого:

function getHourCycle() {
    const date = new Date(2023, 0, 1, 15); // 15:00 (3 PM)
    const formatter12 = new Intl.DateTimeFormat(navigator.language, { hour: 'numeric', hour12: true });
    const formatted12 = formatter12.format(date);

    // Проверяем, содержит ли вывод "AM" или "PM"
    if (formatted12.includes('PM') || formatted12.includes('AM')) {
        return 'h12';
    } else {
        return 'h24';
    }
}

const hourCycle = getHourCycle();
console.log(hourCycle);

Этот метод создает новый объект Date и использует форматирование времени с 12-часовым циклом. Если результат форматирования содержит "AM" или "PM", это указывает на 12-часовой формат (h12); в противном случае используется 24-часовой формат (h24).

Таким образом, вы можете получить предпочтительный hourCycle в зависимости от настроек локали пользователя в JavaScript.