Skip to content

Commit 0a581d2

Browse files
bkulovbkulov
authored
Merge pull request #1196 from IgniteUI/sboykova/datepicker-update
docs(date-picker): Updated samples
2 parents a7f1183 + b1eb75c commit 0a581d2

18 files changed

+234
-15
lines changed

‎live-editing/configs/DatePickerConfigGenerator.ts

+11
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { DatepickerSample4Component } from "../../src/app/scheduling/datepicker/
99
import { DatepickerSample5Component } from "../../src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component";
1010
import { DatepickerSample6Component } from "../../src/app/scheduling/datepicker/datepicker-sample-6/datepicker-sample-6.component";
1111
import { DatepickerSample7Component } from "../../src/app/scheduling/datepicker/datepicker-sample-7/datepicker-sample-7.component";
12+
import { DatepickerSample8Component } from "../../src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component";
1213
import { AppModuleConfig } from "./core/AppModuleConfig";
1314
import { Config } from "./core/Config";
1415
import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -103,6 +104,16 @@ export class DatePickerConfigGenerator implements IConfigGenerator {
103104
})
104105
}));
105106

107+
configs.push(new Config({
108+
component: DatepickerSample8Component,
109+
appModuleConfig: new AppModuleConfig({
110+
imports: [IgxDatePickerModule, DatepickerSample8Component, IgxIconModule,
111+
IgxInputGroupModule],
112+
ngDeclarations: [DatepickerSample8Component],
113+
ngImports: [IgxDatePickerModule, IgxIconModule, IgxInputGroupModule]
114+
})
115+
}));
116+
106117
return configs;
107118
}
108119
}

‎live-editing/configs/TimePickerConfigGenerator.ts

+22
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { TimePickerSample3Component } from "../../src/app/scheduling/timepicker/
88
import { TimePickerSample4Component } from "../../src/app/scheduling/timepicker/timepicker-sample-4/timepicker-sample-4.component";
99
import { TimePickerSample5Component } from "../../src/app/scheduling/timepicker/timepicker-sample-5/timepicker-sample-5.component";
1010
import { TimePickerSample6Component } from "../../src/app/scheduling/timepicker/timepicker-sample-6/timepicker-sample-6.component";
11+
import { TimePickerSample7Component } from "../../src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component";
12+
import { TimePickerSample8Component } from "../../src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component";
1113
import { AppModuleConfig } from "./core/AppModuleConfig";
1214
import { Config } from "./core/Config";
1315
import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -95,6 +97,26 @@ export class TimePickerConfigGenerator implements IConfigGenerator {
9597
shortenComponentPathBy: "/scheduling/timepicker/"
9698
}));
9799

100+
configs.push(new Config({
101+
component: TimePickerSample7Component,
102+
appModuleConfig: new AppModuleConfig({
103+
imports: [IgxTimePickerModule, IgxInputGroupModule, IgxIconModule, TimePickerSample7Component],
104+
ngDeclarations: [TimePickerSample7Component],
105+
ngImports: [IgxTimePickerModule, IgxInputGroupModule, IgxIconModule]
106+
}),
107+
shortenComponentPathBy: "/scheduling/timepicker/"
108+
}));
109+
110+
configs.push(new Config({
111+
component: TimePickerSample8Component,
112+
appModuleConfig: new AppModuleConfig({
113+
imports: [IgxTimePickerModule, IgxInputGroupModule, IgxIconModule, TimePickerSample8Component],
114+
ngDeclarations: [TimePickerSample8Component],
115+
ngImports: [IgxTimePickerModule, IgxInputGroupModule, IgxIconModule]
116+
}),
117+
shortenComponentPathBy: "/scheduling/timepicker/"
118+
}));
119+
98120
return configs;
99121
}
100122
}

‎src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.html

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
<div class="sample-wrapper date-picker-wrapper">
22
<h4 class="sample-title">Date Picker with buttons</h4>
33
<p class="sample-description">Today and cancel buttons are shown. Two-way data binding is used.</p>
4-
<div>
5-
<igx-date-picker id="date-picker" cancelButtonLabel="cancel" todayButtonLabel="today" [(ngModel)]="date">
6-
</igx-date-picker>
4+
<div class="container">
5+
<div class="group">
6+
<label for="dialogPicker">Dialog Mode</label>
7+
<igx-date-picker id="dialogPicker" cancelButtonLabel="close" todayButtonLabel="today" [(ngModel)]="date1">
8+
</igx-date-picker>
9+
</div>
10+
<div class="group">
11+
<label for="dropdownPicker">Drop Down Mode</label>
12+
<igx-date-picker id="dropdownPicker" mode="dropdown" cancelButtonLabel="close" todayButtonLabel="today"
13+
[(ngModel)]="date2">
14+
</igx-date-picker>
15+
</div>
716
</div>
817
</div>

‎src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.scss

+12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
11
.date-picker-wrapper {
22
padding: 1rem;
33
}
4+
5+
.container{
6+
display: flex;
7+
flex-flow: row;
8+
width: 100%;
9+
align-content:stretch;
10+
}
11+
12+
.group{
13+
padding: 10px;
14+
width: 100%;
15+
}

‎src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.ts

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import { Component, OnInit } from "@angular/core";
22

33
@Component({
4-
selector: "app-datepicker-sample-3",
5-
styleUrls: ["./datepicker-sample-3.component.scss"],
6-
templateUrl: "./datepicker-sample-3.component.html"
4+
selector: "app-datepicker-sample-3",
5+
styleUrls: ["./datepicker-sample-3.component.scss"],
6+
templateUrl: "./datepicker-sample-3.component.html"
77
})
88
export class DatepickerSample3Component implements OnInit {
99

10-
public date: Date;
10+
public date1 = new Date();
11+
public date2 = new Date();
1112

12-
constructor() { }
13+
constructor() { }
1314

14-
public ngOnInit() {
15-
this.date = new Date(Date.now());
16-
// setting to yesterday
17-
this.date.setDate(this.date.getDate() - 1);
18-
}
15+
public ngOnInit() {
16+
// setting to yesterday
17+
this.date1.setDate(this.date1.getDate() - 1);
18+
this.date2.setDate(this.date2.getDate() - 1);
19+
}
1920
}

‎src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="sample-wrapper date-picker-wrapper">
2+
<h4 class="sample-title">Date Picker with custom action buttons</h4>
3+
<p class="sample-description">Retemplated date picker with custom buttons for months and years view</p>
4+
<igx-date-picker mode="dropdown" #picker [(ngModel)]="date">
5+
<ng-template igxDatePickerActions>
6+
<div class="container action-buttons">
7+
<button igxButton="flat" (click)="monthsView(picker)">months view</button>
8+
<button igxButton="flat" (click)="yearsView(picker)">years view</button>
9+
</div>
10+
</ng-template>
11+
</igx-date-picker>
12+
</div>

‎src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.scss

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
$margin: 8px 8px 8px 0px;
2+
$actions-height: 52px;
3+
4+
.date-picker-wrapper {
5+
padding: 1rem;
6+
overflow: hidden;
7+
}
8+
9+
.container{
10+
display: flex; flex-direction: row;
11+
margin-left: 24px;
12+
}
13+
14+
.action-buttons {
15+
justify-content: flex-end;
16+
align-items: center;
17+
height: $actions-height;
18+
19+
[igxButton] {
20+
margin: $margin;
21+
}
22+
}

‎src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component } from "@angular/core";
2+
import { IgxDatePickerComponent } from "igniteui-angular";
3+
4+
@Component({
5+
selector: "app-datepicker-sample-8",
6+
styleUrls: ["./datepicker-sample-8.component.scss"],
7+
templateUrl: "./datepicker-sample-8.component.html"
8+
})
9+
10+
export class DatepickerSample8Component {
11+
public date = new Date();
12+
public monthsView(datePicker: IgxDatePickerComponent) {
13+
datePicker.calendar.activeViewYear();
14+
}
15+
16+
public yearsView(datePicker: IgxDatePickerComponent) {
17+
datePicker.calendar.activeViewDecade();
18+
}
19+
}

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const schedulingRoutesData = {
1515
"datepicker-sample-5": { displayName: "Datepicker Locales", parentName: "Datepicker" },
1616
"datepicker-sample-6": { displayName: "Datepicker Input Group Template", parentName: "Datepicker" },
1717
"datepicker-sample-7": { displayName: "Dropdown Datepicker Template", parentName: "Datepicker" },
18+
"datepicker-sample-8": { displayName: "Custom Action Buttons", parentName: "Datepicker" },
1819
"monthpicker-sample-1": { displayName: "Default Month Picker", parentName: "Monthpicker" },
1920
"monthpicker-sample-2": { displayName: "Month Picker with Format Options", parentName: "Monthpicker" },
2021
"monthpicker-sample-3": { displayName: "Localized Month Picker", parentName: "Monthpicker" },
@@ -24,5 +25,7 @@ export const schedulingRoutesData = {
2425
"timepicker-sample-3": { displayName: "Timepicker Delta and Spin Mode", parentName: "Timepicker" },
2526
"timepicker-sample-4": { displayName: "Timepicker Validation", parentName: "Timepicker" },
2627
"timepicker-sample-5": { displayName: "Timepicker Input Group Template", parentName: "Timepicker" },
27-
"timepicker-sample-6": { displayName: "Timepicker Input Group Template Dropdown", parentName: "Timepicker" }
28+
"timepicker-sample-6": { displayName: "Timepicker Input Group Template Dropdown", parentName: "Timepicker" },
29+
"timepicker-sample-7": { displayName: "Custom Action Buttons", parentName: "Timepicker" },
30+
"timepicker-sample-8": { displayName: "Timepicker Format", parentName: "Timepicker" }
2831
};

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

+18
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { DatepickerSample4Component } from "./datepicker/datepicker-sample-4/dat
1717
import { DatepickerSample5Component } from "./datepicker/datepicker-sample-5/datepicker-sample-5.component";
1818
import { DatepickerSample6Component } from "./datepicker/datepicker-sample-6/datepicker-sample-6.component";
1919
import { DatepickerSample7Component } from "./datepicker/datepicker-sample-7/datepicker-sample-7.component";
20+
import { DatepickerSample8Component } from "./datepicker/datepicker-sample-8/datepicker-sample-8.component";
2021
import { MonthpickerSample1Component } from "./monthpicker/monthpicker-sample-1/monthpicker-sample-1.component";
2122
import { MonthpickerSample2Component } from "./monthpicker/monthpicker-sample-2/monthpicker-sample-2.component";
2223
import { MonthpickerSample3Component } from "./monthpicker/monthpicker-sample-3/monthpicker-sample-3.component";
@@ -28,6 +29,8 @@ import { TimePickerSample3Component } from "./timepicker/timepicker-sample-3/tim
2829
import { TimePickerSample4Component } from "./timepicker/timepicker-sample-4/timepicker-sample-4.component";
2930
import { TimePickerSample5Component } from "./timepicker/timepicker-sample-5/timepicker-sample-5.component";
3031
import { TimePickerSample6Component } from "./timepicker/timepicker-sample-6/timepicker-sample-6.component";
32+
import { TimePickerSample7Component } from "./timepicker/timepicker-sample-7/timepicker-sample-7.component";
33+
import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/timepicker-sample-8.component";
3134

3235
export const schedulingRoutes: Routes = [
3336
{
@@ -109,6 +112,11 @@ export const schedulingRoutes: Routes = [
109112
data: schedulingRoutesData["datepicker-sample-7"],
110113
path: "datepicker-sample-7"
111114
},
115+
{
116+
component: DatepickerSample8Component,
117+
data: schedulingRoutesData["datepicker-sample-8"],
118+
path: "datepicker-sample-8"
119+
},
112120
{
113121
component: DatepickerDropdownComponent,
114122
data: schedulingRoutesData["datepicker-dropdown"],
@@ -149,6 +157,16 @@ export const schedulingRoutes: Routes = [
149157
data: schedulingRoutesData["timepicker-dropdown"],
150158
path: "timepicker-dropdown"
151159
},
160+
{
161+
component: TimePickerSample7Component,
162+
data: schedulingRoutesData["timepicker-sample-7"],
163+
path: "timepicker-sample-7"
164+
},
165+
{
166+
component: TimePickerSample8Component,
167+
data: schedulingRoutesData["timepicker-sample-8"],
168+
path: "timepicker-sample-8"
169+
},
152170
{
153171
component: MonthpickerSample1Component,
154172
data: schedulingRoutesData["monthpicker-sample-1"],

‎src/app/scheduling/scheduling.module.ts

+6
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { DatepickerSample4Component } from "./datepicker/datepicker-sample-4/dat
2323
import { DatepickerSample5Component } from "./datepicker/datepicker-sample-5/datepicker-sample-5.component";
2424
import { DatepickerSample6Component } from "./datepicker/datepicker-sample-6/datepicker-sample-6.component";
2525
import { DatepickerSample7Component } from "./datepicker/datepicker-sample-7/datepicker-sample-7.component";
26+
import { DatepickerSample8Component } from "./datepicker/datepicker-sample-8/datepicker-sample-8.component";
2627
import { MonthpickerSample1Component } from "./monthpicker/monthpicker-sample-1/monthpicker-sample-1.component";
2728
import { MonthpickerSample2Component } from "./monthpicker/monthpicker-sample-2/monthpicker-sample-2.component";
2829
import { MonthpickerSample3Component } from "./monthpicker/monthpicker-sample-3/monthpicker-sample-3.component";
@@ -34,6 +35,8 @@ import { TimePickerSample3Component } from "./timepicker/timepicker-sample-3/tim
3435
import { TimePickerSample4Component } from "./timepicker/timepicker-sample-4/timepicker-sample-4.component";
3536
import { TimePickerSample5Component } from "./timepicker/timepicker-sample-5/timepicker-sample-5.component";
3637
import { TimePickerSample6Component } from "./timepicker/timepicker-sample-6/timepicker-sample-6.component";
38+
import { TimePickerSample7Component } from "./timepicker/timepicker-sample-7/timepicker-sample-7.component";
39+
import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/timepicker-sample-8.component";
3740

3841
@NgModule({
3942
declarations: [
@@ -52,13 +55,16 @@ import { TimePickerSample6Component } from "./timepicker/timepicker-sample-6/tim
5255
DatepickerSample5Component,
5356
DatepickerSample6Component,
5457
DatepickerSample7Component,
58+
DatepickerSample8Component,
5559
DatepickerDropdownComponent,
5660
TimePickerSample1Component,
5761
TimePickerSample2Component,
5862
TimePickerSample3Component,
5963
TimePickerSample4Component,
6064
TimePickerSample5Component,
6165
TimePickerSample6Component,
66+
TimePickerSample7Component,
67+
TimePickerSample8Component,
6268
DatepickerDropdownComponent,
6369
TimepickerDropdownComponent,
6470
CalendarViewsComponent,

‎src/app/scheduling/timepicker/timepicker-sample-6/timepicker-sample-6.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h5 class="sample-title">Time Picker with retemplated Input Group - dropdown mod
99
<igx-icon (click)="openDialog()">access_time</igx-icon>
1010
</igx-suffix>
1111
</igx-input-group>
12-
<label>{{today}}</label>
12+
<label>{{value}}</label>
1313
</ng-template>
1414
</igx-time-picker>
1515
</div>

‎src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<h5 class="sample-title">Time Picker with custom action buttons</h5>
2+
<div class="time-width">
3+
<igx-time-picker #picker format="HH:mm" mode="dropdown">
4+
<ng-template igxTimePickerActions>
5+
<div class="container action-buttons">
6+
<button igxButton="flat" (click)="picker.cancelButtonClick()">cancel</button>
7+
<button igxButton="flat" (click)="picker.okButtonClick()">ok</button>
8+
<button igxButton="flat" (click)="selectNow(picker)">now</button>
9+
</div>
10+
</ng-template>
11+
</igx-time-picker>
12+
</div>

‎src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.scss

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
$margin: 8px 8px 8px 0px;
2+
$actions-height: 52px;
3+
4+
.container{
5+
display: flex; flex-direction: row;
6+
margin-left: 24px;
7+
}
8+
9+
.action-buttons {
10+
justify-content: flex-end;
11+
align-items: center;
12+
height: $actions-height;
13+
14+
[igxButton] {
15+
margin: $margin;
16+
}
17+
}

‎src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component } from "@angular/core";
2+
import { IgxTimePickerComponent } from "igniteui-angular";
3+
4+
@Component({
5+
selector: "app-timepicker-sample-7",
6+
styleUrls: ["./timepicker-sample-7.component.scss"],
7+
templateUrl: "./timepicker-sample-7.component.html"
8+
})
9+
export class TimePickerSample7Component {
10+
public selectNow(timePicker: IgxTimePickerComponent) {
11+
timePicker.value = new Date(Date.now());
12+
timePicker.close();
13+
}
14+
}

‎src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<h5 class="sample-title">Different time formats</h5>
2+
<div class="container">
3+
<div class="group">
4+
<label for="timepicker1">h:m tt</label>
5+
<igx-time-picker id="timepicker1" format="h:m tt" mode="dropdown" [(ngModel)]="date"></igx-time-picker>
6+
</div>
7+
<div class="group">
8+
<label for="timepicker2">HH:mm</label>
9+
<igx-time-picker id="timepicker2" format="HH:mm" mode="dropdown" [(ngModel)]="date"></igx-time-picker>
10+
</div>
11+
<div class="group">
12+
<label for="timepicker3">hh tt</label>
13+
<igx-time-picker id="timepicker3" format="hh tt" mode="dropdown" [(ngModel)]="date"></igx-time-picker>
14+
</div>
15+
</div>

‎src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.container{
2+
display: flex;
3+
flex-flow: row;
4+
width: 100%;
5+
align-content:stretch;
6+
}
7+
8+
.group{
9+
padding: 10px;
10+
width: 100%;
11+
}

‎src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-timepicker-sample-8",
5+
styleUrls: ["./timepicker-sample-8.component.scss"],
6+
templateUrl: "./timepicker-sample-8.component.html"
7+
})
8+
export class TimePickerSample8Component {
9+
public date: Date;
10+
constructor() {
11+
this.date = new Date();
12+
this.date.setHours(19);
13+
this.date.setMinutes(5);
14+
}
15+
}

0 commit comments

Comments
 (0)