[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

相关推荐
慧一居士15 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead17 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app