docs: offer datetime picker (#10)

json-derulo · web-flow · commit f01adf07cee0 · 2023-02-24T16:48:04.000+01:00
diff --git a/angular.json b/angular.json
@@ -68,7 +68,6 @@
               "projects/angular-intl-demo/src/assets"
             ],
             "styles": [
-              "@angular/material/prebuilt-themes/deeppurple-amber.css",
               "node_modules/prismjs/themes/prism-okaidia.css",
               "projects/angular-intl-demo/src/styles.scss"
             ],
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-material-components/datetime-picker": "^9.0.0",
     "@angular/animations": "^15.1.0",
     "@angular/cdk": "^15.1.5",
     "@angular/common": "^15.1.0",
diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.html b/projects/angular-intl-demo/src/app/pipes/date/date.component.html
@@ -1,4 +1,11 @@
 <div class="fields-container">
+  <mat-form-field>
+    <mat-label>Date</mat-label>
+    <input [(ngModel)]="selectedDate" [ngxMatDatetimePicker]="picker" matInput placeholder="Choose a date">
+    <mat-datepicker-toggle [for]="$any(picker)" matSuffix></mat-datepicker-toggle>
+    <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
+  </mat-form-field>
+
   <mat-form-field>
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts
@@ -13,6 +13,8 @@ import {FormsModule} from "@angular/forms";
 import {MatInputModule} from "@angular/material/input";
 import {PipesRoutingModule} from "./pipes-routing.module";
 import {CountryComponent} from "./country/country.component";
+import {NgxMatDatetimePickerModule, NgxMatNativeDateModule} from "@angular-material-components/datetime-picker";
+import {MatDatepickerModule} from "@angular/material/datepicker";
 
 @NgModule({
   declarations: [
@@ -32,6 +34,9 @@ import {CountryComponent} from "./country/country.component";
     MatSelectModule,
     FormsModule,
     MatInputModule,
+    NgxMatDatetimePickerModule,
+    MatDatepickerModule,
+    NgxMatNativeDateModule,
   ],
 })
 export class PipesModule {
diff --git a/projects/angular-intl-demo/src/index.html b/projects/angular-intl-demo/src/index.html
@@ -10,7 +10,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body class="mat-typography">
+<body class="mat-typography mat-app-background">
 <app-root></app-root>
 </body>
 </html>
diff --git a/projects/angular-intl-demo/src/styles.scss b/projects/angular-intl-demo/src/styles.scss
@@ -1,4 +1,43 @@
-/* You can add global styles to this file, and also import other style files */
+@use "@angular/material" as mat;
+
+@include mat.core();
+
+$light-theme: mat.define-light-theme((
+  color: (
+    primary: mat.define-palette(mat.$deep-purple-palette),
+    accent: mat.define-palette(mat.$deep-orange-palette),
+  ),
+  typography: mat.define-typography-config(),
+  density: 0,
+));
+
+$dark-theme: mat.define-dark-theme((
+  color: (
+    primary: mat.define-palette(mat.$deep-purple-palette),
+    accent: mat.define-palette(mat.$deep-orange-palette),
+  ),
+));
+
+@include mat.legacy-button-color($light-theme);
+@include mat.button-theme($light-theme);
+@include mat.toolbar-theme($light-theme);
+@include mat.tabs-theme($light-theme);
+@include mat.select-theme($light-theme);
+@include mat.input-theme($light-theme);
+@include mat.datepicker-theme($light-theme);
+@include mat.form-field-theme($light-theme);
+
+@media (prefers-color-scheme: dark) {
+  @include mat.core-color($dark-theme);
+  @include mat.legacy-button-color($dark-theme);
+  @include mat.button-color($dark-theme);
+  @include mat.toolbar-color($dark-theme);
+  @include mat.tabs-color($dark-theme);
+  @include mat.select-color($dark-theme);
+  @include mat.input-color($dark-theme);
+  @include mat.datepicker-color($dark-theme);
+  @include mat.form-field-color($dark-theme);
+}
 
 html, body {
   height: 100%;
