dateTimeEditor spin buttons sample

live-editing/configs/DateTimeConfigGenerator.ts

@@ -0,0 +1,26 @@
+/* tslint:disable:object-literal-sort-keys */
+import { IgxDateTimeEditorModule, IgxInputGroupModule } from "igniteui-angular";
+import { DateTimeAdvancedComponent } from "../../src/app/scheduling/datetimeeditor/datetime-advanced/datetime-advanced";
+
+import { AppModuleConfig } from "./core/AppModuleConfig";
+import { Config } from "./core/Config";
+import { IConfigGenerator } from "./core/IConfigGenerator";
+
+export class DateTimeEditorConfigGenerator implements IConfigGenerator {
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        // Date Time Advanced
+        configs.push(new Config({
+            component: DateTimeAdvancedComponent,
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxInputGroupModule, IgxDateTimeEditorModule, DateTimeAdvancedComponent],
+                ngDeclarations: [DateTimeAdvancedComponent],
+                ngImports: [IgxInputGroupModule, IgxDateTimeEditorModule]
+            }),
+            shortenComponentPathBy: "/scheduling/datetimeeditor/"
+        }));
+
+        return configs;
+    }
+}

src/app/scheduling/datetimeeditor/datetime-advanced/datetime-advanced.html

@@ -0,0 +1,32 @@
+<div class="datetime-wrapper">
+    <label>Increment/Decrement Default</label>
+    <igx-input-group>
+        <input igxInput #dateEditorDefault="igxDateTimeEditor" type="text" [igxDateTimeEditor]="'dd/MM/yyyy'" [(ngModel)]="date">
+        <igx-suffix>
+            <igx-icon (click)="dateEditorDefault.increment()">keyboard_arrow_up</igx-icon>
+            <igx-icon (click)="dateEditorDefault.decrement()">keyboard_arrow_down</igx-icon>
+        </igx-suffix>
+    </igx-input-group>
+    <igx-input-group>
+        <input igxInput #timeEditorDefault="igxDateTimeEditor" type="text" [igxDateTimeEditor]="'HH:mm tt'" [(ngModel)]="date">
+        <igx-suffix>
+            <igx-icon (click)="timeEditorDefault.increment()">keyboard_arrow_up</igx-icon>
+            <igx-icon (click)="timeEditorDefault.decrement()">keyboard_arrow_down</igx-icon>
+        </igx-suffix>
+    </igx-input-group>
+    <label>Increment/Decrement specific datePart</label>
+    <igx-input-group>
+        <input igxInput #dateEditor="igxDateTimeEditor" type="text" [igxDateTimeEditor]="'dd/MM/yyyy'" [(ngModel)]="date">
+        <igx-suffix>
+            <igx-icon (click)="dateEditor.increment(datePart.Year)">keyboard_arrow_up</igx-icon>
+            <igx-icon (click)="dateEditor.decrement(datePart.Year)">keyboard_arrow_down</igx-icon>
+        </igx-suffix>
+    </igx-input-group>
+    <igx-input-group>
+        <input igxInput #timeEditor="igxDateTimeEditor" type="text" [igxDateTimeEditor]="'HH:mm tt'" [(ngModel)]="date">
+        <igx-suffix>
+            <igx-icon (click)="timeEditor.increment(datePart.Minutes)">keyboard_arrow_up</igx-icon>
+            <igx-icon (click)="timeEditor.decrement(datePart.Minutes)">keyboard_arrow_down</igx-icon>
+        </igx-suffix>
+    </igx-input-group>
+<div>

src/app/scheduling/datetimeeditor/datetime-advanced/datetime-advanced.scss

@@ -0,0 +1,12 @@
+.datetime-wrapper {
+    padding: 16px;
+    width: 300px;
+
+    igx-suffix {
+        user-select: none;
+    }
+
+    igx-input-group:nth-child(3) {
+        padding-bottom: 48px;
+    }
+}

src/app/scheduling/datetimeeditor/datetime-advanced/datetime-advanced.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { DatePart } from "igniteui-angular";
+
+@Component({
+    selector: "app-datetime-advanced",
+    styleUrls: ["./datetime-advanced.scss"],
+    templateUrl: "./datetime-advanced.html"
+})
+
+export class DateTimeAdvancedComponent {
+    public date = new Date();
+    public datePart: typeof DatePart = DatePart;
+}

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

@@ -23,6 +23,7 @@ export const schedulingRoutesData = {
     "datepicker-sample-8": { displayName: "Custom Action Buttons", parentName: "Datepicker" },
     "datepicker-sample-9": { displayName: "Range Datepicker", parentName: "Datepicker" },
     "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" },
     "monthpicker-sample-2": { displayName: "Month Picker with Format Options", parentName: "Monthpicker" },
     "monthpicker-sample-3": { displayName: "Localized Month Picker", parentName: "Monthpicker" },

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

@@ -23,6 +23,7 @@ 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 { DatepickerSample9Component } from "./datepicker/datepicker-sample-9/datepicker-sample-9.component";
+import { DateTimeAdvancedComponent } from "./datetimeeditor/datetime-advanced/datetime-advanced";
 import { DateTimeBasicComponent } from "./datetimeeditor/datetime-basic/datetime-basic.component";
 import { MonthpickerSample1Component } from "./monthpicker/monthpicker-sample-1/monthpicker-sample-1.component";
 import { MonthpickerSample2Component } from "./monthpicker/monthpicker-sample-2/monthpicker-sample-2.component";
@@ -218,6 +219,11 @@ export const schedulingRoutes: Routes = [
         component: CalendarMultiViewComponent,
         data: schedulingRoutesData["multiview-calendar"],
         path: "multiview-calendar"
+    },
+    {
+        component: DateTimeAdvancedComponent,
+        data: schedulingRoutesData["datetime-advanced"],
+        path: "datetime-advanced"
     }
 ];
 

src/app/scheduling/scheduling.module.ts

@@ -2,10 +2,9 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import {
-    IgxAutocompleteModule, IgxButtonModule, IgxCalendarModule, IgxCardModule,
-    IgxDatePickerModule, IgxDateTimeEditorModule, IgxDialogModule,
-    IgxDropDownModule, IgxIconModule, IgxInputGroupModule, IgxSelectModule,
-    IgxSnackbarModule, IgxSwitchModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule
+    IgxAutocompleteModule, IgxButtonModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule,
+    IgxDateTimeEditorModule, IgxDialogModule, IgxDropDownModule, IgxIconModule, IgxInputGroupModule,
+    IgxSelectModule, IgxSnackbarModule, IgxSwitchModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule
 } from "igniteui-angular";
 import { CalendarDaysViewComponent } from "./calendar/calendar-days-view/calendar-days-view.component";
 import { CalendarMonthsViewComponent } from "./calendar/calendar-months-view/calendar-months-view.component";
@@ -31,6 +30,7 @@ import { DatepickerSample7Component } from "./datepicker/datepicker-sample-7/dat
 import { DatepickerSample8Component } from "./datepicker/datepicker-sample-8/datepicker-sample-8.component";
 import { AutocompletePipeStartsWith, DatepickerSample9Component, PipeWithoutTownFrom
     } from "./datepicker/datepicker-sample-9/datepicker-sample-9.component";
+import { DateTimeAdvancedComponent } from "./datetimeeditor/datetime-advanced/datetime-advanced";
 import { DateTimeBasicComponent } from "./datetimeeditor/datetime-basic/datetime-basic.component";
 import { MonthpickerSample1Component } from "./monthpicker/monthpicker-sample-1/monthpicker-sample-1.component";
 import { MonthpickerSample2Component } from "./monthpicker/monthpicker-sample-2/monthpicker-sample-2.component";
@@ -62,6 +62,7 @@ import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/tim
         CalendarSample8Component,
         CalendarMultiViewComponent,
         CalendarStylingSample,
+        DateTimeAdvancedComponent,
         DatepickerSample1Component,
         DatepickerSample2Component,
         DatepickerSample3Component,
@@ -107,7 +108,8 @@ import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/tim
         IgxButtonModule,
         IgxSelectModule,
         IgxDropDownModule,
-        IgxToggleModule
+        IgxToggleModule,
+        IgxDateTimeEditorModule
     ]
 })
 export class SchedulingModule { }