Skip to content

Commit fe7a4d2

Browse files
crisbetocrisbeto
committed
feat: add date adapter for luxon
Adds the `LuxonDateAdapter` that can be used to work with Luxon dates in the `MatDatepicker`.
1 parent c5a32c2 commit fe7a4d2

36 files changed

+1046
-16
lines changed

‎.github/CODEOWNERS

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,9 @@
8282
# Moment adapter package
8383
/src/material-moment-adapter/** @mmalerba
8484

85+
# Luxon adapter package
86+
/src/material-luxon-adapter/** @mmalerba @crisbeto
87+
8588
# Material experimental package
8689
/src/material-experimental/** @jelbourn
8790

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"@types/hammerjs": "^2.0.35",
7373
"@types/inquirer": "^0.0.43",
7474
"@types/jasmine": "^3.0.0",
75+
"@types/luxon": "^1.4.1",
7576
"@types/marked": "^0.4.2",
7677
"@types/merge2": "^0.3.30",
7778
"@types/minimist": "^1.2.0",
@@ -114,6 +115,7 @@
114115
"karma-parallel": "^0.3.0",
115116
"karma-sauce-launcher": "^2.0.2",
116117
"karma-sourcemap-loader": "^0.3.7",
118+
"luxon": "^1.8.3",
117119
"magic-string": "^0.22.4",
118120
"marked": "^0.5.1",
119121
"merge2": "^1.2.3",

‎packages.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ VERSION_PLACEHOLDER_REPLACEMENTS = {
8989
ROLLUP_GLOBALS = {
9090
'tslib': 'tslib',
9191
'moment': 'moment',
92+
'luxon': 'luxon',
9293
'@angular/cdk': 'ng.cdk',
9394
'@angular/cdk-experimental': 'ng.cdkExperimental',
9495
'@angular/material': 'ng.material',

‎scripts/deploy/publish-build-artifacts.sh

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ if [ -z ${MATERIAL2_BUILDS_TOKEN} ]; then
1616
fi
1717

1818
# Material packages that need to published.
19-
PACKAGES=(cdk material material-moment-adapter)
19+
PACKAGES=(cdk material material-moment-adapter material-luxon-adapter)
20+
21+
## TODO(crisbeto): add luxon to this once we have a repo for `material-luxon-adapter` builds.
2022
REPOSITORIES=(cdk-builds material2-builds material2-moment-adapter-builds)
2123

2224
# Command line arguments.

‎src/dev-app/system-config.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ System.config({
1818
'main': 'main.js',
1919
'tslib': 'node:tslib/tslib.js',
2020
'moment': 'node:moment/min/moment-with-locales.min.js',
21+
'luxon': 'node:luxon/build/amd/luxon.js',
2122

2223
'rxjs': 'node_modules/rxjs/bundles/rxjs.umd.min.js',
2324
'rxjs/operators': 'system-rxjs-operators.js',
@@ -43,6 +44,7 @@ System.config({
4344
'@angular/material-experimental': 'dist/packages/material-experimental/index.js',
4445
'@angular/material-examples': 'dist/packages/material-examples/index.js',
4546
'@angular/material-moment-adapter': 'dist/packages/material-moment-adapter/index.js',
47+
'@angular/material-luxon-adapter': 'dist/packages/material-luxon-adapter/index.js',
4648
'@angular/cdk': 'dist/packages/cdk/index.js',
4749
'@angular/cdk-experimental': 'dist/packages/cdk-experimental/index.js',
4850

‎src/dev-app/tsconfig-aot.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@angular/cdk-experimental/*": ["../../dist/releases/cdk-experimental/*"],
3030
"@angular/cdk-experimental": ["../../dist/releases/cdk-experimental"],
3131
"@angular/material-moment-adapter": ["../../dist/releases/material-moment-adapter"],
32+
"@angular/material-luxon-adapter": ["../../dist/releases/material-luxon-adapter"],
3233
"@angular/material-examples": ["../../dist/releases/material-examples"]
3334
}
3435
},

‎src/dev-app/tsconfig-build.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@angular/cdk-experimental/*": ["../../dist/packages/cdk-experimental/*"],
3737
"@angular/cdk-experimental": ["../../dist/packages/cdk-experimental"],
3838
"@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"],
39+
"@angular/material-luxon-adapter": ["../../dist/packages/material-luxon-adapter"],
3940
"@angular/material-examples": ["../../dist/packages/material-examples"]
4041
}
4142
},

‎src/dev-app/tsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@angular/cdk-experimental/*": ["../cdk-experimental/*"],
1616
"@angular/cdk-experimental": ["../cdk-experimental"],
1717
"@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
18+
"@angular/material-luxon-adapter": ["../material-luxon-adapter/public-api.ts"],
1819
"@angular/material-examples": ["../../dist/packages/material-examples"]
1920
}
2021
},

‎src/e2e-app/tsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@angular/cdk-experimental/*": ["../cdk-experimental/*"],
1414
"@angular/cdk-experimental": ["../cdk-experimental/"],
1515
"@angular/material-moment-adapter": ["../material-moment-adapter/"],
16+
"@angular/material-luxon-adapter": ["../material-luxon-adapter/"],
1617
"@angular/material-examples": ["../material-examples/"]
1718
}
1819
},

‎src/lib/datepicker/datepicker.md

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -212,16 +212,15 @@ with a variety of different date implementations. However it also means that dev
212212
sure to provide the appropriate pieces for the datepicker to work with their chosen implementation.
213213
The easiest way to ensure this is just to import one of the pre-made modules:
214214

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

220221
*Please note: `MatNativeDateModule` is based off of the functionality available in JavaScript's
221-
native `Date` object, and is thus not suitable for many locales. One of the biggest shortcomings of
222-
the native `Date` object is the inability to set the parse format. We highly recommend using the
223-
`MomentDateAdapter` or a custom `DateAdapter` that works with the formatting/parsing library of your
224-
choice.*
222+
native `Date` object, and is thus not suitable for many locales. It is highly recommended to use
223+
one of the alternative adapters or to create your own custom adapter*
225224

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

‎src/lib/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@
3737
"packageGroup": [
3838
"@angular/material",
3939
"@angular/cdk",
40-
"@angular/material-moment-adapter"
40+
"@angular/material-moment-adapter",
41+
"@angular/material-luxon-adapter"
4142
]
4243
},
4344
"sideEffects": false

‎src/material-examples/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"@angular/core": "0.0.0-NG",
2828
"@angular/common": "0.0.0-NG",
2929
"@angular/material": "0.0.0-PLACEHOLDER",
30-
"@angular/material-moment-adapter": "0.0.0-PLACEHOLDER"
30+
"@angular/material-moment-adapter": "0.0.0-PLACEHOLDER",
31+
"@angular/material-luxon-adapter": "0.0.0-PLACEHOLDER"
3132
},
3233
"dependencies": {
3334
"tslib": "^1.7.1"

‎src/material-examples/tsconfig-build.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@angular/material/*": ["../../dist/packages/material/*"],
3030
"@angular/material": ["../../dist/packages/material"],
3131
"@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"],
32+
"@angular/material-luxon-adapter": ["../../dist/packages/material-luxon-adapter"],
3233
"@angular/cdk/*": ["../../dist/packages/cdk/*"]
3334
}
3435
},

‎src/material-examples/tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"@angular/cdk/*": ["../cdk/*"],
1111
"@angular/material/*": ["../lib/*"],
1212
"@angular/material": ["../lib/public-api.ts"],
13-
"@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"]
13+
"@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
14+
"@angular/material-luxon-adapter": ["../material-luxon-adapter/public-api.ts"]
1415
}
1516
},
1617
"include": ["./**/*.ts"]

‎src/material-luxon-adapter/BUILD.bazel

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
package(default_visibility=["//visibility:public"])
2+
3+
load("//tools:defaults.bzl", "ng_module", "ng_package", "ng_web_test_suite", "ng_test_library")
4+
load("//:packages.bzl", "ROLLUP_GLOBALS")
5+
6+
ng_module(
7+
name = "material-luxon-adapter",
8+
srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
9+
module_name = "@angular/material-luxon-adapter",
10+
deps = [
11+
"@angular//packages/core",
12+
"@matdeps//@types/luxon",
13+
"//src/lib/core",
14+
],
15+
)
16+
17+
ng_test_library(
18+
name = "luxon_adapter_test_sources",
19+
srcs = glob(["**/*.spec.ts"]),
20+
deps = [
21+
"//src/lib/core",
22+
"//src/lib/testing",
23+
"//src/cdk/platform",
24+
"@matdeps//@types/luxon",
25+
":material-luxon-adapter",
26+
],
27+
)
28+
29+
ng_web_test_suite(
30+
name = "unit_tests",
31+
deps = [
32+
":require-config.js",
33+
":luxon_adapter_test_sources"
34+
],
35+
# We need to load Luxon statically since it is not a named AMD module and needs to
36+
# be manually configured through "require.js" which is used by "ts_web_test_suite".
37+
static_files = [
38+
"@matdeps//luxon",
39+
],
40+
)
41+
42+
ng_package(
43+
name = "npm_package",
44+
srcs = ["package.json"],
45+
entry_point = "src/material-luxon-adapter/public_api.js",
46+
globals = ROLLUP_GLOBALS,
47+
deps = [":material-luxon-adapter"],
48+
# TODO(devversion): re-enable once we have set up the proper compiler for the ng_package
49+
tags = ["manual"],
50+
)

‎src/material-luxon-adapter/adapter/index.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
11+
import {MAT_LUXON_DATE_ADAPTER_OPTIONS, LuxonDateAdapter} from './luxon-date-adapter';
12+
import {MAT_LUXON_DATE_FORMATS} from './luxon-date-formats';
13+
14+
export * from './luxon-date-adapter';
15+
export * from './luxon-date-formats';
16+
17+
@NgModule({
18+
providers: [
19+
{
20+
provide: DateAdapter,
21+
useClass: LuxonDateAdapter,
22+
deps: [MAT_DATE_LOCALE, MAT_LUXON_DATE_ADAPTER_OPTIONS]
23+
}
24+
],
25+
})
26+
export class LuxonDateModule {}
27+
28+
29+
@NgModule({
30+
imports: [LuxonDateModule],
31+
providers: [{provide: MAT_DATE_FORMATS, useValue: MAT_LUXON_DATE_FORMATS}],
32+
})
33+
export class MatLuxonDateModule {}

0 commit comments

Comments
 (0)