docs(datepicker): move showcases with format in separate module

src/app/playground-components.ts

@@ -546,19 +546,19 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
       },
       {
         path: 'date-timepicker-dynamic-inputs-showcase.component',
-        link: '/datepicker/date-timepicker-dynamic-inputs-showcase.component',
+        link: '/datepicker-with-format/date-timepicker-dynamic-inputs-showcase.component',
         component: 'DateTimepickerDynamicInputsShowcaseComponent',
         name: 'Date Timepicker Dynamic Inputs Showcase',
       },
       {
         path: 'datepicker-dynamic-inputs-showcase.component',
-        link: '/datepicker/datepicker-dynamic-inputs-showcase.component',
+        link: '/datepicker-with-format/datepicker-dynamic-inputs-showcase.component',
         component: 'DatepickerDynamicInputsShowcaseComponent',
         name: 'Datepicker Dynamic Inputs Showcase',
       },
       {
         path: 'range-picker-dynamic-inputs-showcase.component',
-        link: '/datepicker/rangepicker-dynamic-inputs-showcase.component',
+        link: '/datepicker-with-format/rangepicker-dynamic-inputs-showcase.component',
         component: 'RangeickerDynamicInputsShowcaseComponent',
         name: 'Range Picker Dynamic Inputs Showcase',
       },

src/playground/with-layout/datepicker-with-format/datepicker-example.scss

@@ -0,0 +1,31 @@
+nb-card-body {
+  text-align: center;
+}
+
+input {
+  width: 100%;
+}
+
+input:nth-of-type(2) {
+  margin-top: 1rem;
+}
+
+@media screen and (min-width: 31em) {
+  input {
+    width: 21.875rem;
+  }
+
+  .two-inputs input {
+    width: calc(50% - 0.5rem);
+  }
+  .two-inputs input:last-of-type {
+    margin-top: 0;
+    margin-left: 1rem;
+  }
+}
+
+@media screen and (min-width: 50.25em) {
+  .two-inputs input {
+    width: 21.875rem;
+  }
+}

src/playground/with-layout/datepicker-with-format/datepicker-with-format-routing.module.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Route } from '@angular/router';
+import { DateTimepickerDynamicInputsShowcaseComponent } from './date-timepicker-dynamic-inputs-showcase.component';
+import { DatepickerDynamicInputsShowcaseComponent } from './datepicker-dynamic-inputs-showcase.component';
+import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic-inputs-showcase.component';
+
+const routes: Route[] = [
+  {
+    path: 'date-timepicker-dynamic-inputs-showcase.component',
+    component: DateTimepickerDynamicInputsShowcaseComponent,
+  },
+  {
+    path: 'datepicker-dynamic-inputs-showcase.component',
+    component: DatepickerDynamicInputsShowcaseComponent,
+  },
+  {
+    path: 'rangepicker-dynamic-inputs-showcase.component',
+    component: RangepickerDynamicInputsShowcaseComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class DatepickerWithFormatRoutingModule {}

src/playground/with-layout/datepicker-with-format/datepicker-with-format.module.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NbButtonModule, NbCardModule, NbDatepickerModule, NbInputModule, NbTimepickerModule } from '@nebular/theme';
+import { DatepickerWithFormatRoutingModule } from './datepicker-with-format-routing.module';
+import { DateTimepickerDynamicInputsShowcaseComponent } from './date-timepicker-dynamic-inputs-showcase.component';
+import { NbDateFnsDateModule } from '@nebular/date-fns';
+import { DatepickerDynamicInputsShowcaseComponent } from './datepicker-dynamic-inputs-showcase.component';
+import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic-inputs-showcase.component';
+
+@NgModule({
+  declarations: [
+    DateTimepickerDynamicInputsShowcaseComponent,
+    DatepickerDynamicInputsShowcaseComponent,
+    RangepickerDynamicInputsShowcaseComponent,
+  ],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    NbDatepickerModule.forRoot(),
+    NbTimepickerModule.forRoot(),
+    NbInputModule,
+    DatepickerWithFormatRoutingModule,
+    NbCardModule,
+    NbButtonModule,
+    NbDateFnsDateModule.forRoot({}),
+  ],
+})
+export class DatepickerWithFormatModule {}

src/playground/with-layout/datepicker/datepicker-routing.module.ts

@@ -13,9 +13,6 @@ import { RangepickerShowcaseComponent } from './rangepicker-showcase.component';
 import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component';
 import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component';
 import { DatepickerFilterComponent } from './datepicker-filter.component';
-import { DateTimepickerDynamicInputsShowcaseComponent } from './date-timepicker-dynamic-inputs-showcase.component';
-import { DatepickerDynamicInputsShowcaseComponent } from './datepicker-dynamic-inputs-showcase.component';
-import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic-inputs-showcase.component';
 
 const routes: Route[] = [
   {
@@ -30,18 +27,6 @@ const routes: Route[] = [
     path: 'date-timepicker-showcase.component',
     component: DateTimepickerShowcaseComponent,
   },
-  {
-    path: 'date-timepicker-dynamic-inputs-showcase.component',
-    component: DateTimepickerDynamicInputsShowcaseComponent,
-  },
-  {
-    path: 'datepicker-dynamic-inputs-showcase.component',
-    component: DatepickerDynamicInputsShowcaseComponent,
-  },
-  {
-    path: 'rangepicker-dynamic-inputs-showcase.component',
-    component: RangepickerDynamicInputsShowcaseComponent,
-  },
   {
     path: 'date-timepicker-single-column.component',
     component: DateTimepickerSingleColumnComponent,

src/playground/with-layout/datepicker/datepicker.module.ts

@@ -15,19 +15,12 @@ import { RangepickerShowcaseComponent } from './rangepicker-showcase.component';
 import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component';
 import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component';
 import { DatepickerFilterComponent } from './datepicker-filter.component';
-import { DateTimepickerDynamicInputsShowcaseComponent } from './date-timepicker-dynamic-inputs-showcase.component';
-import { NbDateFnsDateModule } from '@nebular/date-fns';
-import { DatepickerDynamicInputsShowcaseComponent } from './datepicker-dynamic-inputs-showcase.component';
-import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic-inputs-showcase.component';
 
 @NgModule({
   declarations: [
     DatepickerFormsComponent,
     DatepickerShowcaseComponent,
     DateTimepickerShowcaseComponent,
-    DateTimepickerDynamicInputsShowcaseComponent,
-    DatepickerDynamicInputsShowcaseComponent,
-    RangepickerDynamicInputsShowcaseComponent,
     DateTimepickerSingleColumnComponent,
     DatepickerValidationComponent,
     RangepickerShowcaseComponent,
@@ -42,7 +35,6 @@ import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic
     DatepickerRoutingModule,
     NbCardModule,
     NbButtonModule,
-    NbDateFnsDateModule.forRoot({}),
   ],
 })
 export class DatepickerModule {}