[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

相关推荐
2501_9159184111 分钟前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 小时前
JavaScript二叉树相关概念
前端
attitude.x2 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java2 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)2 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术3 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫3 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css