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/date-time/date-time-advanced";
+
+import { AppModuleConfig } from "./core/AppModuleConfig";
+import { Config } from "./core/Config";
+import { IConfigGenerator } from "./core/IConfigGenerator";
+
+export class MaskConfigGenerator 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/date-time/"
+        }));
+
+        return configs;
+    }
+}

src/app/scheduling/date-time/date-time-advanced.html

@@ -0,0 +1,32 @@
+<div class="date-time-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/date-time/date-time-advanced.scss

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

src/app/scheduling/date-time/date-time-advanced.ts

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

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

@@ -30,5 +30,7 @@ export const schedulingRoutesData = {
     "timepicker-sample-6": { displayName: "Timepicker Input Group Template Dropdown", parentName: "Timepicker" },
     "timepicker-sample-7": { displayName: "Custom Action Buttons", parentName: "Timepicker" },
     "timepicker-sample-8": { displayName: "Timepicker Format", parentName: "Timepicker" },
-    "multiview-calendar": {displayName: "Multiview Calendar", parentName: "Calendar"}
+    "multiview-calendar": {displayName: "Multiview Calendar", parentName: "Calendar"},
+    "date-time-advanced": {displayName: "Date Time Advanced", parentName: "Date Time Editor"}
+
 };

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

@@ -1,5 +1,6 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
+import { DateTimeAdvancedComponent } from "../scheduling/date-time/date-time-advanced";
 import { CalendarSample1Component } from "./calendar/calendar-sample-1/calendar-sample-1.component";
 import { CalendarSample2Component } from "./calendar/calendar-sample-2/calendar-sample-2.component";
 import { CalendarSample3Component } from "./calendar/calendar-sample-3/calendar-sample-3.component";
@@ -199,6 +200,11 @@ export const schedulingRoutes: Routes = [
         component: CalendarMultiViewComponent,
         data: schedulingRoutesData["multiview-calendar"],
         path: "multiview-calendar"
+    },
+    {
+        component: DateTimeAdvancedComponent,
+        data: schedulingRoutesData["date-time-advanced"],
+        path: "date-time-advanced"
     }
 ];
 

src/app/scheduling/scheduling.module.ts

@@ -2,9 +2,9 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import {
-    IgxAutocompleteModule, IgxButtonModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule, 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 { CalendarSample1Component } from "./calendar/calendar-sample-1/calendar-sample-1.component";
 import { CalendarSample2Component } from "./calendar/calendar-sample-2/calendar-sample-2.component";
@@ -17,6 +17,7 @@ import { CalendarStylingSample } from "./calendar/calendar-styling-sample/calend
 import { CalendarViewsComponent } from "./calendar/calendar-views/calendar-views.component";
 import { CalendarComponent } from "./calendar/calendar.component";
 import { CalendarMultiViewComponent } from "./calendar/multiview/multiview.component";
+import { DateTimeAdvancedComponent } from "./date-time/date-time-advanced";
 import { DatepickerDropdownComponent } from "./datepicker/datepicker-dropdown/datepicker-dropdown.component";
 import { DatepickerSample1Component } from "./datepicker/datepicker-sample-1/datepicker-sample-1.component";
 import { DatepickerSample2Component } from "./datepicker/datepicker-sample-2/datepicker-sample-2.component";
@@ -55,6 +56,7 @@ import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/tim
         CalendarSample7Component,
         CalendarMultiViewComponent,
         CalendarStylingSample,
+        DateTimeAdvancedComponent,
         DatepickerSample1Component,
         DatepickerSample2Component,
         DatepickerSample3Component,
@@ -99,7 +101,8 @@ import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/tim
         IgxButtonModule,
         IgxSelectModule,
         IgxDropDownModule,
-        IgxToggleModule
+        IgxToggleModule,
+        IgxDateTimeEditorModule
     ]
 })
 export class SchedulingModule { }