Moment JS использует в клиенте только стандартное время независимо от часового пояса

"угловой": "12.2.0" "момент": "^2.30.1" "moment-timezone": "^0.5.44"

Проект представляет собой календарный планировщик.

Серверная часть: C# отправляет метку времени в формате UTC;

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

Пример: когда пользователь устанавливает начало рабочего дня и конец рабочего дня -> с 10 до 18 (зимнее время, UTC+2), а затем проходят месяцы и переходят на летние (DST, UTC+3) часы. стать -> с 11 до 19 часов. Я хочу предотвратить это изменение времени.

Как всегда использовать только поясное время или каков наилучший подход в этом случае?

import { Injectable } from '@angular/core';
import * as moment from 'moment-timezone';

@Injectable({
    providedIn: 'root'
})
export class TimezoneService {
    // Method to parse the date to UTC+2
    public parseToUtcPlusTwo(date: Date | moment.Moment): moment.Moment {
        const utcMoment = moment.utc(date);
        const utcPlusTwo = moment.parseZone(utcMoment.format('YYYY-MM-DDTHH:mm:ss') + '+0200');
        return utcPlusTwo;
    }
}
import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment-timezone'; // Import moment-timezone
import { TimezoneService } from '../services/timezone.service';

@Pipe({
  name: 'utcToLocal'
})
export class UtcToLocalPipe implements PipeTransform {
  constructor(private timezoneService: TimezoneService) { }

  transform(utcDate: Date | moment.Moment, format: string = 'HH:mm'): string {
    const localMoment = this.timezoneService.parseToUtcPlusTwo(utcDate);

    return localMoment.isValid() ? localMoment.format(format) : '';
  }
}
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const pipe = new UtcToLocalPipe(new TimezoneService());
    const format = 'YYYY-MM-DD HH:mm';

    // Winter Time (Standard Time) Test: January 15, 2023
    const winterTestDate = new Date('2023-01-15T10:00:00Z'); // 12:00 PM UTC
    console.info(pipe.transform(winterTestDate, format)); // Should output the date and time in UTC+2 (Standard Time)

    // Summer Time (Daylight Saving Time) Test: July 15, 2023
    const summerTestDate = new Date('2023-07-15T09:00:00Z'); // 12:00 PM UTC
    console.info(pipe.transform(summerTestDate, format)); // Should output the date and time in UTC+2 (Standard Time, despite being UTC+3 in reality)
}
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
89
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, utcOffset подойдет для этого сценария. Рабочий пример ниже!

@Injectable({
  providedIn: 'root',
})
export class TimezoneService {
  // Method to parse the date to UTC+2
  public parseToUtcPlusTwo(date: Date | moment.Moment): moment.Moment {
    const utcMoment = moment.utc(date, true).tz("Europe/Sofia");
    return utcMoment;
  }
}

ПОЛНЫЙ КОД:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

import { Injectable } from '@angular/core';
import * as moment from 'moment-timezone';
import { Pipe, PipeTransform } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class TimezoneService {
  // Method to parse the date to UTC+2
  public parseToUtcPlusTwo(date: Date | moment.Moment): moment.Moment {
    const utcMoment = moment.utc(date, true).utcOffset(2);
    return utcMoment;
  }
}

@Pipe({
  name: 'utcToLocal',
  standalone: true,
})
export class UtcToLocalPipe implements PipeTransform {
  constructor(private timezoneService: TimezoneService) {}

  transform(utcDate: Date | moment.Moment, format: string = 'HH:mm'): string {
    const localMoment = this.timezoneService.parseToUtcPlusTwo(utcDate);

    return localMoment.isValid() ? localMoment.format(format) : '';
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [UtcToLocalPipe],
  template: ``,
})
export class App {
  ngOnInit(): void {
    const pipe = new UtcToLocalPipe(new TimezoneService());
    const format = 'YYYY-MM-DD HH:mm';

    // Winter Time (Standard Time) Test: January 15, 2023
    const winterTestDate = new Date('2023-01-15T10:00:00Z'); // 12:00 PM UTC
    console.info(pipe.transform(winterTestDate, format)); // Should output the date and time in UTC+2 (Standard Time)
    // Summer Time (Daylight Saving Time) Test: July 15, 2023
    const summerTestDate = new Date('2023-07-15T09:00:00Z'); // 12:00 PM UTC
    console.info(pipe.transform(summerTestDate, format)); // Should output the date and time in UTC+2 (Standard Time, despite being UTC+3 in reality)
  }
}

bootstrapApplication(App);

Демо-версия Stackblitz

Я попробовал этот подход, но все равно не получил желаемого результата. Когда я проверил консоль, я снова увидел летнее время в формате UTC+3, также в демо-версии Stackblitz.

Stoyko Tarkalanov 18.05.2024 10:31

@StoykoTarkalanov во втором часовом поясе, в какой стране и городе вы хотите использовать формат, потому что он также принимает этот формат!

Naren Murali 18.05.2024 10:37

«Европа/София». Я тестировал «const timezone = moment.tz.guess();», а также «const timezone = moment.tz(»Europe/Sofia»);. И у меня не было проблем с получением часового пояса, у меня возникла проблема, когда я хочу использовать только один часовой пояс. Основная идея заключается в том, чтобы предотвратить это при изменении времени: когда 10 часов стандартного времени станут 11 часами летом.

Stoyko Tarkalanov 18.05.2024 10:46

@StoykoTarkalanov попробуй const utcMoment = moment.utc(date, true).tz("Europe/Sofia"); кажется, комментарии придают ценность!

Naren Murali 18.05.2024 11:49

Другие вопросы по теме