JavaScript, чтобы определить, отображает ли браузер ввод времени в 12-часовом или 24-часовом формате.

Question

Я хотел бы определить, как ввод времени отображается браузером:

<input type="time">

Отображается ли он в 24-часовом формате или в 12-часовом формате (с добавлением "AM / PM "вариант)?

Отображение влияет на дизайн, потому что две версии различаются по ширине. Я хотел бы сохранить ширину нескольких входов как можно более компактной.

Я внимательно просмотрел другие статьи, но многие из них довольно старые, а информация устарела, и когда я запускаю фрагменты кода, результаты не совпадают.

Этот JavaScript просто берет локаль (здесь для: en_GB) и применяет его следующим образом:

var hour_format = new Date().toLocaleTimeString();
console.log(hour_format); // Firefox: 18:12:34, Chrome: 6:12:34 PM, Edge: 18:12:34

Дополнительные примечания: Я нахожусь в Великобритании, и я использую 24-часовой формат для Windows 10. Браузеры отражают 24-часовой формат системы; строки времени JavaScript этого не делают. Когда я перехожу на 12-часовой формат (и перезапускаю), изменение применяется только к Chrome. Значения в примере JavaScript остаются прежними. Я прочитал эту статью о локали для ГБ , но она просто показывает несоответствия.

По сути, я просто хочу знать, какой браузер отображает . Вот и все.

Если это невозможно, альтернативой может быть принудительное отображение ввода в 24-часовом формате.

Answer 1

Вот решение, к которому я пришел, объединив первое решение от @mplungjan и предложение проверить ширину ввода с помощью @CBroe:

var local_time_string = (/chrom(e|ium)/i.test(navigator.userAgent) && !/msie|edge/i.test(navigator.userAgent)) ? false : (new Date(2020, 4, 8, 18, 0, 0, 0).toLocaleTimeString()),
  hour_format = (typeof local_time_string == 'string') ? ((parseInt(local_time_string) == 18) ? 24 : 12) : null;

if (hour_format == null) {
  $('#parent-element').append('<input type="time" id="time-test" name="time-test" style="width: auto; position: absolute; opacity: 0; visibility: hidden;">');
  hour_format = ($('#time-test').width() < 81) ? 24 : 12;
  $('#time-test').remove();
}

console.log(hour_format);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent-element"></div>

Answer 2

Я наконец понял ваш реальный вопрос

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Appearance

В Chrome / Opera управление временем простое, со слотами для ввода часов и минут в 12- или 24-часовом формате в зависимости от языкового стандарта операционной системы, а также стрелки вверх и вниз для увеличения и уменьшения текущего выбранного компонента. В некоторых версиях предусмотрена кнопка «X» для сброса значения элемента управления.

---

Firefox контроль времени очень похож на Chrome, за исключением что на нем нет стрелок вверх и вниз. Он также использует 12- или 24-часовой формат для ввода времени в зависимости от языкового стандарта системы. Кнопка «X» предназначена для очистки значения элемента управления.

---

[Предполагая Edge до Chromium]

Элемент управления Edge time несколько более сложен, открывает сборщик часов и минут с скользящими барабанами. Он, как и Chrome, использует 12- или 24-часовой формат для ввода времени в зависимости от языкового стандарта системы:

Так что, возможно, это ответит на ваш вопрос?

const t = document.createElement("input")
t.type = "time"
t.value = "15:00"
document.body.appendChild(t)
console.log(t.offsetWidth);

const width = getComputedStyle(t).getPropertyValue("width")
console.log(width)

/*
for (let i=0; i<style.length; i++) {        
    cssProperty = style[i];
    if (cssProperty.toUpperCase().indexOf("WIDTH") !=-1) {
      cssValue = style.(cssProperty);
      console.log(cssProperty,cssValue)
    }      
}*/

Старый ответ:

var hour_format = new Date().toLocaleTimeString();
console.log(hour_format.length); // Firefox: 18:12:34, Chrome: 6:12:34 PM, Edge: 18:12:34
if (hour_format.length > 8) hour_format = hour_format.split(" ")[0]; // drop the pm
console.log(hour_format)

// Force 24 hour:
console.log(new Date().toLocaleTimeString('en-GB')); // should be 24 hours, no PM

// Test 24 hours:
const test = new Date(2020,4,8,15,0,0,0).toLocaleTimeString();
if (parseInt(test) === 15) console.log("24 hour")