Skip to content

Commit 984aab8

Browse files
authored
fixing displayDate on the directive resolves - #254 (#262)
* fixing displayDate on the directive resolves - #254 * fixing ts error * fixing e2e run
1 parent 7b3a62a commit 984aab8

11 files changed

+48
-32
lines changed

CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file.
1414
- Stop using getters in template ([3858dde](https://github.com/vlio20/angular-datepicker/commit/3858dde)) closes [#239](https://github.com/vlio20/angular-datepicker/issues/239)
1515

1616
### Bug Fixed
17+
- `displayDate` on the directive bug fix ([???](https://github.com/vlio20/angular-datepicker/commit/ad98d1b)) closes [#254](https://github.com/vlio20/angular-datepicker/issues/254)
1718
- `max`/`min` date support for strings ([ad98d1b](https://github.com/vlio20/angular-datepicker/commit/ad98d1b)) closes [#250](https://github.com/vlio20/angular-datepicker/issues/250)
1819
- `value.split` is not a function bug fix ([38f6ce2](https://github.com/vlio20/angular-datepicker/commit/38f6ce2)) closes [#225](https://github.com/vlio20/angular-datepicker/issues/245)
1920
- Add outputs of each component to docs ([9ee8035](https://github.com/vlio20/angular-datepicker/commit/9ee8035)) closes [#224](https://github.com/vlio20/angular-datepicker/issues/224)

README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Put the dp-date-picker component wherever you need it.
3838
| Name | Type | Default | Applies To | Description |
3939
|----------------------|:-----------------------------------:|:------------------:|:-------------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
4040
| mode | `"day"\|"month"\|"time"\|"daytime"` | `"day"` | All | The mode of the calender which will be displayed in the picker |
41-
| displayDate | `Moment\|String` | current date | `day\|month\|daytime` | Indicates on what date to open the calendar |
41+
| displayDate | `Moment\|String` | current date | `day\|month\|daytime` | Indicates on what date to open the calendar on |
4242
| disabled | `Boolean` | `false` | All | If set to true the input would be disabled |
4343
| placeholder | `String` | `""` | All | The date-picker input placeholder |
4444
| required | `Boolean` | `undefined` | All | This is a validation rule, if there won't be any selected date then the containing form will be invalid. |

protractor.conf.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports.config = {
1313
capabilities: {
1414
browserName: 'chrome',
1515
shardTestFiles: headless,
16-
maxInstances: headless ? 4 : 1,
16+
maxInstances: headless ? 3 : 1,
1717
chromeOptions: {
1818
args: headless ? [
1919
'--headless',

src/app/common/models/calendar.model.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import {Moment} from 'moment';
2+
import {SingleCalendarValue} from '../types/single-calendar-value';
23

34
export interface ICalendar {
45
locale?: string;
5-
min?: Moment | string;
6+
min?: SingleCalendarValue;
67
max?: Moment | string;
78
}
89

Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import {Moment} from 'moment';
22

3-
export type SingleCalendarValue = Moment | string;
3+
export type SingleCalendarValue = Moment | string;

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@ export class DatePickerComponent implements OnChanges,
8282
@Input() disabled: boolean = false;
8383
@Input() displayDate: SingleCalendarValue;
8484
@HostBinding('class') @Input() theme: string;
85-
@Input() minDate: Moment | string;
86-
@Input() maxDate: Moment | string;
87-
@Input() minTime: Moment | string;
88-
@Input() maxTime: Moment | string;
85+
@Input() minDate: SingleCalendarValue;
86+
@Input() maxDate: SingleCalendarValue;
87+
@Input() minTime: SingleCalendarValue;
88+
@Input() maxTime: SingleCalendarValue;
8989

9090
@Output() open = new EventEmitter<void>();
9191
@Output() close = new EventEmitter<void>();

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

+27-15
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
import {NgControl} from '@angular/forms';
1919
import {Moment} from 'moment';
2020
import {CalendarValue} from '../common/types/calendar-value';
21+
import {SingleCalendarValue} from '../common/types/single-calendar-value';
2122

2223
@Directive({
2324
exportAs: 'dpDayPicker',
@@ -29,10 +30,11 @@ export class DatePickerDirective implements OnInit {
2930
private _attachTo: ElementRef | string;
3031
private _theme: string;
3132
private _mode: CalendarMode = 'day';
32-
private _minDate: Moment | string;
33-
private _maxDate: Moment | string;
34-
private _minTime: Moment | string;
35-
private _maxTime: Moment | string;
33+
private _minDate: SingleCalendarValue;
34+
private _maxDate: SingleCalendarValue;
35+
private _minTime: SingleCalendarValue;
36+
private _maxTime: SingleCalendarValue;
37+
private _displayDate: SingleCalendarValue;
3638

3739
get config(): IDatePickerDirectiveConfig {
3840
return this._config;
@@ -75,58 +77,67 @@ export class DatePickerDirective implements OnInit {
7577
}
7678
}
7779

78-
@Input() set minDate(minDate: Moment | string) {
80+
@Input() set minDate(minDate: SingleCalendarValue) {
7981
this._minDate = minDate;
8082
if (this.datePicker) {
8183
this.datePicker.minDate = minDate;
8284
this.datePicker.ngOnInit();
8385
}
8486
}
8587

86-
get minDate(): Moment | string {
88+
get minDate(): SingleCalendarValue {
8789
return this._minDate;
8890
}
8991

90-
@Input() set maxDate(maxDate: Moment | string) {
92+
@Input() set maxDate(maxDate: SingleCalendarValue) {
9193
this._maxDate = maxDate;
9294
if (this.datePicker) {
9395
this.datePicker.maxDate = maxDate;
9496
this.datePicker.ngOnInit();
9597
}
9698
}
9799

98-
get maxDate(): Moment | string {
100+
get maxDate(): SingleCalendarValue {
99101
return this._maxDate;
100102
}
101103

102-
@Input() set minTime(minTime: Moment | string) {
104+
@Input() set minTime(minTime: SingleCalendarValue) {
103105
this._minTime = minTime;
104106
if (this.datePicker) {
105107
this.datePicker.minTime = minTime;
106108
this.datePicker.ngOnInit();
107109
}
108110
}
109111

110-
get minTime(): Moment | string {
112+
get minTime(): SingleCalendarValue {
111113
return this._minTime;
112114
}
113115

114-
@Input() set maxTime(maxTime: Moment | string) {
116+
@Input() set maxTime(maxTime: SingleCalendarValue) {
115117
this._maxTime = maxTime;
116118
if (this.datePicker) {
117119
this.datePicker.maxTime = maxTime;
118120
this.datePicker.ngOnInit();
119121
}
120122
}
121123

124+
get maxTime(): SingleCalendarValue {
125+
return this._maxTime;
126+
}
127+
128+
get displayDate(): SingleCalendarValue {
129+
return this._displayDate;
130+
}
131+
132+
@Input() set displayDate(displayDate: SingleCalendarValue) {
133+
this._displayDate = displayDate;
134+
this.updateDatepickerConfig();
135+
}
136+
122137
@Output() open = new EventEmitter<void>();
123138
@Output() close = new EventEmitter<void>();
124139
@Output() onChange = new EventEmitter<CalendarValue>();
125140

126-
get maxTime(): Moment | string {
127-
return this._maxTime;
128-
}
129-
130141
public datePicker: DatePickerComponent;
131142
public api: IDpDayPickerApi;
132143

@@ -211,6 +222,7 @@ export class DatePickerDirective implements OnInit {
211222
this.datePicker.minTime = this.minTime;
212223
this.datePicker.maxTime = this.maxTime;
213224
this.datePicker.mode = this.mode || 'day';
225+
this.datePicker.displayDate = this.displayDate;
214226
this.datePicker.config = this.config;
215227
this.datePicker.open = this.open;
216228
this.datePicker.close = this.close;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
5555

5656
@Input() config: IDayTimeCalendarConfig;
5757
@Input() displayDate: SingleCalendarValue;
58-
@Input() minDate: Moment | string;
59-
@Input() maxDate: Moment | string;
58+
@Input() minDate: SingleCalendarValue;
59+
@Input() maxDate: SingleCalendarValue;
6060
@HostBinding('class') @Input() theme: string;
6161

6262
@Output() onChange: EventEmitter<IDate> = new EventEmitter();

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

+1
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,7 @@ <h3 class="dp-options-section">Attribute options</h3>
525525
<dp-date-picker id="displayDate"
526526
theme="dp-material"
527527
[(ngModel)]="displayDate"
528+
[displayDate]="displayDate"
528529
mode="day"
529530
placeholder="Select a display date">
530531
</dp-date-picker>

src/app/demo/demo/demo.component.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,19 @@ import * as moment from 'moment';
88
import {Moment} from 'moment';
99
import {GaService} from '../services/ga/ga.service';
1010
import {ECalendarValue} from '../../common/types/calendar-value-enum';
11+
import {SingleCalendarValue} from '../../common/types/single-calendar-value';
1112

1213
const GLOBAL_OPTION_KEYS = [
1314
'theme',
1415
'locale',
15-
'returnedValueType'
16+
'returnedValueType',
17+
'displayDate'
1618
];
1719
const PICKER_OPTION_KEYS = [
1820
'apiclose',
1921
'apiopen',
2022
'appendTo',
2123
'disabled',
22-
'displayDate',
2324
'disableKeypress',
2425
'drops',
2526
'format',
@@ -140,7 +141,7 @@ export class DemoComponent {
140141
validationMinTime: Moment;
141142
validationMaxTime: Moment;
142143
placeholder: string = 'Choose a date...';
143-
displayDate: Moment;
144+
displayDate: Moment | string;
144145
dateTypes: {name: string, value: ECalendarValue}[] = [
145146
{
146147
name: 'Guess',

src/app/time-select/time-select.component.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces
5252

5353
@Input() config: ITimeSelectConfig;
5454
@Input() displayDate: SingleCalendarValue;
55-
@Input() minDate: Moment | string;
56-
@Input() maxDate: Moment | string;
57-
@Input() minTime: Moment | string;
58-
@Input() maxTime: Moment | string;
55+
@Input() minDate: SingleCalendarValue;
56+
@Input() maxDate: SingleCalendarValue;
57+
@Input() minTime: SingleCalendarValue;
58+
@Input() maxTime: SingleCalendarValue;
5959
@HostBinding('class') @Input() theme: string;
6060

6161
@Output() onChange: EventEmitter<IDate> = new EventEmitter();

0 commit comments

Comments
 (0)