Skip to content

Commit faa2d99

Browse files
vlio20vlio20
authored
validator using old format (#478)
resolves #405
1 parent b09964c commit faa2d99

14 files changed

+136
-74
lines changed

‎e2e/app.po.ts

+5
Original file line numberDiff line numberDiff line change
@@ -185,4 +185,9 @@ export class DemoPage {
185185
waitUntilPresent(elem: ElementFinder) {
186186
return browser.wait(ExpectedConditions.presenceOf(elem), 5000, 'Element taking too long to appear in the DOM');
187187
}
188+
189+
async setInputValue(input: ElementFinder, val: string): Promise<void> {
190+
await input.clear();
191+
await input.sendKeys(val);
192+
}
188193
}

‎e2e/bugs/format-change-e2e.spec.ts

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import {DemoPage} from '../app.po';
2+
import {browser} from 'protractor';
3+
4+
describe('format changed validation', () => {
5+
let page: DemoPage;
6+
7+
beforeEach(async () => {
8+
page = new DemoPage();
9+
await page.navigateTo();
10+
});
11+
12+
it('should hide validation on date time picker', async () => {
13+
await page.daytimePickerMenu.click();
14+
await page.setInputValue(page.dateFormatInput, 'DD-MM-YYYY');
15+
await page.setInputValue(page.daytimePickerInput, '10-04-2017 09:08:07');
16+
await page.clickOnBody();
17+
browser.sleep(50000);
18+
expect(await page.formatValidationMsg.isPresent()).toBeTruthy();
19+
await page.setInputValue(page.dateFormatInput, 'DD-MM-YYYY HH:mm:ss');
20+
await page.setInputValue(page.daytimePickerInput, '10-04-2017 09:08:07');
21+
await page.clickOnBody();
22+
expect(await page.formatValidationMsg.isPresent()).toBeFalsy();
23+
});
24+
25+
it('should hide validation on date time directive picker', async () => {
26+
await page.dayDirectiveReactiveMenu.click();
27+
await page.setInputValue(page.dateFormatInput, 'DD-MM');
28+
await page.setInputValue(page.dayDirectiveReactiveInput, '10-04-2017');
29+
await page.clickOnBody();
30+
expect(await page.formatValidationMsg.isPresent()).toBeTruthy();
31+
await page.setInputValue(page.dateFormatInput, 'DD-MM-YYYY');
32+
await page.setInputValue(page.dayDirectiveReactiveInput, '10-04-2017');
33+
await page.clickOnBody();
34+
expect(await page.formatValidationMsg.isPresent()).toBeFalsy();
35+
});
36+
37+
it('should hide validation on day picker', async () => {
38+
await page.dayPickerMenu.click();
39+
await page.setInputValue(page.dateFormatInput, 'DD-MM');
40+
await page.setInputValue(page.dayPickerInput, '10-04-2017');
41+
await page.clickOnBody();
42+
expect(await page.formatValidationMsg.isPresent()).toBeTruthy();
43+
await page.setInputValue(page.dateFormatInput, 'DD-MM-YYYY');
44+
await page.setInputValue(page.dayPickerInput, '10-04-2017');
45+
await page.clickOnBody();
46+
expect(await page.formatValidationMsg.isPresent()).toBeFalsy();
47+
});
48+
49+
it('should work on time picker picker', async () => {
50+
await page.timePickerMenu.click();
51+
await page.setInputValue(page.dateFormatInput, 'HH');
52+
await page.setInputValue(page.timePickerInput, '10:04');
53+
await page.clickOnBody();
54+
expect(await page.formatValidationMsg.isPresent()).toBeTruthy();
55+
await page.setInputValue(page.dateFormatInput, 'HH:mm');
56+
await page.timePickerInput.click();
57+
await page.clickOnBody();
58+
expect(await page.formatValidationMsg.isPresent()).toBeFalsy();
59+
});
60+
61+
it('should hide validation on month picker', async () => {
62+
await page.monthDirectiveMenu.click();
63+
await page.setInputValue(page.dateFormatInput, 'MM');
64+
await page.setInputValue(page.monthDirectiveInput, 'Jan');
65+
await page.clickOnBody();
66+
expect(await page.formatValidationMsg.isPresent()).toBeTruthy();
67+
await page.setInputValue(page.dateFormatInput, 'MMM');
68+
await page.setInputValue(page.monthDirectiveInput, 'Jan');
69+
await page.clickOnBody();
70+
expect(await page.formatValidationMsg.isPresent()).toBeFalsy();
71+
});
72+
});

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -18,43 +18,43 @@
1818
[ngSwitch]="mode"
1919
class="dp-popup {{theme}}">
2020
<dp-day-calendar #dayCalendar
21-
*ngSwitchCase="'day'"
2221
(onGoToCurrent)="onGoToCurrent.emit()"
2322
(onLeftNav)="onLeftNavClick($event)"
2423
(onRightNav)="onRightNavClick($event)"
2524
(onSelect)="dateSelected($event, 'day', selectEvent.SELECTION, false)"
25+
*ngSwitchCase="'day'"
2626
[config]="dayCalendarConfig"
2727
[displayDate]="displayDate"
2828
[ngModel]="_selected"
2929
[theme]="theme">
3030
</dp-day-calendar>
3131

3232
<dp-month-calendar #monthCalendar
33-
*ngSwitchCase="'month'"
3433
(onGoToCurrent)="onGoToCurrent.emit()"
3534
(onLeftNav)="onLeftNavClick($event)"
3635
(onRightNav)="onRightNavClick($event)"
3736
(onSelect)="dateSelected($event, 'month', selectEvent.SELECTION, false)"
37+
*ngSwitchCase="'month'"
3838
[config]="dayCalendarConfig"
3939
[displayDate]="displayDate"
4040
[ngModel]="_selected"
4141
[theme]="theme">
4242
</dp-month-calendar>
4343

4444
<dp-time-select #timeSelect
45-
*ngSwitchCase="'time'"
4645
(onChange)="dateSelected($event, 'second', selectEvent.SELECTION, true)"
46+
*ngSwitchCase="'time'"
4747
[config]="timeSelectConfig"
4848
[ngModel]="_selected && _selected[0]"
4949
[theme]="theme">
5050
</dp-time-select>
5151

5252
<dp-day-time-calendar #daytimeCalendar
53-
*ngSwitchCase="'daytime'"
5453
(onChange)="dateSelected($event, 'second', selectEvent.SELECTION, true)"
5554
(onGoToCurrent)="onGoToCurrent.emit()"
5655
(onLeftNav)="onLeftNavClick($event)"
5756
(onRightNav)="onRightNavClick($event)"
57+
*ngSwitchCase="'daytime'"
5858
[config]="dayTimeCalendarConfig"
5959
[displayDate]="displayDate"
6060
[ngModel]="_selected && _selected[0]"

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

+10-19
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,14 @@ export class DatePickerComponent implements OnChanges,
8383
Validator,
8484
OnDestroy {
8585

86+
get openOnFocus(): boolean {
87+
return this.componentConfig.openOnFocus;
88+
}
89+
90+
get openOnClick(): boolean {
91+
return this.componentConfig.openOnClick;
92+
}
93+
8694
get areCalendarsShown(): boolean {
8795
return this._areCalendarsShown;
8896
}
@@ -140,16 +148,7 @@ export class DatePickerComponent implements OnChanges,
140148
}
141149
}
142150

143-
get openOnFocus(): boolean {
144-
return this.componentConfig.openOnFocus;
145-
}
146-
147-
get openOnClick(): boolean {
148-
return this.componentConfig.openOnClick;
149-
}
150-
151151
isInitialized: boolean = false;
152-
153152
@Input() config: IDatePickerConfig;
154153
@Input() mode: CalendarMode = 'day';
155154
@Input() placeholder: string = '';
@@ -160,21 +159,18 @@ export class DatePickerComponent implements OnChanges,
160159
@Input() maxDate: SingleCalendarValue;
161160
@Input() minTime: SingleCalendarValue;
162161
@Input() maxTime: SingleCalendarValue;
163-
164162
@Output() open = new EventEmitter<void>();
165163
@Output() close = new EventEmitter<void>();
166164
@Output() onChange = new EventEmitter<CalendarValue>();
167165
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter();
168166
@Output() onLeftNav: EventEmitter<INavEvent> = new EventEmitter();
169167
@Output() onRightNav: EventEmitter<INavEvent> = new EventEmitter();
170168
@Output() onSelect: EventEmitter<ISelectionEvent> = new EventEmitter();
171-
172169
@ViewChild('container', {static: false}) calendarContainer: ElementRef;
173170
@ViewChild('dayCalendar', {static: false}) dayCalendarRef: DayCalendarComponent;
174171
@ViewChild('monthCalendar', {static: false}) monthCalendarRef: MonthCalendarComponent;
175172
@ViewChild('daytimeCalendar', {static: false}) dayTimeCalendarRef: DayTimeCalendarComponent;
176173
@ViewChild('timeSelect', {static: false}) timeSelectRef: TimeSelectComponent;
177-
178174
componentConfig: IDatePickerConfigInternal;
179175
dayCalendarConfig: IDayCalendarConfig;
180176
dayTimeCalendarConfig: IDayTimeCalendarConfig;
@@ -301,24 +297,18 @@ export class DatePickerComponent implements OnChanges,
301297
minTime: this.minTime,
302298
maxTime: this.maxTime
303299
}, this.componentConfig.format, this.mode);
300+
304301
this.onChangeCallback(this.processOnChangeCallback(this.selected), false);
305302
}
306303

307304
ngOnInit(): void {
308305
this.isInitialized = true;
309306
this.init();
310-
this.initValidators();
311307
}
312308

313309
ngOnChanges(changes: SimpleChanges): void {
314310
if (this.isInitialized) {
315-
const {minDate, maxDate, minTime, maxTime} = changes;
316-
317311
this.init();
318-
319-
if (minDate || maxDate || minTime || maxTime) {
320-
this.initValidators();
321-
}
322312
}
323313
}
324314

@@ -379,6 +369,7 @@ export class DatePickerComponent implements OnChanges,
379369
this.dayCalendarConfig = this.dayPickerService.getDayConfigService(this.componentConfig);
380370
this.dayTimeCalendarConfig = this.dayPickerService.getDayTimeConfigService(this.componentConfig);
381371
this.timeSelectConfig = this.dayPickerService.getTimeConfigService(this.componentConfig);
372+
this.initValidators();
382373
}
383374

384375
inputFocused() {

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

-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,6 @@ export class DatePickerDirective implements OnInit {
150150
@Output() onLeftNav: EventEmitter<INavEvent> = new EventEmitter();
151151
@Output() onRightNav: EventEmitter<INavEvent> = new EventEmitter();
152152
@Output() onSelect: EventEmitter<ISelectionEvent> = new EventEmitter();
153-
154153
datePicker: DatePickerComponent;
155154
api: IDpDayPickerApi;
156155

‎src/app/day-calendar/day-calendar.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@
3939
</div>
4040

4141
<dp-month-calendar
42-
*ngIf="currentCalendarMode === CalendarMode.Month"
4342
(onLeftNav)="onMonthCalendarLeftClick($event)"
4443
(onLeftSecondaryNav)="onMonthCalendarSecondaryLeftClick($event)"
4544
(onNavHeaderBtnClick)="toggleCalendarMode(CalendarMode.Day)"
4645
(onRightNav)="onMonthCalendarRightClick($event)"
4746
(onRightSecondaryNav)="onMonthCalendarSecondaryRightClick($event)"
4847
(onSelect)="monthSelected($event)"
49-
[ngModel]="_selected"
48+
*ngIf="currentCalendarMode === CalendarMode.Month"
5049
[config]="monthCalendarConfig"
5150
[displayDate]="_currentDateView"
51+
[ngModel]="_selected"
5252
[theme]="theme">
5353
</dp-month-calendar>

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

-3
Original file line numberDiff line numberDiff line change
@@ -87,16 +87,13 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
8787
@Input() displayDate: SingleCalendarValue;
8888
@Input() minDate: Moment;
8989
@Input() maxDate: Moment;
90-
9190
@HostBinding('class') @Input() theme: string;
92-
9391
@Output() onSelect: EventEmitter<IDay> = new EventEmitter();
9492
@Output() onMonthSelect: EventEmitter<IMonth> = new EventEmitter();
9593
@Output() onNavHeaderBtnClick: EventEmitter<ECalendarMode> = new EventEmitter();
9694
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter();
9795
@Output() onLeftNav: EventEmitter<INavEvent> = new EventEmitter();
9896
@Output() onRightNav: EventEmitter<INavEvent> = new EventEmitter();
99-
10097
CalendarMode = ECalendarMode;
10198
isInited: boolean = false;
10299
componentConfig: IDayCalendarConfigInternal;

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

-3
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,11 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
7474
@Input() minDate: SingleCalendarValue;
7575
@Input() maxDate: SingleCalendarValue;
7676
@HostBinding('class') @Input() theme: string;
77-
7877
@Output() onChange: EventEmitter<IDate> = new EventEmitter();
7978
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter();
8079
@Output() onLeftNav: EventEmitter<INavEvent> = new EventEmitter();
8180
@Output() onRightNav: EventEmitter<INavEvent> = new EventEmitter();
82-
8381
@ViewChild('dayCalendar', {static: false}) dayCalendarRef: DayCalendarComponent;
84-
8582
isInited: boolean = false;
8683
componentConfig: IDayTimeCalendarConfig;
8784
inputValue: CalendarValue;

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

+11-11
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,13 @@ <h3 class="dp-menu-header">Components</h3>
6262
</div>
6363

6464
<div *ngIf="showDemo"
65-
class="dp-demo-container"
6665
[ngClass]="{'dp-not-top': !isAtTop,
6766
'dp-inline': pickerMode.endsWith('Inline'),
6867
'dp-inline-day': pickerMode == 'dayInline',
6968
'dp-inline-month': pickerMode == 'monthInline',
7069
'dp-inline-time': pickerMode == 'timeInline',
71-
'dp-inline-day-time': pickerMode == 'daytimeInline'}">
70+
'dp-inline-day-time': pickerMode == 'daytimeInline'}"
71+
class="dp-demo-container">
7272

7373
<form #donateForm
7474
action="https://www.paypal.com/cgi-bin/webscr"
@@ -105,15 +105,15 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
105105
(onRightNav)="onRightNav($event)"
106106
(onSelect)="onSelect($event)"
107107
(open)="opened()"
108-
formControlName="datePicker"
109108
[config]="config"
110109
[displayDate]="displayDate"
111110
[maxDate]="validationMaxDate"
112111
[minDate]="validationMinDate"
113112
[mode]="'daytime'"
114-
[placeholder]="placeholder"
113+
[placeholder]="placeholder"s
115114
[required]="required"
116115
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
116+
[formControl]="formGroup.get('datePicker')"
117117
id="daytimePicker"
118118
name="daytimePicker">
119119
</dp-date-picker>
@@ -283,7 +283,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
283283
[placeholder]="placeholder"
284284
[required]="required"
285285
[theme]="material ? 'dp-material dp-main' : 'dp-main'"
286-
formControlName="datePicker"
286+
[formControl]="formGroup.get('datePicker')"
287287
name="datePicker"/>
288288
<div *ngIf="formGroup.get('datePicker').touched" class="dp-validations">
289289
<div *ngIf="formGroup.get('datePicker').hasError('required')"
@@ -521,20 +521,20 @@ <h3 class="dp-options-section">Attribute options</h3>
521521
</span>
522522
<div class="dp-option-playground">
523523
<label>Enabled
524-
<input [(ngModel)]="disabled"
524+
<input (ngModelChange)="toggleDisabled($event)"
525+
[(ngModel)]="disabled"
525526
[value]="false"
526527
id="inputEnabledRadio"
527528
name="disabled"
528-
type="radio"
529-
(ngModelChange)="toggleDisabled($event)">
529+
type="radio">
530530
</label>
531531
<label>Disabled
532-
<input [(ngModel)]="disabled"
532+
<input (ngModelChange)="toggleDisabled($event)"
533+
[(ngModel)]="disabled"
533534
[value]="true"
534535
id="inputDisabledRadio"
535536
name="disabled"
536-
type="radio"
537-
(ngModelChange)="toggleDisabled($event)">
537+
type="radio">
538538
</label>
539539
</div>
540540
</div>

0 commit comments

Comments
 (0)