Components: Add docs example of custom timezone with MomentDateAdapter

Created on 16 Nov 2017 · 7Comments · Source: angular/components

Bug, feature request, or proposal:

[X] Feature Request

What is the expected behavior?

MomentDateAdapter should have timezone support.
Moment has a timezone lib (http://momentjs.com/timezone/) which you can set the timezone
manually. This is needed when you want to create a common date/datetime based in a specific timezone.

What is the current behavior?

MomentDateAdapter supports browser's timezone only when creating a new date moment object.

What are the steps to reproduce?

Include MatMomentDateModule to use MomentDateAdapter
Create a mat-datepicker
Console the output (date generated)

What is the use-case or motivation for changing an existing behavior?

I do want to create a common date/datetime based in a specific timezone.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 1.5.0
Node: 8.8.1
OS: darwin x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material-moment-adapter: 5.0.0-rc0
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.34
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack-sources: 1.0.1
webpack: 3.8.1

P5 materiadatepicker docs help wanted

Source

IagoBarboza

👍4

Most helpful comment

I solved my problem extending the MomentDateAdapter, using moment-timezone.js and changing the defaultTimeZone.

With few lines you have the problem solved.
I'll create a PR for this one with something like the code bellow:

import * as moment from 'moment-timezone';
import { Moment } from 'moment-timezone';

@Injectable()
export class EbDateAdapterService extends MomentDateAdapter{

private timeZone = 'America/Sao_Paulo';

constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale:string) {
super(dateLocale);
}

setTimezone(timezone: string) { moment.tz.default(timezone); }

setLocale(locale: string) { super.setLocale(locale); }

IagoBarboza on 16 Nov 2017

👍2

All 7 comments

I solved my problem extending the MomentDateAdapter, using moment-timezone.js and changing the defaultTimeZone.

With few lines you have the problem solved.
I'll create a PR for this one with something like the code bellow:

import * as moment from 'moment-timezone';
import { Moment } from 'moment-timezone';

@Injectable()
export class EbDateAdapterService extends MomentDateAdapter{

private timeZone = 'America/Sao_Paulo';

constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale:string) {
super(dateLocale);
}

setTimezone(timezone: string) { moment.tz.default(timezone); }

setLocale(locale: string) { super.setLocale(locale); }

IagoBarboza on 16 Nov 2017

👍2

@IagoBarboza This is a good example of how users can add this feature to their app, but I'm not sure we want to incorporate it into the official MomentDateAdapter. We intentionally avoid doing anything that messes with the state of the global moment configuration inside of the adapter, as it may cause unexpected side-effects in the users app. I also wouldn't want to introduce a dependency on the timezone plugin for users that don't actually need it. Would you mind instead creating an example for the docs site for users who might be interested in doing this?

mmalerba on 16 Nov 2017

@mmalerba, i Understand. Would be a pleasure create an example!
If i'm not wrong, the MomentDateAdapter was not officially released.
There is any DateAdapter session being created for the site? I suppose there is where this MomentTimezoneDateAdapter example belongs.

IagoBarboza on 17 Nov 2017

We have officially released it now: https://www.npmjs.com/package/@angular/material-moment-adapter

The docs have been updated to include a moment example, but not pushed to the docs site yet: https://github.com/angular/material2/blob/master/src/lib/datepicker/datepicker.md#choosing-a-date-implementation-and-date-format-settings. I think you could add it right next to the existing moment example

mmalerba on 17 Nov 2017

What do you think about line 227?
It's right next to You can create your own DateAdapter
Sounds good?

IagoBarboza on 17 Nov 2017

👍1

@IagoBarboza
Can you show me example how to use timezone in MomentDateAdapter..