Skip to content

feat(moment-date-adapter): implement strict mode #16462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 6, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions src/material-moment-adapter/adapter/moment-date-adapter.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -463,4 +463,39 @@ describe('MomentDateAdapter with MAT_MOMENT_DATE_ADAPTER_OPTIONS override', () =
});
});

describe('strict mode', () => {

beforeEach(async(() => {
TestBed.resetTestingModule();
TestBed.configureTestingModule({
imports: [MomentDateModule],
providers: [
{
provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
useValue: {
strict: true,
},
},
]
}).compileComponents();
}));

beforeEach(inject([DateAdapter], (d: MomentDateAdapter) => {
adapter = d;
}));

it('should detect valid strings according to given format', () => {
expect(adapter.parse('1/2/2017', 'D/M/YYYY')!.format('l'))
.toEqual(moment([2017, FEB, 1]).format('l'));
expect(adapter.parse('February 1, 2017', 'MMMM D, YYYY')!.format('l'))
.toEqual(moment([2017, FEB, 1]).format('l'));
});

it('should detect invalid strings according to given format', () => {
expect(adapter.parse('2017-01-01', 'MM/DD/YYYY')!.isValid()).toBe(false);
expect(adapter.parse('1/2/2017', 'MM/DD/YYYY')!.isValid()).toBe(false);
expect(adapter.parse('Jan 5, 2017', 'MMMM D, YYYY')!.isValid()).toBe(false);
});

});
});
23 changes: 19 additions & 4 deletions src/material-moment-adapter/adapter/moment-date-adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,25 @@ import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core';
// TODO(mmalerba): See if we can clean this up at some point.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment, Moment} from 'moment';
import {default as _rollupMoment, Moment, MomentFormatSpecification, MomentInput} from 'moment';

const moment = _rollupMoment || _moment;

/** Configurable options for {@see MomentDateAdapter}. */
export interface MatMomentDateAdapterOptions {

/**
* When enabled, the dates have to match the format exactly.
* See https://momentjs.com/guides/#/parsing/strict-mode/.
*/
strict?: boolean;

/**
* Turns the use of utc dates on or off.
* Changing this will change how Angular Material components like DatePicker output dates.
* {@default false}
*/
useUtc: boolean;
useUtc?: boolean;
}

/** InjectionToken for moment date adapter to configure options. */
Expand Down Expand Up @@ -241,7 +248,15 @@ export class MomentDateAdapter extends DateAdapter<Moment> {
}

/** Creates a Moment instance while respecting the current UTC settings. */
private _createMoment(...args: any[]): Moment {
return (this._options && this._options.useUtc) ? moment.utc(...args) : moment(...args);
private _createMoment(
date: MomentInput,
format?: MomentFormatSpecification,
locale?: string,
): Moment {
const {strict, useUtc}: MatMomentDateAdapterOptions = this._options || {};

return useUtc
? moment.utc(date, format, locale, strict)
: moment(date, format, locale, strict);
}
}
17 changes: 16 additions & 1 deletion src/material/datepicker/datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,22 @@ By default the `MomentDateAdapter` will creates dates in your time zone specific
@NgModule({
imports: [MatDatepickerModule, MatMomentDateModule],
providers: [
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
{provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}}
]
})
```

By default the `MomentDateAdapter` will parse dates in a
[forgiving way](https://momentjs.com/guides/#/parsing/forgiving-mode/). This may result in dates
being parsed incorrectly. You can change the default behaviour to
[parse dates strictly](https://momentjs.com/guides/#/parsing/strict-mode/) by providing
the `MAT_MOMENT_DATE_ADAPTER_OPTIONS` and setting it to `strict: true`.

```ts
@NgModule({
imports: [MatDatepickerModule, MatMomentDateModule],
providers: [
{provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {strict: true}}
]
})
```
Expand Down