Dealing with dates can be a major headache. One of the main challenges when working with dates on the client side is having to depend on the client's device for accurate date, time, and timezone settings. It is often recommended to generate dates on the server side to have more control over the timing.

Implementing an API endpoint that provides you with a reliable date would be the most efficient solution. Despite the extra round trip to the server, it is definitely worth considering for better accuracy.

Here is the solution.

If you input null, you will receive the current pacific date now. Alternatively, you can input any date to have it converted to the pacific time zone:

pacificTimeOfDate(d:Date=null) {
  if (!d)
    d = new Date();
  var year = d.getUTCFullYear();
  var month = d.getUTCMonth();
  var day = d.getUTCDate();
  var hours = d.getUTCHours();
  var minutes = d.getUTCMinutes();
  var seconds = d.getUTCSeconds();
  var utcDate = new Date(year, month, day, hours, minutes, seconds);
  utcDate.setMinutes(utcDate.getMinutes() - 420);
  return utcDate
}

Utilizing the ISO 8601 format for date and time is highly recommended for its standardized presentation universally. To understand the benefits and reasons behind using the ISO-8601 date format, visit this link.

For a comprehensive guide on implementing the ISO 8601 date time format in Angular, check out the detailed post available at Implementing ISO 8601 date time format in Angular.

The ISO 8601 standard serves as a robust way to represent:

Date,
Time of day,
Coordinated Universal Time (UTC),
Date and time,
Time intervals,
Recurring time intervals

You have the flexibility to adapt the format according to your requirements using the provided code snippet. I hope this proves to be useful.

export interface HashTable<T> {
  [key: string]: T;
}

import { Injectable } from '@angular/core';
import { HashTable } from './hash-table';

type FormatFunc = (date: Date) => string;
@Injectable({
  providedIn: 'root'
})
export class DateFormat {
  formattingTokenFunc: HashTable<FormatFunc> = {};

  private formattingTokens = /(HH?|HH?|hh?|mm?|ss?|MM?|dd?|yy?y?y?|.)/g;

  constructor() {
    // add years function
    const getYearFunc = (date: Date) => date.getFullYear().toString();

    // Year, no leading zero (e.g. 2015 would be 15)
    this.addFormatToken('y', 0, (date: Date) =>
      (date.getFullYear() % 100).toString()
    );
    this.addFormatToken('yyy', 0, getYearFunc);
    this.addFormatToken('yyyy', 0, getYearFunc);
    // Year, leading zero (e.g. 2015 would be 015)
    this.addFormatToken('yy', 3, (date: Date) =>
      (date.getFullYear() % 100).toString()
    );

    // add months function
    const getMonthFunc = (date: Date) => (date.getMonth() + 1).toString();

    this.addFormatToken('M', 0, getMonthFunc);
    this.addFormatToken('MM', 2, getMonthFunc);

    // add day function
    const getDayFunc = (date: Date) => date.getDate().toString();

    this.addFormatToken('d', 0, getDayFunc);
    this.addFormatToken('dd', 2, getDayFunc);

    // add hours function
    const get12HrFunc = (date: Date) => (date.getHours() % 12).toString();

    // 12-hour clock, with a leading 0 eg (e.g. 06)
    this.addFormatToken('hh', 2, get12HrFunc);
    // 12-hour clock hour
    this.addFormatToken('h', 0, get12HrFunc);

    const get24HrFunc = (date: Date) => date.getHours().toString();

    this.addFormatToken('HH', 2, get24HrFunc);
    this.addFormatToken('H', 0, get24HrFunc);

    // add minute function
    const getMinFunc = (date: Date) => date.getMinutes().toString();
    this.addFormatToken('m', 0, getMinFunc);
    // Minutes with a leading zero
    this.addFormatToken('mm', 2, getMinFunc);

    // add seconds function
    const getSecFunc = (date: Date) => date.getSeconds().toString();
    this.addFormatToken('s', 0, getSecFunc);
    this.addFormatToken('ss', 2, getSecFunc);
  }

  formatToISO8601Date(date: Date | string): string {
    return this.format(date, 'yyyy-MM-dd');
  }

  format(date: Date | string, format: string): string {
    const finalDate = date instanceof Date ? date : new Date(date);

    const matches = format.match(this.formattingTokens);
    let result = '';

    matches.forEach(match => {
      const formatFunc = this.formattingTokenFunc[match];

      result += formatFunc ? formatFunc(finalDate) : match;
    });

    return result;
  }

  prefixZero(length: number, input: string): string {
    return `${Math.pow(10, length)}${input}`.slice(-1 * length);
  }

  prefixZeroFunc(length: number, formatFunc: FormatFunc): FormatFunc {
    return (c: Date) => this.prefixZero(length, formatFunc(c));
  }

  private addFormatToken(
    token: string,
    addZeroesLength: number,
    formatFunc: FormatFunc
  ): void {
    this.formattingTokenFunc[token] =
      addZeroesLength > 0
        ? this.prefixZeroFunc(addZeroesLength, formatFunc)
        : formatFunc;
  }
}

For me, I simply include the UTC in the following way:

this.updatedTime = new Date(this.updatedTime +'UTC')

If you need to convert a date to a different time zone, you can easily do so by adjusting the UTC time with a static value.

For example, I recently converted a date to the CST time zone using the MM-DD-YYYY HH:mm:ss format on an HTML page:

*<td mat-cell matCellDef="let element"> {{ element.CreateDtm | date: 'MM-dd-yyyy HH:mm:ss' : 'UTC+530' }}

In this case, 'UTC+530' was added to account for the time difference between my database storing values in CST timezone and the UI displaying them differently due to the DatePipe directive.

To ensure that the UI and DB dates align properly, adjusting the time difference in UTC proved to be effective.

Hopefully, this method will assist you in converting your dates to the desired time zone format through simple addition or subtraction of static values in UTC time.

HAPPY PROGRAMMING...