Как преобразовать строку даты и времени UTC в текущий часовой пояс пользователя?

Question

Я использую Laravel 5.7 для API и Vue для внешнего интерфейса.В ответ на API я получаю метку времени последнего просмотра пользователя как last_seen: "2019-04-17 05:20:37", которая по умолчанию в формате UTC.

Код API Laravel:

$user_details = array(
            'user_id' => $userId,
            'name' => $userDetails->name,
            'email' => $userDetails->email,
            'phone' => $userDetails->contact,
            'account_creation_date' => $userDetails->created_at->toDateTimeString(),
            'last_seen' => $lastSeen != null ? $lastSeen->toDateTimeString() : $userDetails->last_login->toDateTimeString(),
            'language' => 'English',
            'country' => $country->name
        );

$user_profile['user_details'] = $user_details;
return response()->api(true, 'Success', $user_profile);

Это ответ API, который я получаю:

На внешнем интерфейсе, т. Е. В vue, я использую Dayjs Package , чтобы показать последнего пользователя, которого виделикак [Day|Hours|Minutes] ago, но проблема в . Предполагаемый пользователь только что вошел в систему , но я вижу, что он показывает 6 Hours ago

Поскольку я нахожусь в Азия / Калькутта часовой пояс код принимает также 5,5 / 6 часов.

Также я пытался с moment.js, но я получаю undefined function moment.tz.guess() ошибка

Это то, что я пытался до сих пор:

Я передаю строку даты и времени в мою функцию vuejs:

import dayjs from "dayjs";

convertFromNow(date) {
 return dayjs(date).fromNow();
},

и затем вызываю этот метод для печати как 1 minute ago.

<div class="side-box mt-4">
                  <h2 class="side-head">
                    <i class="fa fa-clock-o" />
                    {{ convertFromNow(userInfo.user_details.last_seen) }}
                    <h6 class="text-gray">
                      Last seen
                    </h6>
                  </h2>
                </div>

Ожидаемые результаты, которые мне нужны, это то, что я должен в последний раз видеть пользователя в соответствии с моим часовым поясом независимо от времени UTC.

Answer 1

Вы также пытаетесь использовать moment.js, вам нужно указать moment время в UTC

console.log(moment.utc("2019-04-17 05:20:37").fromNow())

<script src="https://momentjs.com/downloads/moment.js"></script>

Answer 2

Ваша строка даты / времени "2019-04-17 05:20:37" может представлять время в формате UTC, но JavaScript будет анализировать его как местное время, то есть время будет всегда не так.

Очень простой ответ заключается в использовании однозначного формата, такого как ISO 8601 / Atom, например,

"2019-04-17T05:20:37+00:00"

Carbon обеспечивает простой метод, который вы можете вставить какзамена для toDateTimeString()

$user_details = [
    // snip
    'account_creation_date' => $userDetails->created_at->toAtomString(),
    'last_seen' => $lastSeen != null ? $lastSeen->toAtomString() : $userDetails->last_login->toAtomString(),
    // snip
];

См. https://carbon.nesbot.com/docs/#api-commonformats

Answer 3

Насколько я понимаю ваш вопрос, вам нужно получить часовой пояс пользователя (через его браузер).Я продемонстрирую это, используя cdn момента.

Вам нужно иметь и moment.js, и moment-timezone-with-data.js:

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.js"></script>

Затем, используя эту функцию: moment.tz.guess(); в вашем коде должно дать вамчасовой пояс пользователя.

После этого вы можете передать полученный часовой пояс вашему API , чтобы получить правильное время для этого часового пояса.

Как плюс, если выВы используете Carbon, вам (возможно) нужно использовать setTimezone():

Carbon::parse($time)->setTimezone($tz);

Другие см .: https://momentjs.com/timezone/docs/#/using-timezones/guessing-user-timezone/

Answer 4

Вот мое решение в Vanilla JavaScript (не зависящее от внешних библиотек, таких как moment.js или days.js).

Хитрость заключается в том, чтобы добавить 'UTC' к вашей строке даты, прежде чем преобразовать ее в объект JavaScript Date .

const dateString = '2019-04-17 05:20:37';
const localDate = new Date(`${dateString} UTC`);
console.log(localDate)

Если вы запустите приведенный выше код на консоли локального браузера (Chrome), он должен напечатать время в зависимости от вашего (или вашего пользователя) местного часового пояса.