Skip to content

Commit e7adc0c

Browse files
83068096688306809668
committed
''
1 parent 5d503b1 commit e7adc0c

File tree

3 files changed

+64
-141
lines changed

3 files changed

+64
-141
lines changed

‎angular-10/src/app/component/timepicker/timepicker.component.html‎

Lines changed: 40 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,70 @@
11
<div class="row">
2-
<div class="col-md-6">
3-
<div class="card">
4-
<div class="card-body">
5-
<h4 class="card-title">Timepicker</h4>
6-
<h6 class="card-subtitle">This is basic Timepicker</h6>
7-
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
8-
<pre>Selected time: {{time | json}}</pre>
9-
</div>
10-
</div>
11-
</div>
12-
<div class="col-md-6">
2+
<div class="col-md-6">
133
<div class="card">
144
<div class="card-body">
15-
<h4 class="card-title">Spinners</h4>
16-
<h6 class="card-subtitle">This is Spinners</h6>
17-
<ngb-timepicker [(ngModel)]="time" [spinners]="spinners"></ngb-timepicker>
18-
<button class="m-t-1 m-t-10 btn btn-sm btn-outline-{{spinners ? 'success' : 'danger'}}" (click)="toggleSpinners()">
19-
Spinners - {{spinners ? "ON" : "OFF"}}
20-
</button>
5+
<h4 class="card-title">Seconds</h4>
6+
<h6 class="card-subtitle">This is Seconds with the on off</h6>
7+
<ngb-timepicker [(ngModel)]="time" [seconds]="seconds"></ngb-timepicker>
8+
<button class="btn btn-sm btn-outline-{{seconds ? 'success' : 'danger'}}" (click)="toggleSeconds()">
9+
Seconds - {{seconds ? "ON" : "OFF"}}
10+
</button>
11+
<hr>
12+
<pre>Selected time: {{time | json}}</pre>
2113
</div>
2214
</div>
2315
</div>
2416
<div class="col-md-6">
2517
<div class="card">
2618
<div class="card-body">
27-
<h4 class="card-title">Meridian</h4>
28-
<h6 class="card-subtitle">This is Meridian Timepicker</h6>
29-
<ngb-timepicker [(ngModel)]="time" [meridian]="meridian"></ngb-timepicker>
30-
<button class="btn btn-sm btn-outline-{{meridian ? 'success' : 'danger'}}" (click)="toggleMeridian()">
31-
Meridian - {{meridian ? "ON" : "OFF"}}
32-
</button>
33-
<hr>
19+
<h4 class="card-title">Timepicker</h4>
20+
<h6 class="card-subtitle">This is basic Timepicker</h6>
21+
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker><hr/>
3422
<pre>Selected time: {{time | json}}</pre>
35-
</div>
23+
</div>
3624
</div>
3725
</div>
26+
27+
3828
<div class="col-md-6">
3929
<div class="card">
4030
<div class="card-body">
41-
<h4 class="card-title">Seconds</h4>
42-
<h6 class="card-subtitle">This is Seconds with the on off</h6>
43-
<ngb-timepicker [(ngModel)]="time" [seconds]="seconds"></ngb-timepicker>
44-
<button class="btn btn-sm btn-outline-{{seconds ? 'success' : 'danger'}}" (click)="toggleSeconds()">
45-
Seconds - {{seconds ? "ON" : "OFF"}}
46-
</button>
47-
<hr>
48-
<pre>Selected time: {{time | json}}</pre>
49-
</div>
31+
<h4 class="card-title">Meridian</h4>
32+
<h6 class="card-subtitle">This is Meridian</h6>
33+
<ngb-timepicker [(ngModel)]="time" [meridian]="meridian"></ngb-timepicker><hr>
34+
<button class="btn btn-sm btn-outline-{{meridian ? 'success' : 'danger'}}" (click)="toggleMeridian()">
35+
Meridian - {{meridian ? "ON" : "OFF"}}
36+
</button>
37+
</div>
5038
</div>
5139
</div>
52-
<div class="col-md-12">
40+
<div class="col-md-6">
5341
<div class="card">
5442
<div class="card-body">
55-
<h4 class="card-title">Custom steps</h4>
56-
<h6 class="card-subtitle">This is Custom steps</h6>
57-
<ngb-timepicker [(ngModel)]="time2" [seconds]="true"
58-
[hourStep]="hourStep" [minuteStep]="minuteStep" [secondStep]="secondStep"></ngb-timepicker>
59-
60-
<div class="row">
61-
<div class="col-md-3">
62-
<label for="changeHourStep">Hour Step</label>
63-
<input id="changeHourStep" type="number" class="form-control form-control" [(ngModel)]="hourStep" />
64-
</div>
65-
<div class="col-md-3">
66-
<label for="changeMinuteStep">Minute Step</label>
67-
<input id="changeMinuteStep" type="number" class="form-control form-control" [(ngModel)]="minuteStep" />
68-
</div>
69-
<div class="col-md-3">
70-
<label for="changeSecondStep">Second Step</label>
71-
<input id="changeSecondStep" type="number" class="form-control form-control" [(ngModel)]="secondStep" />
72-
</div>
73-
</div>
74-
75-
<pre class="m-t-20">Selected time: {{time2 | json}}</pre>
43+
<h4 class="card-title">Spinners</h4>
44+
<h6 class="card-subtitle">This is Spinners Timepicker</h6>
45+
<ngb-timepicker [(ngModel)]="time" [spinners]="spinners"></ngb-timepicker><hr>
46+
<button class="m-t-1 btn btn-sm btn-outline-{{spinners ? 'success' : 'danger'}}" (click)="toggleSpinners()">
47+
Spinners - {{spinners ? "ON" : "OFF"}}
48+
</button>
7649
</div>
7750
</div>
7851
</div>
79-
<div class="col-md-12">
52+
<div class="col-md-6">
8053
<div class="card">
8154
<div class="card-body">
8255
<h4 class="card-title">Custom validation</h4>
83-
<h6 class="card-subtitle">Illustrates custom validation, you have to select time between 12:00 and 13:59</h6>
84-
<div class="form-group" [class.has-success]="ctrl.valid" [class.has-danger]="!ctrl.valid">
85-
<ngb-timepicker [(ngModel)]="time3" [formControl]="ctrl" required></ngb-timepicker>
86-
<div class="form-control-feedback">
87-
<div *ngIf="ctrl.valid">Great choice</div>
88-
<div *ngIf="ctrl.errors && ctrl.errors['required']">Select some time during lunchtime</div>
89-
<div *ngIf="ctrl.errors && ctrl.errors['tooLate']">Oh no, it's way too late</div>
90-
<div *ngIf="ctrl.errors && ctrl.errors['tooEarly']">It's a bit too early</div>
56+
<h6 class="card-subtitle">This is Spinners Timepicker</h6>
57+
<div class="form-group">
58+
<ngb-timepicker [formControl]="ctrl" required></ngb-timepicker>
59+
<div *ngIf="ctrl.valid" class="small form-text text-success">Great choice</div>
60+
<div *ngIf="ctrl.errors" class="small form-text text-danger">
61+
<div *ngIf="ctrl.errors['required']">Select some time during lunchtime</div>
62+
<div *ngIf="ctrl.errors['tooLate']">Oh no, it's way too late</div>
63+
<div *ngIf="ctrl.errors['tooEarly']">It's a bit too early</div>
64+
</div>
9165
</div>
92-
</div>
93-
94-
<hr>
95-
<pre>Selected time: {{time3 | json}}</pre>
96-
</div>
97-
</div>
98-
</div>
99-
<div class="col-md-12">
100-
<div class="card">
101-
<div class="card-body">
102-
<h4 class="card-title">Custom time adapter</h4>
103-
<h6 class="card-subtitle">This timepicker uses a custom Time adapter that lets you use your own model implementation. In this example we are converting from and to an ISO string (with the format HH:mm:ss)</h6>
104-
<ngb-timepicker [(ngModel)]="time1"></ngb-timepicker>
105-
<hr>
106-
<pre>Selected time: {{ time1 }}</pre>
10766
</div>
10867
</div>
10968
</div>
69+
11070
</div>

‎angular-10/src/app/component/timepicker/timepicker.component.ts‎

Lines changed: 20 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,45 @@
11
import { Component, Injectable } from '@angular/core';
22
import { NgbTimeStruct, NgbTimeAdapter } from '@ng-bootstrap/ng-bootstrap';
3-
import { FormControl } from '@angular/forms';
4-
5-
@Injectable()
6-
export class NgbTimeStringAdapter extends NgbTimeAdapter<string> {
7-
8-
fromModel(value: string): NgbTimeStruct {
9-
if (!value) {
10-
return null;
11-
}
12-
const split = value.split(':');
13-
return {
14-
hour: parseInt(split[0], 10),
15-
minute: parseInt(split[1], 10),
16-
second: parseInt(split[2], 10)
17-
};
18-
}
19-
20-
toModel(time1: NgbTimeStruct): string {
21-
if (!time1) {
22-
return null;
23-
}
24-
return `${this.pad(time1.hour)}:${this.pad(time1.minute)}:${this.pad(time1.second)}`;
25-
}
26-
27-
private pad(i: number): string {
28-
return i < 10 ? `0${i}` : `${i}`;
29-
}
30-
}
3+
import { FormControl, AbstractControl } from '@angular/forms';
314

5+
326
@Component({
337
selector: 'app-ngbd-timepicker',
34-
templateUrl: './timepicker.component.html',
35-
providers: [{provide: NgbTimeAdapter, useClass: NgbTimeStringAdapter}]
8+
templateUrl: './timepicker.component.html'
9+
3610
})
3711
export class NgbdtimepickerBasicComponent {
38-
time = { hour: 13, minute: 30 };
12+
time: NgbTimeStruct = {hour: 13, minute: 30, second: 30};
3913
meridian = true;
40-
41-
// This is for the seconds
4214
seconds = true;
43-
44-
// This is for the spinners
4515
spinners = true;
4616

47-
// This is for the column step
48-
time2: NgbTimeStruct = { hour: 13, minute: 30, second: 0 };
49-
hourStep = 1;
50-
minuteStep = 15;
51-
secondStep = 30;
17+
toggleMeridian() {
18+
this.meridian = !this.meridian;
19+
}
5220

53-
// last
54-
time1: '13:30:00';
21+
toggleSeconds() {
22+
this.seconds = !this.seconds;
23+
}
24+
25+
toggleSpinners() {
26+
this.spinners = !this.spinners;
27+
}
5528

56-
// This is for the validation
57-
time3;
58-
ctrl = new FormControl('', (control: FormControl) => {
29+
ctrl = new FormControl('', (control: AbstractControl) => {
5930
const value = control.value;
6031

6132
if (!value) {
62-
return null;
33+
return null;
6334
}
6435

6536
if (value.hour < 12) {
66-
return { tooEarly: true };
37+
return {tooEarly: true};
6738
}
6839
if (value.hour > 13) {
69-
return { tooLate: true };
40+
return {tooLate: true};
7041
}
7142

7243
return null;
73-
});
74-
75-
toggleMeridian() {
76-
this.meridian = !this.meridian;
77-
}
78-
79-
toggleSeconds() {
80-
this.seconds = !this.seconds;
81-
}
82-
83-
toggleSpinners() {
84-
this.spinners = !this.spinners;
85-
}
44+
});
8645
}

‎angular-10/src/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<meta name="description" content="" />
99
<meta name="author" content="" />
10+
<link
11+
href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap"
12+
rel="stylesheet"
13+
/>
1014
<title>Nice Admin Angular Template - Angular 10 admin template</title>
1115
<link
1216
rel="icon"

0 commit comments

Comments
 (0)