Skip to content

Commit 349d48c

Browse files
vlio20vlio20
authored
adding move to - to all components (#333)
* adding move to - to all componentns * trying to fix e2e * trying to fix e2e
1 parent 67673b2 commit 349d48c

9 files changed

+126
-43
lines changed

‎README.md

+20-14
Original file line numberDiff line numberDiff line change
@@ -151,13 +151,14 @@ class MyContainer {
151151
}
152152
}
153153
```
154-
Here is the list of APIs:
155154

156-
| Name | Signature | Description |
157-
|----------------------|:---------------:|------------------------|
158-
| open | `() => void` | Opens the date picker |
159-
| close | `() => void` | Closes the date picker |
155+
Here is the list of APIs:
160156

157+
| Name | Signature | Description |
158+
|----------------------|:----------------------------------:|----------------------------------|
159+
| open | `() => void` | Opens the date picker |
160+
| close | `() => void` | Closes the date picker |
161+
| moveCalendarTo | `(to: Moment \| String) => void` | Moves calendar to specific date |
161162

162163
## Inline - Day Calendar
163164

@@ -220,15 +221,6 @@ Here are the available configurations:
220221
## Inline - Month Calendar
221222

222223
You can use the `<dp-month-calendar>` component to display the calendar widget without an associated input box.
223-
224-
Here is the list of APIs:
225-
226-
| Name | Signature | Description |
227-
|----------------------|:-----------------------------------------------------------------------------------:|----------------------------------|
228-
| moveCalendarsBy | `(current: Moment, amount: number, granularity: moment.unitOfTime.Base) => void` | Moves calendar by given amount |
229-
| moveCalendarTo | `(to: Moment \| String) => void` | Moves calendar to specific date |
230-
| toggleCalendarMode | `(mode: day \| month) => void` | Changes clander mode day/month |
231-
232224
i.e.
233225
```html
234226
<dp-month-calendar [(ngModel)]="selectedDate" [config]="config"></dp-month-calendar>
@@ -273,6 +265,14 @@ Here are the available configurations:
273265
| showMultipleYearsNavigation | `boolean` | `false` | If set to `true` will show buttons to navigate by multiple years (10 by default) |
274266
| multipleYearsNavigateBy | `number` | `10` | Number of years to navigate when showMultipleYearsNavigation is `true` |
275267

268+
Here is the list of APIs:
269+
270+
| Name | Signature | Description |
271+
|----------------------|:-----------------------------------------------------------------------------------:|----------------------------------|
272+
| moveCalendarsBy | `(current: Moment, amount: number, granularity: moment.unitOfTime.Base) => void` | Moves calendar by given amount |
273+
| moveCalendarTo | `(to: Moment \| String) => void` | Moves calendar to specific date |
274+
| toggleCalendarMode | `(mode: day \| month) => void` | Changes clander mode day/month |
275+
276276

277277
## Inline - Time Select
278278

@@ -429,6 +429,12 @@ In order to provide configurations to the date-picker you need to pass it to the
429429

430430
The `IDatePickerDirectiveConfig` is identical to [`IDatePickerConfig`](#configuration) above except that it lacks the `showGoToCurrent` property.
431431

432+
Here is the list of APIs:
433+
434+
| Name | Signature | Description |
435+
|----------------------|:----------------------------------:|----------------------------------|
436+
| moveCalendarTo | `(to: Moment \| String) => void` | Moves calendar to specific date |
437+
432438
## Compatibility
433439

434440
### Internet Explorer 10:

‎e2e/app.po.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,12 @@ export class DemoPage {
4343
showWeekNumbersRadio = $('#showWeekNumbersRadio');
4444
hideWeekNumbersRadio = $('#hideWeekNumbersRadio');
4545
weekNumbers = $$(`${this.popupSelector} .dp-week-number`);
46-
deyCalendarNavHeader = $(`${this.popupSelector} .dp-nav-header`);
4746
dayCalendarNavHeaderBtn = $(`${this.popupSelector} .dp-nav-header-btn`);
4847
deyCalendarMonthNavHeader = $(`${this.popupSelector} dp-month-calendar .dp-nav-header`);
48+
dayTimeCalendarNavHeaderBtnInline = $(`dp-day-time-calendar .dp-nav-header-btn`);
49+
dayCalendarNavHeaderBtnInline = $(`dp-day-calendar .dp-nav-header-btn`);
50+
monthCalendarNavHeaderInline = $(`dp-month-calendar .dp-nav-header`);
51+
navHeader = $(`${this.popupSelector} .dp-nav-header`);
4952
dayCalendarNavMonthHeaderBtn = $(`${this.popupSelector} dp-month-calendar .dp-nav-header-btn`);
5053
calendarDisabledDays = $$(`${this.popupSelector} .dp-calendar-day[disabled]`);
5154
calendarFirstDayOfMonth = $$(`${this.popupSelector} .dp-current-month`).get(0);
@@ -145,6 +148,7 @@ export class DemoPage {
145148
timeDirectiveMenu = $('#timeDirectiveMenu');
146149

147150
openBtn = $('#openBtn');
151+
moveCalendarTo = $('#moveCalendarTo');
148152

149153
navigateTo() {
150154
return browser.get('/');

‎e2e/move-to-date-api-e2e.spec.ts

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {DemoPage} from './app.po';
2+
3+
describe('Move to date api', () => {
4+
5+
let page: DemoPage;
6+
7+
beforeEach(() => {
8+
page = new DemoPage();
9+
page.navigateTo();
10+
});
11+
12+
it('should move to date API on day', () => {
13+
const runner = (menuItem, input, isPicker, cont) => {
14+
menuItem.click();
15+
page.moveCalendarTo.click();
16+
17+
if (isPicker) {
18+
input.click();
19+
}
20+
21+
expect(cont.getText()).toContain('1987');
22+
};
23+
24+
runner(page.dayPickerMenu, page.dayPickerInput, true, page.dayCalendarNavHeaderBtn);
25+
runner(page.dayDirectiveMenu, page.dayDirectiveInput, true, page.dayCalendarNavHeaderBtn);
26+
runner(page.dayInlineMenu, null, false, page.dayCalendarNavHeaderBtnInline);
27+
28+
runner(page.daytimePickerMenu, page.daytimePickerInput, true, page.dayCalendarNavHeaderBtn);
29+
runner(page.daytimeDirectiveMenu, page.daytimeDirectiveInput, true, page.dayCalendarNavHeaderBtn);
30+
runner(page.daytimeInlineMenu, null, false, page.dayTimeCalendarNavHeaderBtnInline);
31+
32+
runner(page.monthPickerMenu, page.monthPickerInput, true, page.navHeader);
33+
runner(page.monthDirectiveMenu, page.monthDirectiveInput, true, page.navHeader);
34+
runner(page.monthInlineMenu, null, false, page.monthCalendarNavHeaderInline);
35+
});
36+
});

‎src/app/date-picker/date-picker.api.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import {SingleCalendarValue} from '../common/types/single-calendar-value';
2+
13
export interface IDpDayPickerApi {
24
open: () => void;
35
close: () => void;
4-
}
6+
moveCalendarTo: (date: SingleCalendarValue) => void;
7+
}

‎src/app/date-picker/date-picker.component.ts

+13-7
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,8 @@ export class DatePickerComponent implements OnChanges,
121121
validateFn: DateValidator;
122122
api: IDpDayPickerApi = {
123123
open: this.showCalendars.bind(this),
124-
close: this.hideCalendar.bind(this)
124+
close: this.hideCalendar.bind(this),
125+
moveCalendarTo: this.moveCalendarTo.bind(this)
125126
};
126127

127128
set selected(selected: Moment[]) {
@@ -189,12 +190,12 @@ export class DatePickerComponent implements OnChanges,
189190
}
190191
}
191192

192-
constructor(private dayPickerService: DatePickerService,
193-
private domHelper: DomHelper,
194-
private elemRef: ElementRef,
195-
private renderer: Renderer,
196-
private utilsService: UtilsService,
197-
public cd: ChangeDetectorRef) {
193+
constructor(private readonly dayPickerService: DatePickerService,
194+
private readonly domHelper: DomHelper,
195+
private readonly elemRef: ElementRef,
196+
private readonly renderer: Renderer,
197+
private readonly utilsService: UtilsService,
198+
public readonly cd: ChangeDetectorRef) {
198199
}
199200

200201
@HostListener('click')
@@ -442,6 +443,11 @@ export class DatePickerComponent implements OnChanges,
442443
}
443444
}
444445

446+
moveCalendarTo(date: SingleCalendarValue) {
447+
const momentDate = this.utilsService.convertToMoment(date, this.componentConfig.format);
448+
this.currentDateView = momentDate;
449+
}
450+
445451
startGlobalListeners() {
446452
this.globalListnersUnlisteners.push(
447453
this.renderer.listen(document, 'keydown', (e: KeyboardEvent) => {

‎src/app/day-time-calendar/day-time-calendar.component.ts

+4
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,10 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
8585
return this._selected;
8686
}
8787

88+
api = {
89+
moveCalendarTo: this.moveCalendarTo.bind(this)
90+
};
91+
8892
constructor(public dayTimeCalendarService: DayTimeCalendarService,
8993
public utilsService: UtilsService,
9094
public cd: ChangeDetectorRef) {

‎src/app/demo/demo/demo.component.html

+27-9
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
8282
<div class="dp-picker-time-picker" *ngIf="pickerMode === 'daytimePicker'">
8383
<dp-date-picker id="daytimePicker"
8484
name="daytimePicker"
85-
#datePicker
85+
#dateComponent
8686
#daytimePicker="ngModel"
8787
[(ngModel)]="date"
8888
(onChange)="log($event)"
@@ -110,6 +110,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
110110
<div class="dp-inline-day-time" *ngIf="pickerMode === 'daytimeInline'">
111111
<dp-day-time-calendar
112112
name="daytimeInline"
113+
#dateComponent
113114
#daytimeInline="ngModel"
114115
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
115116
[(ngModel)]="date"
@@ -135,6 +136,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
135136
<div class="dp-picker-day-time-directive" id="daytimeDirective" *ngIf="pickerMode === 'daytimeDirective'">
136137
<input [dpDayPicker]="config"
137138
name="daytimePickerDir"
139+
#dateComponent="dpDayPicker"
138140
#dateDirectivePicker="dpDayPicker"
139141
#daytimeDirectivePickerModel="ngModel"
140142
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
@@ -159,7 +161,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
159161
<div class="dp-picker-day" *ngIf="pickerMode === 'dayPicker'">
160162
<dp-date-picker id="datePicker"
161163
name="datePicker"
162-
#datePicker
164+
#dateComponent
163165
#datePickerModel="ngModel"
164166
[(ngModel)]="date"
165167
(onChange)="log($event)"
@@ -175,20 +177,21 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
175177
[config]="config"
176178
[theme]="material ? 'dp-material dp-main' : 'dp-main'">
177179
</dp-date-picker>
178-
<div class="dp-validations" *ngIf="datePickerModel.errors">
179-
<div id="requiredValidation" *ngIf="datePickerModel.errors.required">required</div>
180-
<div id="formatValidation" *ngIf="datePickerModel.errors.format">invalid format
180+
<div class="dp-validations">
181+
<div id="requiredValidation" *ngIf="datePickerModel.errors?.required">required</div>
182+
<div id="formatValidation" *ngIf="datePickerModel.errors?.format">invalid format
181183
</div>
182-
<div id="minDateValidation" *ngIf="datePickerModel.errors.minDate">minDate invalid
184+
<div id="minDateValidation" *ngIf="datePickerModel.errors?.minDate">minDate invalid
183185
</div>
184-
<div id="maxDateValidation" *ngIf="datePickerModel.errors.maxDate">maxDate invalid
186+
<div id="maxDateValidation" *ngIf="datePickerModel.errors?.maxDate">maxDate invalid
185187
</div>
186188
</div>
187189
</div>
188190

189191
<div class="dp-inline-day" *ngIf="pickerMode === 'dayInline'">
190192
<dp-day-calendar
191193
name="dayCalendar"
194+
#dateComponent
192195
#dayCalendar="ngModel"
193196
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
194197
[(ngModel)]="dates"
@@ -209,6 +212,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
209212
<div class="dp-picker-day-directive" id="dayDirective" *ngIf="pickerMode === 'dayDirective'">
210213
<input [dpDayPicker]="config"
211214
name="datePicker"
215+
#dateComponent="dpDayPicker"
212216
#dateDirectivePicker="dpDayPicker"
213217
#dateDirectivePickerModel="ngModel"
214218
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
@@ -235,6 +239,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
235239
<form [formGroup]="formGroup">
236240
<input [dpDayPicker]="config"
237241
name="datePicker"
242+
#dateComponent="dpDayPicker"
238243
#dateDirectivePicker="dpDayPicker"
239244
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
240245
formControlName="datePicker"
@@ -263,7 +268,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
263268
<div class="dp-picker-month" *ngIf="pickerMode === 'monthPicker'">
264269
<dp-date-picker id="monthPicker"
265270
name="monthPicker"
266-
#datePicker
271+
#dateComponent
267272
#monthPicker="ngModel"
268273
[(ngModel)]="date"
269274
(onChange)="log($event)"
@@ -296,6 +301,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
296301
<div class="dp-inline-month" *ngIf="pickerMode === 'monthInline'">
297302
<dp-month-calendar
298303
name="monthInline"
304+
#dateComponent
299305
#monthInline="ngModel"
300306
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
301307
[(ngModel)]="dates"
@@ -320,6 +326,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
320326
<div class="dp-picker-month-directive" id="datePickerDirMonth" *ngIf="pickerMode === 'monthDirective'">
321327
<input [dpDayPicker]="config"
322328
name="datePicker"
329+
#dateComponent="dpDayPicker"
323330
#dateDirectivePicker="dpDayPicker"
324331
#dateDirectivePickerModel="ngModel"
325332
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
@@ -342,7 +349,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
342349
<div class="dp-picker-time" *ngIf="pickerMode === 'timePicker'">
343350
<dp-date-picker id="timePicker"
344351
name="timePicker"
345-
#datePicker
352+
#dateComponent
346353
#timePicker="ngModel"
347354
[(ngModel)]="date"
348355
(onChange)="log($event)"
@@ -374,6 +381,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
374381
<div class="dp-inline-time" *ngIf="pickerMode === 'timeInline'">
375382
<dp-time-select
376383
name="timeInline"
384+
#dateComponent
377385
#timeInline="ngModel"
378386
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
379387
[(ngModel)]="date"
@@ -400,6 +408,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
400408
<div class="dp-picker-time-directive" id="timePickerDirDay" *ngIf="pickerMode === 'timeDirective'">
401409
<input [dpDayPicker]="config"
402410
name="timePickerDir"
411+
#dateComponent="dpDayPicker"
403412
#dateDirectivePicker="dpDayPicker"
404413
#timeDirectivePickerModel="ngModel"
405414
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
@@ -1297,6 +1306,15 @@ <h3 class="dp-options-section">API</h3>
12971306
<button (click)="closeCalendar()">Close</button>
12981307
</div>
12991308
</div>
1309+
1310+
<div class="dp-option" *ngIf="isValidConfig('moveCalendarTo')">
1311+
<span class="dp-option-header">
1312+
Move (api.moveCalendarTo('14-01-1987')):
1313+
</span>
1314+
<div class="dp-option-playground">
1315+
<button id="moveCalendarTo" (click)="moveCalendarTo()">Move</button>
1316+
</div>
1317+
</div>
13001318
</div>
13011319
</div>
13021320
</div>

0 commit comments

Comments
 (0)