Question

我发现很难用时区显示一组日期（字符串数据类型）。

这是我的日期JSON：

    (panel, wxID_EXIT, wxT("Quit")

我无法以{ "startDate": "2016-09-04T21:00:00Z", "endDate": "2016-09-05T05:00:00Z" }的方式显示，即根据用户的位置显示时区。我尝试使用内置'Mon, Sep 05 2:30AM IST'，如下所示：

DatePipe

但是这给了：

<div class="col-xs-12"> {{ startDate | date:'EEE, MMM dd h:mma Z' }}</div>

Answer 1

根据the docs，内置的DatePipe时区选项'Z'代表格林威治标准时间偏移（GMT+1，在我的情况下）或'z'为完整名称（British Summer Time）。如果您想要一个不同的表示，可以使用自定义管道来完成，例如：

import { LOCALE_ID, Pipe, PipeTransform, Inject } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'customDate'
})
export class CustomDatePipe implements PipeTransform {
  datePipe: DatePipe;

  constructor(@Inject(LOCALE_ID) private locale: string) {
    this.datePipe = new DatePipe(locale);
  }

  transform(value: any, args?: any): any {
    let fullTimezone = this.datePipe.transform(value, 'z');
    let rest = this.datePipe.transform(value, 'EEE, MMM dd h:mma');
    let timezone = fullTimezone.match(/[A-Z]/g).join('');
    return `${rest} ${timezone}`;
  }

}

在这里，我假设你想要的时区表示是首字母，即完整时区名称中的大写字母（ B ritish S ummer T ime - ＆gt; BST）。然后，您可以在HTML中使用该管道：{{ startDate | customDate }}。这也可以防止您需要在整个代码库中重复格式，可能在任何地方都需要一致的日期格式。

要测试管道，请在TestBed：

中进行设置

import { LOCALE_ID } from '@angular/core';
import { ComponentFixture } from '@angular/core/testing';

import { CustomDatePipe } from './custom-date.pipe';    

describe('CustomDatePipe', () => {
  let pipe: CustomDatePipe;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ 
        { provide: LOCALE_ID, useValue: 'en-GB' },
        CustomDatePipe
      ]
    });

    pipe = TestBed.get(CustomDatePipe);
  });

  it('should do whatever you want it to do', () => {
    expect(pipe.transform('...').toBe('...');
  });
});

或者，您可以查看moment-timezone，它提供了许多处理日期和时间的功能。

如何以“Mon，Sep 12 2:30 AM AEDT”或当地时区的格式显示日期（字符串类型）？

1 个答案: