Skip to content

Commit e71233a

Browse files
dalelottsdalelotts
committed
feat(app): add configurator functionality to home page
this will show when running `npm start`
1 parent 9ea0a03 commit e71233a

File tree

4 files changed

+141
-88
lines changed

4 files changed

+141
-88
lines changed

‎src/app/app.component.html

+79-60
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,84 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<div class="container">
3-
<h1>Welcome to {{title}}!</h1>
4-
<div class="form-group">
5-
<label for="startView">Start View</label>
6-
<select id="startView" [(ngModel)]="startView">
7-
<option>year</option>
8-
<option>month</option>
9-
<option>day</option>
10-
<option>hour</option>
11-
<option>minute</option>
12-
</select>
13-
<small class="form-text text-muted">Determines the initial view for the calendar.</small>
1+
<div class="row">
2+
<div class="col">
3+
<div class="form-group">
4+
<label for="maxView">Max View:</label>
5+
<select id="maxView" [(ngModel)]="maxView" class="form-control">
6+
<option *ngFor="let view of views" [value]="view" [disabled]="isMaxViewDisabled(view)">{{view}}</option>
7+
</select>
8+
<small class="form-text text-muted"><code>maxView</code> must be &gt;= <code>minView</code> and <code>startView</code></small>
9+
</div>
10+
<div class="form-group">
11+
<label for="minView">Min View:</label>
12+
<select id="minView" [(ngModel)]="minView" class="form-control">
13+
<option *ngFor="let view of views" [value]="view" [disabled]="isMinViewDisabled(view)">{{view}}</option>
14+
</select>
15+
<small class="form-text text-muted"><code>minView</code> must be &lt;= <code>maxView</code> and <code>startView</code></small>
16+
<small class="form-text text-muted"><code>minView</code> determines when selection is triggered. </small>
17+
</div>
18+
<div class="form-group">
19+
<label for="startView">Start View:</label>
20+
<select id="startView" [(ngModel)]="startView" class="form-control" (change)="refresh()">
21+
<option *ngFor="let view of views" [value]="view" [disabled]="isStartViewDisabled(view)">{{view}}</option>
22+
</select>
23+
<small class="form-text text-muted"><code>startView</code> must be between (or equal to) <code>maxView</code> and <code>minView</code></small>
24+
</div>
25+
<div class="form-group">
26+
<label for="minuteStep">Minute step:</label>
27+
<select id="minuteStep" [(ngModel)]="minuteStep" class="form-control">
28+
<option>1</option>
29+
<option>2</option>
30+
<option>3</option>
31+
<option>4</option>
32+
<option>5</option>
33+
<option>6</option>
34+
<option>7</option>
35+
<option>8</option>
36+
<option>9</option>
37+
<option>10</option>
38+
<option>11</option>
39+
<option>12</option>
40+
<option>13</option>
41+
<option>14</option>
42+
<option>15</option>
43+
<option>20</option>
44+
<option>25</option>
45+
<option>30</option>
46+
<option>35</option>
47+
<option>40</option>
48+
<option>45</option>
49+
<option>50</option>
50+
<option>55</option>
51+
<option>57</option>
52+
<option>58</option>
53+
<option>59</option>
54+
</select>
55+
<small class="form-text text-muted"><code>minuteStep</code> has not effect if <code>minView</code> is not set to <code>'minute'</code> </small>
56+
</div>
1457
</div>
1558

16-
<div class="form-group">
17-
<label for="minuteStep">Minute step</label>
18-
<select id="minuteStep" [(ngModel)]="minuteStep">
19-
<option>1</option>
20-
<option>2</option>
21-
<option>3</option>
22-
<option>4</option>
23-
<option>5</option>
24-
<option>6</option>
25-
<option>7</option>
26-
<option>8</option>
27-
<option>9</option>
28-
<option>10</option>
29-
<option>11</option>
30-
<option>12</option>
31-
<option>13</option>
32-
<option>14</option>
33-
<option>15</option>
34-
<option>20</option>
35-
<option>25</option>
36-
<option>30</option>
37-
<option>35</option>
38-
<option>40</option>
39-
<option>45</option>
40-
<option>50</option>
41-
<option>55</option>
42-
<option>57</option>
43-
<option>58</option>
44-
<option>59</option>
45-
</select>
46-
<small class="form-text text-muted">Determines the initial view for the calendar.</small>
59+
<div class="col">
60+
<pre class="bg-light">
61+
<code>
62+
&lt;dl-date-time-picker
63+
maxView=&#x22;{{maxView}}&#x22;
64+
minView=&#x22;{{minView}}&#x22;
65+
startView=&#x22;{{startView}}&#x22;
66+
minuteStep=&#x22;{{minuteStep}}&#x22;
67+
[(ngModel)]="selectedDate"
68+
&gt;
69+
&lt;/dl-date-time-picker&gt;</code>
70+
</pre>
4771
</div>
48-
49-
<div class="dtp-wrapper card">
50-
<dl-date-time-picker
51-
class="en"
52-
[startView]="startView"
53-
[minuteStep]="minuteStep"
54-
[selectFilter]="selectFilter"
55-
[(ngModel)]="selectedDate"
56-
>
57-
</dl-date-time-picker>
58-
</div>
59-
60-
<p>&nbsp;</p>
61-
62-
<div>
63-
Selected Date: {{selectedDate}}
72+
<div class="col mx-3" style="min-width:360px;">
73+
<div class="border" *ngIf="showCalendar">
74+
<dl-date-time-picker
75+
[(maxView)]="maxView"
76+
[(minView)]="minView"
77+
[(startView)]="startView"
78+
[(minuteStep)]="minuteStep"
79+
[(ngModel)]="selectedDate"
80+
(change)="onCustomDateChange($event)"></dl-date-time-picker>
81+
</div>
82+
<p>Selected Date: {{selectedDate}}</p>
6483
</div>
6584
</div>

‎src/app/app.component.spec.ts

-13
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,4 @@ describe('AppComponent', () => {
2323
const app = fixture.debugElement.componentInstance;
2424
expect(app).toBeTruthy();
2525
});
26-
27-
it(`should have as title 'angular-bootstrap-datetimepicker'`, () => {
28-
const fixture = TestBed.createComponent(AppComponent);
29-
const app = fixture.debugElement.componentInstance;
30-
expect(app.title).toEqual('Dale Lotts\' angular bootstrap date & time picker');
31-
});
32-
33-
it('should render title in a h1 tag', () => {
34-
const fixture = TestBed.createComponent(AppComponent);
35-
fixture.detectChanges();
36-
const compiled = fixture.debugElement.nativeElement;
37-
expect(compiled.querySelector('h1').textContent).toContain('Welcome to Dale Lotts\' angular bootstrap date & time picker!');
38-
});
3926
});

‎src/app/app.component.ts

+62-8
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,76 @@
88
*/
99

1010
import {Component} from '@angular/core';
11-
import {DateButton} from '../lib/dl-date-time-picker';
12-
import * as moment from 'moment';
13-
import {unitOfTime} from 'moment';
11+
import {DlDateTimePickerChange} from '../lib/dl-date-time-picker';
1412

1513
@Component({
1614
selector: 'dl-root',
1715
templateUrl: './app.component.html',
1816
styleUrls: ['./app.component.scss']
1917
})
2018
export class AppComponent {
21-
title = 'Dale Lotts\' angular bootstrap date & time picker';
22-
startView = 'day';
19+
20+
maxView = 'year';
21+
minView = 'minute';
2322
minuteStep = 5;
2423
selectedDate: Date;
25-
selectFilter = (dateButton: DateButton, viewName: string) => {
26-
const now = moment().startOf(viewName as unitOfTime.StartOf).valueOf();
27-
return dateButton.value >= now;
24+
showCalendar = true;
25+
startView = 'day';
26+
views = ['minute', 'hour', 'day', 'month', 'year'];
27+
28+
/**
29+
* Sample implementation of a `change` event handler.
30+
* @param event
31+
* The change event.
32+
*/
33+
34+
onCustomDateChange(event: DlDateTimePickerChange<Date>) {
35+
console.log(event.value);
36+
}
37+
38+
/**
39+
* Determines whether or not the specified `minView` option is disabled (valid)
40+
* considering the current `startView` and `maxView` settings.
41+
* @param view
42+
* the target view value.
43+
*/
44+
45+
isMinViewDisabled(view) {
46+
return this.views.indexOf(view) > this.views.indexOf(this.startView)
47+
|| this.views.indexOf(view) > this.views.indexOf(this.maxView);
48+
}
49+
50+
/**
51+
* Determines whether or not the specified `maxView` option is disabled (valid)
52+
* considering the current `startView` and `minView` settings.
53+
* @param view
54+
* the target view value.
55+
*/
56+
57+
isMaxViewDisabled(view) {
58+
return this.views.indexOf(view) < this.views.indexOf(this.startView)
59+
|| this.views.indexOf(view) < this.views.indexOf(this.minView);
60+
}
61+
62+
/**
63+
* Determines whether or not the specified `startView` option is disabled (valid)
64+
* considering the current `minView` and `maxView` settings.
65+
* @param view
66+
* the target view value.
67+
*/
68+
69+
isStartViewDisabled(view) {
70+
return this.views.indexOf(this.minView) > this.views.indexOf(view)
71+
|| this.views.indexOf(this.maxView) < this.views.indexOf(view);
72+
}
73+
74+
/**
75+
* Removes/Adds the picker from the DOM forcing a re-render when
76+
* the `starView` value changes.
77+
*/
78+
79+
refresh() {
80+
this.showCalendar = false;
81+
setTimeout(() => this.showCalendar = true, 100);
2882
}
2983
}

‎src/index.html

-7
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,6 @@
2121
<li class="nav-item active">
2222
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
2323
</li>
24-
<li class="nav-item dropdown">
25-
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
26-
aria-haspopup="true" aria-expanded="false">Examples</a>
27-
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
28-
<a class="dropdown-item" href="/examples/date-range">Date Range</a>
29-
</div>
30-
</li>
3124
</ul>
3225
<ul class="navbar-nav">
3326
<li class="nav-item">

0 commit comments

Comments
 (0)