Merge pull request #2703 from IgniteUI/PMiteva/date-time-picker-samples-master

Create date & time picker form samples-master

Author: Konstantin Dinev

live-editing/configs/DatePickerConfigGenerator.ts

@@ -1,7 +1,9 @@
+import {ReactiveFormsModule} from '@angular/forms';
 import {IgxAutocompleteModule,
 IgxButtonModule,
 IgxCalendarModule,
 IgxDatePickerModule,
+IgxTimePickerModule,
 IgxDropDownModule,
 IgxIconModule,
 IgxInputGroupModule,
@@ -118,6 +120,26 @@ export class DatePickerConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        // date & time picker - template driven form
+        configs.push(new Config({
+            component: 'DateTimePickerTDFSampleComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['DateTimePickerTDFSampleComponent', 'IgxDatePickerModule', 'IgxTimePickerModule'],
+                ngDeclarations: ['DateTimePickerTDFSampleComponent'],
+                ngImports: ['IgxDatePickerModule', 'IgxTimePickerModule']
+            })
+        }));
+
+        // date & time picker - reactive form
+        configs.push(new Config({
+            component: 'DateTimePickerRFSampleComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['DateTimePickerRFSampleComponent', 'IgxDatePickerModule', 'IgxTimePickerModule', 'ReactiveFormsModule'],
+                ngDeclarations: ['DateTimePickerRFSampleComponent'],
+                ngImports: ['IgxDatePickerModule', 'IgxTimePickerModule', 'ReactiveFormsModule']
+            })
+        }));
+
         return configs;
     }
 }

src/app/scheduling/datepicker/reactive-form/reactive-form.component.html

@@ -0,0 +1,24 @@
+<div class="pickers-wrapper">
+    <form [formGroup]="dateTimeForm">
+        <div class="form-group">
+            <div class="form-date-picker">
+                <igx-date-picker #datePicker formControlName="date" [value]="date" [minValue]="minDate"
+                    [maxValue]="maxDate" (valueChange)="timePicker.value = datePicker.value">
+                    <label igxLabel>Date</label>
+                </igx-date-picker>
+            </div>
+            <div class="form-time-picker">
+                <igx-time-picker #timePicker formControlName="time" [value]="date" [minValue]="minTime"
+                    [maxValue]="maxTime" [disabled]="dateTimeForm.value.date ? false : true"
+                    (valueChange)="datePicker.value = timePicker.value">
+                    <label igxLabel>Time</label>
+                </igx-time-picker>
+            </div>
+        </div>
+    </form>
+    <p>
+        Date picker: {{ dateTimeForm.value.date? dateTimeForm.value.date.toLocaleString() : null}}<br>
+        Time picker: {{ dateTimeForm.value.time? dateTimeForm.value.time.toLocaleString() : null}}<br>
+        Form Status: {{ dateTimeForm.status }}
+    </p>
+</div>

src/app/scheduling/datepicker/reactive-form/reactive-form.component.scss

@@ -0,0 +1,19 @@
+.pickers-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group {
+    display: flex;
+    flex: 1;
+    width: 400px;
+}
+
+.form-date-picker {
+    flex: 55%;
+}
+
+.form-time-picker {
+    flex: 45%;
+    margin-left: 16px;
+}

src/app/scheduling/datepicker/reactive-form/reactive-form.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+    selector: 'app-datetimepicker-reactive-form',
+    styleUrls: ['./reactive-form.component.scss'],
+    templateUrl: './reactive-form.component.html'
+})
+export class DateTimePickerRFSampleComponent {
+    public dateTimeForm: FormGroup;
+    public date = new Date(2021, 6, 12, 7, 30, 0);
+    public minDate = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate() - 10);
+    public maxDate = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate() + 15);
+    public minTime = '06:15:30';
+    public maxTime = '15:15:30';
+
+    constructor(fb: FormBuilder) {
+        this.dateTimeForm = fb.group({
+            date: [this.date, Validators.required],
+            time: [this.date, Validators.required]
+        });
+    }
+}

src/app/scheduling/datepicker/template-driven-form/template-driven-form.component.html

@@ -0,0 +1,17 @@
+<div class="pickers-wrapper">
+    <div class="form-group">
+        <div class="form-date-picker">
+            <igx-date-picker #datePicker name="date-picker" [(ngModel)]="date">
+                <label igxLabel>Date</label>
+            </igx-date-picker>
+        </div>
+        <div class="form-time-picker">
+            <igx-time-picker name="time-picker" [(ngModel)]="date" [disabled]="datePicker.value ? false : true">
+                <label igxLabel>Time</label>
+            </igx-time-picker>
+        </div>
+    </div>
+    <p class="text">
+        Selected date: {{ date? date.toLocaleString() : null }}
+    </p>
+</div>

src/app/scheduling/datepicker/template-driven-form/template-driven-form.component.scss

@@ -0,0 +1,19 @@
+.pickers-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group {
+    display: flex;
+    flex: 1;
+    width: 400px;
+}
+
+.form-date-picker {
+    flex: 55%;
+}
+
+.form-time-picker {
+    flex: 45%;
+    margin-left: 16px;
+}

src/app/scheduling/datepicker/template-driven-form/template-driven-form.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-datetimepicker-template-driven-form',
+    styleUrls: ['./template-driven-form.component.scss'],
+    templateUrl: './template-driven-form.component.html'
+})
+export class DateTimePickerTDFSampleComponent {
+    public date = new Date();
+}

src/app/scheduling/scheduling-routes-data.ts

@@ -24,6 +24,8 @@ export const schedulingRoutesData = {
     'datepicker-sample-8': { displayName: 'Custom Action Buttons', parentName: 'Datepicker' },
     'datepicker-sample-9': { displayName: 'Range Datepicker', parentName: 'Datepicker' },
     'datepicker-styling-sample': { displayName: 'Datepicker Styling', parentName: 'Datepicker' },
+    'template-driven-form': { displayName: 'Date & Time Picker Template Driven Form', parentName: 'Datepicker' },
+    'reactive-form': { displayName: 'Date & Time Picker Reactive Form', parentName: 'Reactive Forms' },
     'datetime-basic': { displayName: 'Date Time Basic', parentName: 'Date Time Editor' },
     'datetime-advanced': { displayName: 'Date Time Advanced', parentName: 'Date Time Editor' },
     'monthpicker-sample-1': { displayName: 'Default Month Picker', parentName: 'Monthpicker' },

src/app/scheduling/scheduling-routing.module.ts

@@ -24,6 +24,8 @@ import { DatepickerSample6Component } from './datepicker/datepicker-sample-6/dat
 import { DatepickerSample7Component } from './datepicker/datepicker-sample-7/datepicker-sample-7.component';
 import { DatepickerSample8Component } from './datepicker/datepicker-sample-8/datepicker-sample-8.component';
 import { DatepickerStylingSampleComponent } from './datepicker/datepicker-styling-sample/datepicker-styling-sample.component';
+import {  DateTimePickerTDFSampleComponent } from './datepicker/template-driven-form/template-driven-form.component';
+import {  DateTimePickerRFSampleComponent } from './datepicker/reactive-form/reactive-form.component';
 import { BasicDateRangePickerComponent } from './daterangepicker/daterangepicker-basic/daterangepicker-basic';
 import {
     FlightBookingComponent } from './daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking';
@@ -152,6 +154,16 @@ export const schedulingRoutes: Routes = [
         data: schedulingRoutesData['datepicker-sample-8'],
         path: 'datepicker-sample-8'
     },
+    {
+        component:  DateTimePickerTDFSampleComponent,
+        data: schedulingRoutesData['template-driven-form'],
+        path: 'template-driven-form'
+    },
+    {
+        component:  DateTimePickerRFSampleComponent,
+        data: schedulingRoutesData['reactive-form'],
+        path: 'reactive-form'
+    },
     {
         component: DateTimeBasicComponent,
         data: schedulingRoutesData['datetime-basic'],

src/app/scheduling/scheduling.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
     IgxAutocompleteModule, IgxButtonModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule,
     IgxDateRangePickerModule, IgxDateTimeEditorModule, IgxDialogModule, IgxDropDownModule, IgxIconModule,
@@ -33,6 +33,8 @@ import { DatepickerSample8Component } from './datepicker/datepicker-sample-8/dat
 import { AutocompletePipeStartsWith, DatepickerSample9Component, PipeWithoutTownFrom
 } from './datepicker/datepicker-sample-9/datepicker-sample-9.component';
 import { DatepickerStylingSampleComponent } from './datepicker/datepicker-styling-sample/datepicker-styling-sample.component';
+import {DateTimePickerTDFSampleComponent} from './datepicker/template-driven-form/template-driven-form.component';
+import {DateTimePickerRFSampleComponent} from './datepicker/reactive-form/reactive-form.component';
 import {
     BasicDateRangePickerComponent } from './daterangepicker/daterangepicker-basic/daterangepicker-basic';
 import {
@@ -83,6 +85,8 @@ import { TimePickerStylingComponent } from './timepicker/timepicker-styling/time
         DatepickerSample7Component,
         DatepickerSample8Component,
         DatepickerSample9Component,
+        DateTimePickerTDFSampleComponent,
+        DateTimePickerRFSampleComponent,
         DateTimeBasicComponent,
         DatepickerDropdownComponent,
         DatepickerStylingSampleComponent,
@@ -107,6 +111,7 @@ import { TimePickerStylingComponent } from './timepicker/timepicker-styling/time
     imports: [
         CommonModule,
         FormsModule,
+        ReactiveFormsModule,
         SchedulingRoutingModule,
         IgxAutocompleteModule,
         IgxCalendarModule,