Отображение даты / времени в формате локали пользователя и смещения времени


167

Я хочу, чтобы сервер всегда отображал даты в формате UTC в формате HTML, а JavaScript-код на клиентском сайте преобразовывал его в местный часовой пояс пользователя.

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

Ответы:


165

Кажется, самый надежный способ начать с даты UTC - это создать новый Dateобъект и использоватьsetUTC… методы, чтобы установить для него желаемую дату / время.

Тогда различные toLocale…Stringметоды обеспечат локализованный вывод.

Пример:

// This would come from the server.
// Also, this whole block could probably be made into an mktime function.
// All very bare here for quick grasping.
d = new Date();
d.setUTCFullYear(2004);
d.setUTCMonth(1);
d.setUTCDate(29);
d.setUTCHours(2);
d.setUTCMinutes(45);
d.setUTCSeconds(26);

console.log(d);                        // -> Sat Feb 28 2004 23:45:26 GMT-0300 (BRT)
console.log(d.toLocaleString());       // -> Sat Feb 28 23:45:26 2004
console.log(d.toLocaleDateString());   // -> 02/28/2004
console.log(d.toLocaleTimeString());   // -> 23:45:26

Некоторые ссылки:


1
В Firefox toLocateDateString()возвращает что-то похожее на «Воскресенье, 12 января 2014 года» ..
BlueRaja - Дэнни Пфлугхофт

1
Хм да, это довольно серьезная проблема. Использование этих методов не будет работать, если вы хотите, чтобы дата в разных браузерах выглядела одинаково. Известны ли альтернативы?
Джош Мак

6
Однострочная версия вышеуказанной инициализации:var d = new Date(Date.UTC(2004,1,29,2,45,26));
m1kael

4
Возможно, стоит учесть, что Chrome (начиная с версии 35) не учитывает локаль пользователя в toLocaleString()функциях.
Бенно

8
Извините, но этот метод не работает под (я в Австралии), когда я запускаю вышеуказанный код, дата отображается в американском формате. Более того, MDN говорит, что «используемая локаль и форма возвращаемой строки полностью зависят от реализации».
tgrrr

65

Для новых проектов просто используйте moment.js

Этот вопрос довольно старый, поэтому moment.js в то время не существовало, но для новых проектов он значительно упрощает подобные задачи.

Лучше всего проанализировать вашу строку даты из UTC следующим образом (создайте совместимую с ISO-8601 строку на сервере, чтобы получить согласованные результаты во всех браузерах):

var m = moment("2013-02-08T09:30:26Z");

Теперь просто используйте mв вашем приложении, moment.js по умолчанию использует местный часовой пояс для операций отображения. Есть много способов отформатировать значения даты и времени или извлечь их части.

Вы даже можете отформатировать моментальный объект в локали пользователя следующим образом:

m.format('LLL') // Returns "February 8 2013 8:30 AM" on en-us

Чтобы преобразовать объект moment.js в другой часовой пояс (т. Е. Ни в локальный, ни в UTC), вам потребуется расширение time.js для часового пояса . На этой странице также есть несколько примеров, она довольно проста в использовании.


Как вы все это сочетаете? m.utcOffset (offset) .format ('LLL'), похоже, не работает.
Барт

Должен ли Luxon или Day.js быть рекомендуемой библиотекой сейчас?
Гомер

1
Я предлагаю добавитьFor old projects, just use jQuery
Xenos

Не работает на Chrome - по-прежнему показывает am / pm, даже если в настройках компьютера установлено время 24 ч.
vir us

20

Вы можете использовать new Date().getTimezoneOffset()/60для часового пояса. Также естьtoLocaleString() способ отображения даты с использованием локали пользователя.

Вот весь список: Работа с датами


toLocaleString крайне ненадежен для представления дат в формате, который может ожидать пользователь. Даже там, где поддерживается ISO 402, он все еще очень ненадежен и основывает формат на языке, а не на локали.
RobG

@RobG какое решение вместо toLocaleString?
user924

@ user924 - вы можете использовать библиотеку, есть из чего выбирать. Проблема с toLocaleString состоит в том, что разные реализации дают разные результаты с разными уровнями поддержки для разных языков и регионов. Например, мой системный язык по умолчанию не en-US, но формат по умолчанию для toLocaleString для некоторых браузеров - это формат США, другие уважают мой системный язык. То же самое с именами часовых поясов, только хуже, поскольку они вообще не стандартизированы. :-(
RobG

7

После того, как вы создали свой объект даты, вот фрагмент для преобразования:

Функция принимает отформатированный в формате UTC объект Date и строку формата.
Вам понадобится Date.strftimeпрототип.

function UTCToLocalTimeString(d, format) {
    if (timeOffsetInHours == null) {
        timeOffsetInHours = (new Date().getTimezoneOffset()/60) * (-1);
    }
    d.setHours(d.getHours() + timeOffsetInHours);

    return d.strftime(format);
}

6
откуда вы?
Anuj Pandey

Влияет ли установка часов на части Day / Date / Year объекта Date? Не похоже на.
ChristoKiwi

1
@ ChristoKiwi - ожидается, что переданное в setHours значение будет целым числом, которое getTimezoneOffset()/60может вернуть дробь (например, смещение Индии +05: 30 вернет 5.5). Десятичные знаки усекаются. В противном случае установка часов обновляет другие значения (установите часы на 48 и посмотрите, что произойдет).
RobG

7

В JS нет простых и кроссплатформенных способов форматирования локального времени даты, кроме преобразования каждого свойства, как упомянуто выше.

Вот быстрый взлом, который я использую, чтобы получить локальный YYYY-MM-DD. Обратите внимание, что это взлом, так как конечная дата не будет иметь правильный часовой пояс (поэтому вы должны игнорировать часовой пояс). Если мне нужно что-то еще, я использую moment.js.

var d = new Date();    
d = new Date(d.getTime() - d.getTimezoneOffset() * 60000)
var yyyymmdd = t.toISOString().slice(0,0); 
// 2017-05-09T08:24:26.581Z (but this is not UTC)

D.getTimezoneOffset () возвращает смещение часового пояса в минутах, а d.getTime () - в мс, следовательно, x 60000.


1
@VG Я добавил еще немного информации о том, откуда взялись 60к. Надеюсь, это поможет.
Джереми Чон

5

Вот что я использовал в прошлых проектах:

var myDate = new Date();
var tzo = (myDate.getTimezoneOffset()/60)*(-1);
//get server date value here, the parseInvariant is from MS Ajax, you would need to do something similar on your own
myDate = new Date.parseInvariant('<%=DataCurrentDate%>', 'yyyyMMdd hh:mm:ss');
myDate.setHours(myDate.getHours() + tzo);
//here you would have to get a handle to your span / div to set.  again, I'm using MS Ajax's $get
var dateSpn = $get('dataDate');
dateSpn.innerHTML = myDate.localeFormat('F');

4
Это с ASP.NET-специфическими вещами.
ZiggyTheHamster

Смещения часового пояса не обязательно даже кратны часу, поэтому getTimezoneOffset()/60часто возвращают десятичное значение. Это особенно верно для дат до 1900 года, когда во многих местах были смещения в минутах и ​​секундах. Кроме того, даты Javascript теперь необходимы для поддержки исторических смещений. Например, в 1890 году смещение в Москве составило +2: 30: 17. См. Браузеры, часовые пояса, Ошибка Chrome 67 .
RobG

3

.getTimezoneOffset()Метод сообщает смещение часового пояса в минутах, подсчет «запад» из временной зоны GMT / UTC, в результате чего значения смещения , что отрицательно к тому , что один обычно привык. (Например, время в Нью-Йорке будет составлять +240 минут или +4 часа)

Чтобы получить нормальное смещение часового пояса в часах, вам нужно использовать:

var timeOffsetInHours = -(new Date()).getTimezoneOffset()/60

Важная деталь:
обратите внимание, что переход на летнее время учитывается в результате - так что этот метод дает вам действительно смещение времени, а не фактическое географическое смещение часового пояса .


3

С датой из кода PHP я использовал что-то вроде этого ..

function getLocalDate(php_date) {
  var dt = new Date(php_date);
  var minutes = dt.getTimezoneOffset();
  dt = new Date(dt.getTime() + minutes*60000);
  return dt;
}

Мы можем назвать это так

var localdateObj = getLocalDate('2015-09-25T02:57:46');

Вопрос был о JavaScript, а не о PHP.
pipedreambomb

5
Ответ только в javascript, упоминается в вопросе, что дата сервера в UTC. так что сервер может быть на любом языке. поэтому я отвечал только за PHP
хризия

3

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

Строка datetime взята из базы данных python / django в формате: 2016-12-05T15: 12: 24.215Z

Надежное определение языка браузера в JavaScript, похоже, не работает во всех браузерах (см. JavaScript для определения предпочтений языка браузера ), поэтому я получаю язык браузера с сервера.

Python / Django: отправить язык браузера запроса в качестве параметра контекста:

language = request.META.get('HTTP_ACCEPT_LANGUAGE')
return render(request, 'cssexy/index.html', { "language": language })

HTML: напишите это в скрытом вводе:

<input type="hidden" id="browserlanguage" value={{ language }}/>

JavaScript: получить значение скрытого ввода, например en-GB, en-US; q = 0,8, en; q = 0,6 /, а затем выбрать первый язык в списке только с помощью замены и регулярного выражения

const browserlanguage = document.getElementById("browserlanguage").value;
var defaultlang = browserlanguage.replace(/(\w{2}\-\w{2}),.*/, "$1");

JavaScript: преобразовать в datetime и отформатировать его:

var options = { hour: "2-digit", minute: "2-digit" };
var dt = (new Date(str)).toLocaleDateString(defaultlang, options);

Смотрите: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

Результат (язык браузера en-gb): 12.05.2016, 14:58


3

// new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]])
var serverDate = new Date(2018, 5, 30, 19, 13, 15); // just any date that comes from server
var serverDateStr = serverDate.toLocaleString("en-US", {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
})
var userDate = new Date(serverDateStr + " UTC");
var locale = window.navigator.userLanguage || window.navigator.language;

var clientDateStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
});

var clientDateTimeStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

console.log("Server UTC date: " + serverDateStr);
console.log("User's local date: " + clientDateStr);
console.log("User's local date&time: " + clientDateTimeStr);


Для справки: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… (мне нужна была optionsчасть для моего случая)
Xenos

2

Лучшее решение, с которым я столкнулся, - это создать теги [time display = "llll" datetime = "UTC TIME" /] и использовать javascript (jquery) для анализа и отображения его относительно времени пользователя.

http://momentjs.com/ Moment.js

будет отображать время красиво.


2

Вы можете использовать следующее, которое сообщает смещение часового пояса от GMT в минутах:

new Date().getTimezoneOffset();

Примечание: - эта функция возвращает отрицательное число.



1

Чтобы преобразовать дату в локальную дату, используйте метод toLocaleDateString ().

var date = (new Date(str)).toLocaleDateString(defaultlang, options);

Чтобы преобразовать время в местное время, используйте метод toLocaleTimeString ().

var time = (new Date(str)).toLocaleTimeString(defaultlang, options);

-12

Не знаю, как сделать локаль, но javascript - это технология на стороне клиента.

usersLocalTime = new Date();

будет иметь время и дату клиента (как сообщается их браузером и, соответственно, компьютером, на котором они сидят). Это должно быть тривиально, чтобы включить время сервера в ответ и сделать некоторую простую математику, чтобы угадать смещение.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.