"угловой": "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)
}
}





Я думаю, 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);
@StoykoTarkalanov во втором часовом поясе, в какой стране и городе вы хотите использовать формат, потому что он также принимает этот формат!
«Европа/София». Я тестировал «const timezone = moment.tz.guess();», а также «const timezone = moment.tz(»Europe/Sofia»);. И у меня не было проблем с получением часового пояса, у меня возникла проблема, когда я хочу использовать только один часовой пояс. Основная идея заключается в том, чтобы предотвратить это при изменении времени: когда 10 часов стандартного времени станут 11 часами летом.
@StoykoTarkalanov попробуй const utcMoment = moment.utc(date, true).tz("Europe/Sofia"); кажется, комментарии придают ценность!
Я попробовал этот подход, но все равно не получил желаемого результата. Когда я проверил консоль, я снова увидел летнее время в формате UTC+3, также в демо-версии Stackblitz.