Home > Software engineering >  Angular: format date and skip timezones
Angular: format date and skip timezones

Time:07-15

How can I format date-time in Angular with DatePipe.format() & skip all timezone conversion regardless where I am. For example for such examples all over the world (regardless time) I want to get 07/06/2022:

console.log('2022-07-06T00:00:00.000Z :', this.datePipe.transform('2022-07-06T00:00:00.000Z', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T06:00:00.000Z :', this.datePipe.transform('2022-07-06T06:00:00.000Z', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T13:00:00.000Z : ', this.datePipe.transform('2022-07-06T13:00:00.000Z', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T23:59:59.000Z :', this.datePipe.transform('2022-07-06T23:59:59.000Z', 'MM/dd/yyyy', ' 0000'), '\n\n');

console.log('2022-07-06T00:00:00-07:00 :', this.datePipe.transform('2022-07-06T00:00:00-07:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T06:00:00-07:00 :', this.datePipe.transform('2022-07-06T06:00:00-07:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T13:00:00-07:00 :', this.datePipe.transform('2022-07-06T13:00:00-07:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T23:59:59-07:00 :', this.datePipe.transform('2022-07-06T23:59:59-07:00', 'MM/dd/yyyy', ' 0000'), '\n\n');

console.log('2022-07-06T00:00:00-12:00 :', this.datePipe.transform('2022-07-06T00:00:00-12:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T06:00:00-12:00 :', this.datePipe.transform('2022-07-06T06:00:00-12:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T13:00:00-12:00 :', this.datePipe.transform('2022-07-06T13:00:00-12:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T23:59:59-12:00 :', this.datePipe.transform('2022-07-06T23:59:59-12:00', 'MM/dd/yyyy', ' 0000'), '\n\n');

console.log('2022-07-06T00:00:00 12:00 :', this.datePipe.transform('2022-07-06T00:00:00 12:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T06:00:00 12:00 :', this.datePipe.transform('2022-07-06T06:00:00 12:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T13:00:00 12:00 :', this.datePipe.transform('2022-07-06T13:00:00 12:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T23:59:59 12:00 :', this.datePipe.transform('2022-07-06T23:59:59 12:00', 'MM/dd/yyyy', ' 0000'), '\n\n');

console.log('2022-07-06T00:00:00 07:00 :', this.datePipe.transform('2022-07-06T00:00:00 07:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T06:00:00 07:00 :', this.datePipe.transform('2022-07-06T06:00:00 07:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T13:00:00 07:00 :', this.datePipe.transform('2022-07-06T13:00:00 07:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T23:59:59 07:00 :', this.datePipe.transform('2022-07-06T23:59:59 07:00', 'MM/dd/yyyy', ' 0000'), '\n\n');

console.log('2022-07-06T00:00:00 00:00 :', this.datePipe.transform('2022-07-06T00:00:00 00:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T06:00:00 00:00 :', this.datePipe.transform('2022-07-06T06:00:00 00:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T13:00:00 00:00 :', this.datePipe.transform('2022-07-06T13:00:00 00:00', 'MM/dd/yyyy', ' 0000'), '\n\n');
console.log('2022-07-06T23:59:59 00:00 :', this.datePipe.transform('2022-07-06T23:59:59 00:00', 'MM/dd/yyyy', ' 0000'), '\n\n');

all this examples should return 07/06/2022. I tried different approaches - but still can see issues.

The only way I found is a very dirty solution:

if (date?.match(/^\d{4}\-(0?[1-9]|1[012])\-(0?[1-9]|[12][0-9]|3[01])$/)) {
  return date.substring(5, 7)   '/'   value.substring(8, 10)   '/'   value.substring(0, 4);
}

Basically take string and parse values from it. I don't think it's a pretty way. Also I'm using dayjs and tried: dayjs(date).tz('Greenwich').format('MM/DD/YYYY');

How can I get the same date everywhere?

CodePudding user response:

If you need it in code you can create a new function, something like:

function convertDate(input:string|Date){
    const date = new Date(input);
    date.setMinutes(date .getMinutes()   date.getTimezoneOffset())
    const yyyy = date.getFullYear();
    const mm = String(date.getMonth()   1).padStart(2,'0');
    const dd = String(date.getDate()).padStart(2,'0');
    console.log(`${mm }/${dd }/${yyyy}`) };

If not just go with the suggested solution from @Moha.

CodePudding user response:

Here is what i think:

In the component ts : declare a variable call d='2022-07-06T00:00:00 00:00'(for example)

And in the HTML of the component :

<div>{{d| date:'dd/MM/YYYY'}}</div>

Now you should get 07/06/2022 no matter what timezone is.

  • Related