Skip to content

feat: add date adapter for luxon #14681

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

Closed
wants to merge 1 commit into from
Closed
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
3 changes: 3 additions & 0 deletions .github/CODEOWNERS
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@
# Moment adapter package
/src/material-moment-adapter/** @mmalerba

# Luxon adapter package
/src/material-luxon-adapter/** @mmalerba @crisbeto

# Material experimental package
/src/material-experimental/** @jelbourn

Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
"@types/hammerjs": "^2.0.35",
"@types/inquirer": "^0.0.43",
"@types/jasmine": "^3.0.0",
"@types/luxon": "^1.4.1",
"@types/marked": "^0.4.2",
"@types/merge2": "^0.3.30",
"@types/minimist": "^1.2.0",
Expand Down Expand Up @@ -114,6 +115,7 @@
"karma-parallel": "^0.3.0",
"karma-sauce-launcher": "^2.0.2",
"karma-sourcemap-loader": "^0.3.7",
"luxon": "^1.8.3",
"magic-string": "^0.22.4",
"marked": "^0.5.1",
"merge2": "^1.2.3",
Expand Down
1 change: 1 addition & 0 deletions packages.bzl
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ VERSION_PLACEHOLDER_REPLACEMENTS = {
ROLLUP_GLOBALS = {
'tslib': 'tslib',
'moment': 'moment',
'luxon': 'luxon',
'@angular/cdk': 'ng.cdk',
'@angular/cdk-experimental': 'ng.cdkExperimental',
'@angular/material': 'ng.material',
Expand Down
4 changes: 3 additions & 1 deletion scripts/deploy/publish-build-artifacts.sh
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ if [ -z ${MATERIAL2_BUILDS_TOKEN} ]; then
fi

# Material packages that need to published.
PACKAGES=(cdk material material-moment-adapter)
PACKAGES=(cdk material material-moment-adapter material-luxon-adapter)

## TODO(crisbeto): add luxon to this once we have a repo for `material-luxon-adapter` builds.
REPOSITORIES=(cdk-builds material2-builds material2-moment-adapter-builds)

# Command line arguments.
Expand Down
2 changes: 2 additions & 0 deletions src/dev-app/system-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ System.config({
'main': 'main.js',
'tslib': 'node:tslib/tslib.js',
'moment': 'node:moment/min/moment-with-locales.min.js',
'luxon': 'node:luxon/build/amd/luxon.js',

'rxjs': 'node_modules/rxjs/bundles/rxjs.umd.min.js',
'rxjs/operators': 'system-rxjs-operators.js',
Expand All @@ -43,6 +44,7 @@ System.config({
'@angular/material-experimental': 'dist/packages/material-experimental/index.js',
'@angular/material-examples': 'dist/packages/material-examples/index.js',
'@angular/material-moment-adapter': 'dist/packages/material-moment-adapter/index.js',
'@angular/material-luxon-adapter': 'dist/packages/material-luxon-adapter/index.js',
'@angular/cdk': 'dist/packages/cdk/index.js',
'@angular/cdk-experimental': 'dist/packages/cdk-experimental/index.js',

Expand Down
1 change: 1 addition & 0 deletions src/dev-app/tsconfig-aot.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"@angular/cdk-experimental/*": ["../../dist/releases/cdk-experimental/*"],
"@angular/cdk-experimental": ["../../dist/releases/cdk-experimental"],
"@angular/material-moment-adapter": ["../../dist/releases/material-moment-adapter"],
"@angular/material-luxon-adapter": ["../../dist/releases/material-luxon-adapter"],
"@angular/material-examples": ["../../dist/releases/material-examples"]
}
},
Expand Down
1 change: 1 addition & 0 deletions src/dev-app/tsconfig-build.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@angular/cdk-experimental/*": ["../../dist/packages/cdk-experimental/*"],
"@angular/cdk-experimental": ["../../dist/packages/cdk-experimental"],
"@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"],
"@angular/material-luxon-adapter": ["../../dist/packages/material-luxon-adapter"],
"@angular/material-examples": ["../../dist/packages/material-examples"]
}
},
Expand Down
1 change: 1 addition & 0 deletions src/dev-app/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@angular/cdk-experimental/*": ["../cdk-experimental/*"],
"@angular/cdk-experimental": ["../cdk-experimental"],
"@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
"@angular/material-luxon-adapter": ["../material-luxon-adapter/public-api.ts"],
"@angular/material-examples": ["../../dist/packages/material-examples"]
}
},
Expand Down
1 change: 1 addition & 0 deletions src/e2e-app/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"@angular/cdk-experimental/*": ["../cdk-experimental/*"],
"@angular/cdk-experimental": ["../cdk-experimental/"],
"@angular/material-moment-adapter": ["../material-moment-adapter/"],
"@angular/material-luxon-adapter": ["../material-luxon-adapter/"],
"@angular/material-examples": ["../material-examples/"]
}
},
Expand Down
15 changes: 7 additions & 8 deletions src/lib/datepicker/datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -212,16 +212,15 @@ with a variety of different date implementations. However it also means that dev
sure to provide the appropriate pieces for the datepicker to work with their chosen implementation.
The easiest way to ensure this is just to import one of the pre-made modules:

|Module |Date type|Supported locales |Dependencies |Import from |
|---------------------|---------|-----------------------------------------------------------------------|----------------------------------|----------------------------------|
|`MatNativeDateModule`|`Date` |en-US |None |`@angular/material` |
|`MatMomentDateModule`|`Moment` |[See project](https://github.com/moment/moment/tree/develop/src/locale)|[Moment.js](https://momentjs.com/)|`@angular/material-moment-adapter`|
|Module |Date type |Supported locales |Dependencies |Import from |
|---------------------|-----------|-----------------------------------------------------------------------|----------------------------------------|----------------------------------|
|`MatNativeDateModule`|`Date` |en-US |None |`@angular/material` |
|`MatMomentDateModule`|`Moment` |[See project](https://github.com/moment/moment/tree/develop/src/locale)|[Moment.js](https://momentjs.com/) |`@angular/material-moment-adapter`|
|`MatLuxonDateModule` |`DateTime` |[See project](https://moment.github.io/luxon/docs/manual/intl.html) |[Luxon](https://moment.github.io/luxon/)|`@angular/material-luxon-adapter`|

*Please note: `MatNativeDateModule` is based off of the functionality available in JavaScript's
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should update this note to just say "...highly recommend using one of the alternative adapters or creating your own custom adapter"

native `Date` object, and is thus not suitable for many locales. One of the biggest shortcomings of
the native `Date` object is the inability to set the parse format. We highly recommend using the
`MomentDateAdapter` or a custom `DateAdapter` that works with the formatting/parsing library of your
choice.*
native `Date` object, and is thus not suitable for many locales. It is highly recommended to use
one of the alternative adapters or to create your own custom adapter*

These modules include providers for `DateAdapter` and `MAT_DATE_FORMATS`

Expand Down
3 changes: 2 additions & 1 deletion src/lib/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
"packageGroup": [
"@angular/material",
"@angular/cdk",
"@angular/material-moment-adapter"
"@angular/material-moment-adapter",
"@angular/material-luxon-adapter"
]
},
"sideEffects": false
Expand Down
3 changes: 2 additions & 1 deletion src/material-examples/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@
"@angular/core": "0.0.0-NG",
"@angular/common": "0.0.0-NG",
"@angular/material": "0.0.0-PLACEHOLDER",
"@angular/material-moment-adapter": "0.0.0-PLACEHOLDER"
"@angular/material-moment-adapter": "0.0.0-PLACEHOLDER",
"@angular/material-luxon-adapter": "0.0.0-PLACEHOLDER"
},
"dependencies": {
"tslib": "^1.7.1"
Expand Down
1 change: 1 addition & 0 deletions src/material-examples/tsconfig-build.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"],
"@angular/cdk/*": ["../../dist/packages/cdk/*"],
"@angular/cdk-experimental/*": ["../../dist/packages/cdk-experimental/*"],
"@angular/material-luxon-adapter": ["../../dist/packages/material-luxon-adapter"]
}
},
"files": [
Expand Down
3 changes: 2 additions & 1 deletion src/material-examples/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"@angular/cdk/*": ["../cdk/*"],
"@angular/material/*": ["../lib/*"],
"@angular/material": ["../lib/public-api.ts"],
"@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"]
"@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
"@angular/material-luxon-adapter": ["../material-luxon-adapter/public-api.ts"]
}
},
"include": ["./**/*.ts"]
Expand Down
50 changes: 50 additions & 0 deletions src/material-luxon-adapter/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
package(default_visibility=["//visibility:public"])

load("//tools:defaults.bzl", "ng_module", "ng_package", "ng_web_test_suite", "ng_test_library")
load("//:packages.bzl", "ROLLUP_GLOBALS")

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@devversion this file is based on the one from the Moment adapter, but I'm not sure whether it's entirely correct. AFAIK this won't run the unit tests.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can probably update this now, based on #14687

ng_module(
name = "material-luxon-adapter",
srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
module_name = "@angular/material-luxon-adapter",
deps = [
"@angular//packages/core",
"@matdeps//@types/luxon",
"//src/lib/core",
],
)

ng_test_library(
name = "luxon_adapter_test_sources",
srcs = glob(["**/*.spec.ts"]),
deps = [
"//src/lib/core",
"//src/lib/testing",
"//src/cdk/platform",
"@matdeps//@types/luxon",
":material-luxon-adapter",
],
)

ng_web_test_suite(
name = "unit_tests",
deps = [
":require-config.js",
":luxon_adapter_test_sources"
],
# We need to load Luxon statically since it is not a named AMD module and needs to
# be manually configured through "require.js" which is used by "ts_web_test_suite".
static_files = [
"@matdeps//luxon",
],
)

ng_package(
name = "npm_package",
srcs = ["package.json"],
entry_point = "src/material-luxon-adapter/public_api.js",
globals = ROLLUP_GLOBALS,
deps = [":material-luxon-adapter"],
# TODO(devversion): re-enable once we have set up the proper compiler for the ng_package
tags = ["manual"],
)
33 changes: 33 additions & 0 deletions src/material-luxon-adapter/adapter/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/

import {NgModule} from '@angular/core';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MAT_LUXON_DATE_ADAPTER_OPTIONS, LuxonDateAdapter} from './luxon-date-adapter';
import {MAT_LUXON_DATE_FORMATS} from './luxon-date-formats';

export * from './luxon-date-adapter';
export * from './luxon-date-formats';

@NgModule({
providers: [
{
provide: DateAdapter,
useClass: LuxonDateAdapter,
deps: [MAT_DATE_LOCALE, MAT_LUXON_DATE_ADAPTER_OPTIONS]
}
],
})
export class LuxonDateModule {}


@NgModule({
imports: [LuxonDateModule],
providers: [{provide: MAT_DATE_FORMATS, useValue: MAT_LUXON_DATE_FORMATS}],
})
export class MatLuxonDateModule {}
Loading