feat(demo): pick datetime

angular.json

@@ -53,7 +53,8 @@
                             }
                         ],
                         "styles": [
-                            "packages/demo/src/styles.scss"
+                            "packages/demo/src/styles.scss",
+                            "dist/nxt-pick-datetime/assets/picker.scss"
                         ],
                         "scripts": []
                     },

packages/demo/src/app/app-routing.module.ts

@@ -13,6 +13,10 @@ const routes: Routes = [
     {
         path: 'json-view',
         loadChildren: () => import('./json-view/json-view.module').then(m => m.AppJsonViewModule)
+    },
+    {
+        path: 'pick-datetime',
+        loadChildren: () => import('./pick-datetime/pick-datetime.module').then(m => m.AppPickDatetimeModule)
     }
 ]
 

packages/demo/src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 
@@ -9,6 +10,7 @@ import { AppComponent } from './app.component'
     ],
     imports: [
         BrowserModule,
+        BrowserAnimationsModule,
         AppRoutingModule
     ],
     providers: [],

packages/demo/src/app/pick-datetime/pick-datetime-routing.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { AppPickDatetimeComponent } from './pick-datetime.component'
+
+const routes: Routes = [
+    { path: '', component: AppPickDatetimeComponent }
+]
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class AppPickDatetimeRoutingModule { }

packages/demo/src/app/pick-datetime/app.component.ts → packages/demo/src/app/pick-datetime/pick-datetime.component.ts

@@ -2,13 +2,13 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core'
 import { OwlDateTimeComponent } from 'nxt-pick-datetime'
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss']
+    selector: 'app-pick-datetime',
+    templateUrl: './pick-datetime.component.html',
+    styleUrls: ['./pick-datetime.component.scss']
 })
-export class AppComponent implements AfterViewInit {
+export class AppPickDatetimeComponent implements AfterViewInit {
     @ViewChild('date_range_component', { static: true })
-    date_range_component?: OwlDateTimeComponent<AppComponent>
+    date_range_component?: OwlDateTimeComponent<AppPickDatetimeComponent>
 
     public selectedMoments: Date[] = [
         new Date('2019-03-11T08:00:00+11:00'),

packages/demo/src/app/pick-datetime/pick-datetime.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { OwlDateTimeModule } from 'nxt-pick-datetime'
+import { OwlNativeDateTimeModule } from 'nxt-pick-datetime/native-adapter'
+import { AppPickDatetimeRoutingModule } from './pick-datetime-routing.module'
+import { AppPickDatetimeComponent } from './pick-datetime.component'
+
+@NgModule({
+    declarations: [
+        AppPickDatetimeComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        OwlDateTimeModule,
+        OwlNativeDateTimeModule,
+        AppPickDatetimeRoutingModule
+    ],
+    providers: [],
+    bootstrap: [AppPickDatetimeComponent]
+})
+export class AppPickDatetimeModule { }

packages/demo/src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.