[Angular] Custom a DatePipe to support special time zone conversion from user

Background

It didn't use a time zone format of datetime in database, data has only one time zone.

a. Columns:

b. Data:

So I'll define a custom DatePipe to extend DatePipe in my source code of Angular.

How to implement?

1. Create a pipe class of Angular called MyDatePipe.

复制代码
Output format: { yyyy/MM/dd HH:mm:ss }
javascript 复制代码
import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'myDate',
  standalone: true
})
export class MyDatePipe extends DatePipe implements PipeTransform {
  override transform(value: any, args?: any): any {
    let myDate = new Date(value);
    myDate.setHours(myDate.getHours() + args);
    return super.transform(myDate, 'yyyy/MM/dd HH:mm:ss');
  }
}

2. Using it in your component

a. Component

providers: [MyDatePipe],

imports: [MyDatePipe]

javascript 复制代码
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { TokenKey, TokenPre } from '@app/config/constant';
import { WindowService } from '@app/core/services/common/window.service';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzInputModule } from 'ng-zorro-antd/input';

import { MyDatePipe } from '../../pipes/my-datepipe';

@Component({
  selector: 'app-pages-empty',
  templateUrl: './empty.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  providers: [MyDatePipe],
  imports: [NzButtonModule, NzInputModule, FormsModule, MyDatePipe]
})
export class EmptyComponent implements OnInit {
  token?: string;
  srvDate: Date = new Date();
  srvOffsetOfTimeZone: number = 8; // offset of server time zone
  userOffsetOfTimeZone: number = -5.5; // offset of user time zone

  constructor(private windowServe: WindowService, private myDatePipe: MyDatePipe) {}

  ngOnInit(): void {}

  setToken(): void {
    this.windowServe.setSessionStorage(TokenKey, TokenPre + this.token);
  }

  getDate(): void {
    this.srvDate = new Date();
    const userDate = this.myDatePipe.transform(this.srvDate, -this.srvOffsetOfTimeZone + this.userOffsetOfTimeZone);
    console.log(`User date: ${userDate}`);
  }
}

b. Html

javascript 复制代码
<button nz-button (click)="getDate()">Show user date</button>
Server time(UTC {{ srvOffsetOfTimeZone }}):{{ srvDate }}
<br />

UTC time(UTC): {{ srvDate | myDate : -srvOffsetOfTimeZone }}
<br />
User time(UTC {{ userOffsetOfTimeZone }}):{{ srvDate | myDate : -srvOffsetOfTimeZone + userOffsetOfTimeZone }}

3. Test result

相关推荐
namekong83 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天4 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄6 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1017 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19438 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧8 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台8 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1008 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc9 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅10 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学