Skip to content

Commit ec8ed68

Browse files
vlio20vlio20
committed
Revert "updating changelog"
This reverts commit 030eb2f.
1 parent 030eb2f commit ec8ed68

File tree

3 files changed

+293
-21
lines changed

3 files changed

+293
-21
lines changed

‎CHANGELOG.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
# Changelog
22
All notable changes to this project will be documented in this file.
33

4-
# [14.0.1] (2022-07-23)
5-
6-
### Bug Fixes
7-
- Update to Angular 14 ([601](https://github.com/vlio20/angular-datepicker/pull/601)) closes [#595](https://github.com/vlio20/angular-datepicker/issues/595)
8-
94
# [14.0.0] (2022-07-23)
105

116
### Improvements

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

Lines changed: 106 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,107 @@
1-
<div>
2-
<dp-day-time-calendar [(ngModel)]="date" [config]="config">
3-
</dp-day-time-calendar>
1+
<div class="dp-demo-page">
2+
<div class="dp-menu">
3+
<h3 class="dp-menu-header">Components</h3>
4+
<ul>
5+
<li>
6+
<a [routerLink]="['/daytimePicker']" id="daytimePickerMenu" routerLinkActive="dp-active-item">
7+
Day Time Picker
8+
</a>
9+
</li>
10+
<li>
11+
<a [routerLink]="['/daytimeInline']" id="daytimeInlineMenu" routerLinkActive="dp-active-item">
12+
Day Time Picker inline
13+
</a>
14+
</li>
15+
<li>
16+
<a [routerLink]="['/daytimeDirective']" id="daytimeDirectiveMenu" routerLinkActive="dp-active-item">
17+
Day Time Picker directive
18+
</a>
19+
</li>
20+
<li>
21+
<a [routerLink]="['/dayPicker']" id="dayPickerMenu" routerLinkActive="dp-active-item">
22+
Day Picker
23+
</a>
24+
</li>
25+
<li>
26+
<a [routerLink]="['/dayInline']" id="dayInlineMenu" routerLinkActive="dp-active-item">
27+
Day Picker inline
28+
</a>
29+
</li>
30+
<li>
31+
<a [routerLink]="['/dayDirective']" id="dayDirectiveMenu" routerLinkActive="dp-active-item">
32+
Day Picker directive</a>
33+
</li>
34+
<li>
35+
<a [routerLink]="['/monthPicker']" id="monthPickerMenu" routerLinkActive="dp-active-item">
36+
Month Picker
37+
</a>
38+
</li>
39+
<li>
40+
<a [routerLink]="['/monthInline']" id="monthInlineMenu" routerLinkActive="dp-active-item">
41+
Month Picker inline
42+
</a>
43+
</li>
44+
<li>
45+
<a [routerLink]="['/monthDirective']" id="monthDirectiveMenu" routerLinkActive="dp-active-item">
46+
Month Picker directive
47+
</a>
48+
</li>
49+
<li>
50+
<a [routerLink]="['/timePicker']" id="timePickerMenu" routerLinkActive="dp-active-item">
51+
Time Picker
52+
</a>
53+
</li>
54+
<li>
55+
<a [routerLink]="['/timeInline']" id="timeInlineMenu" routerLinkActive="dp-active-item">
56+
Time Picker inline
57+
</a>
58+
</li>
59+
<li>
60+
<a [routerLink]="['/timeDirective']" id="timeDirectiveMenu" routerLinkActive="dp-active-item">
61+
Time Picker directive
62+
</a>
63+
</li>
64+
</ul>
65+
<div class="dp-place-holder"></div>
66+
</div>
67+
68+
<div class="dp-main-content">
69+
70+
<div class="dp-toolbar">
71+
<span class="dp-header">ng2-date-picker</span>
72+
73+
<div class="dp-github-container">
74+
<a aria-label="Star vlio20/angular-datepicker on GitHub"
75+
class="github-button"
76+
data-show-count="true"
77+
data-size="large"
78+
href="https://github.com/vlio20/angular-datepicker">
79+
Star
80+
</a>
81+
</div>
82+
</div>
83+
84+
<div class="dp-component-wrapper">
85+
<div class="dp-donation-bar">
86+
<form #donateForm
87+
action="https://www.paypal.com/cgi-bin/webscr"
88+
class="dp-donate-btn"
89+
method="post"
90+
target="_blank">
91+
<input name="cmd" type="hidden" value="_s-xclick">
92+
<input name="hosted_button_id" type="hidden" value="8ZR2S5XYJ6WLJ">
93+
<input (click)="donateClicked()" alt="PayPal - The safer, easier way to pay online!" border="0"
94+
name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" type="image">
95+
<img alt="" border="0" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1">
96+
</form>
97+
<a href="https://opencollective.com/angular-datepicker#backers" target="_blank"
98+
(click)="becomeABackerClicked()"><img src="https://opencollective.com/angular-datepicker/backers.svg?"></a>
99+
</div>
100+
101+
<div class="dp-router-wrapper">
102+
<router-outlet></router-outlet>
103+
</div>
104+
</div>
105+
</div>
106+
4107
</div>
5-
<p>Ng model : {{ date }}</p>
6-
<p>Config : {{ config | json }}</p>

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

Lines changed: 187 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,198 @@ import {GaService} from './common/services/ga/ga.service';
99
import {ECalendarValue} from '../../../projects/ng2-date-picker/src/lib/common/types/calendar-value-enum';
1010
import {INavEvent} from '../../../projects/ng2-date-picker/src/lib/common/models/navigation-event.model';
1111
import {ISelectionEvent} from '../../../projects/ng2-date-picker/src/lib/common/types/selection-event.model';
12-
import { IDayTimeCalendarConfig } from '../../../projects/ng2-date-picker/src/public-api';
1312

1413
@Component({
1514
selector: 'dp-demo',
1615
templateUrl: './demo.component.html',
1716
styleUrls: ['./demo.component.less']
1817
})
19-
export class DemoComponent {
20-
date = dayjs().format('YYYY-MM-DDTHH:mm:ss');
21-
format = 'YYYY-MM-DDTHH:mm:ss';
22-
config = {
23-
format: this.format,
24-
max: dayjs().format(this.format),
25-
} as IDayTimeCalendarConfig;
26-
27-
onChange(theDate: any) {
28-
this.date = theDate;
18+
export class DemoComponent implements OnInit {
19+
@ViewChild('dateComponent') dateComponent: DatePickerComponent;
20+
@ViewChild('donateForm') donateForm: any;
21+
@ViewChild('dateDirectivePicker') datePickerDirective: DatePickerDirective;
22+
demoFormat = 'DD-MM-YYYY';
23+
pickerMode = 'daytimePicker';
24+
25+
date: Dayjs;
26+
dates: Dayjs[] = [];
27+
material: boolean = true;
28+
required: boolean = false;
29+
disabled: boolean = false;
30+
validationMinDate: Dayjs;
31+
validationMaxDate: Dayjs;
32+
validationMinTime: Dayjs;
33+
validationMaxTime: Dayjs;
34+
placeholder: string = 'Choose a date...';
35+
displayDate: Dayjs | string;
36+
dateTypes: { name: string, value: ECalendarValue }[] = [
37+
{
38+
name: 'Guess',
39+
value: null
40+
},
41+
{
42+
name: ECalendarValue[ECalendarValue.Dayjs],
43+
value: ECalendarValue.Dayjs
44+
},
45+
{
46+
name: ECalendarValue[ECalendarValue.DayjsArr],
47+
value: ECalendarValue.DayjsArr
48+
},
49+
{
50+
name: ECalendarValue[ECalendarValue.String],
51+
value: ECalendarValue.String
52+
},
53+
{
54+
name: ECalendarValue[ECalendarValue.StringArr],
55+
value: ECalendarValue.StringArr
56+
}
57+
];
58+
config: IDatePickerConfig = {
59+
firstDayOfWeek: 'su',
60+
monthFormat: 'MMM, YYYY',
61+
disableKeypress: false,
62+
allowMultiSelect: false,
63+
closeOnSelect: undefined,
64+
closeOnSelectDelay: 100,
65+
openOnFocus: true,
66+
openOnClick: true,
67+
onOpenDelay: 0,
68+
weekDayFormat: 'ddd',
69+
showNearMonthDays: true,
70+
showWeekNumbers: false,
71+
enableMonthSelector: true,
72+
yearFormat: 'YYYY',
73+
showGoToCurrent: true,
74+
dayBtnFormat: 'DD',
75+
monthBtnFormat: 'MMM',
76+
hours12Format: 'hh',
77+
hours24Format: 'HH',
78+
meridiemFormat: 'A',
79+
minutesFormat: 'mm',
80+
minutesInterval: 1,
81+
secondsFormat: 'ss',
82+
secondsInterval: 1,
83+
showSeconds: false,
84+
showTwentyFourHours: false,
85+
timeSeparator: ':',
86+
multipleYearsNavigateBy: 10,
87+
showMultipleYearsNavigation: false,
88+
hideInputContainer: false,
89+
returnedValueType: ECalendarValue.String,
90+
unSelectOnClick: true,
91+
hideOnOutsideClick: true
92+
};
93+
94+
formGroup: UntypedFormGroup;
95+
isAtTop: boolean = true;
96+
97+
constructor(private readonly gaService: GaService) {
98+
}
99+
100+
ngOnInit(): void {
101+
this.formGroup = this.buildForm();
102+
}
103+
104+
@HostListener('document:scroll')
105+
@debounce(100)
106+
updateIsAtTop() {
107+
this.isAtTop = document.body.scrollTop === 0;
108+
}
109+
110+
validatorsChanged() {
111+
this.formGroup.get('datePicker').updateValueAndValidity();
112+
}
113+
114+
openCalendar() {
115+
if (this.dateComponent) {
116+
this.dateComponent.api.open();
117+
} else if (this.datePickerDirective) {
118+
this.datePickerDirective.api.open();
119+
}
120+
}
121+
122+
closeCalendar() {
123+
if (this.dateComponent) {
124+
this.dateComponent.api.close();
125+
} else if (this.datePickerDirective) {
126+
this.datePickerDirective.api.close();
127+
}
128+
}
129+
130+
opened() {
131+
console.info('opened');
132+
}
133+
134+
closed() {
135+
console.info('closed');
136+
}
137+
138+
log(_) {
139+
// console.info(item);
140+
}
141+
142+
onLeftNav(change: INavEvent) {
143+
console.info('left nav', change);
144+
}
145+
146+
onRightNav(change: INavEvent) {
147+
console.info('right nav', change);
148+
}
149+
150+
moveCalendarTo() {
151+
this.dateComponent.api.moveCalendarTo(dayjs('14-01-1987', this.demoFormat));
152+
}
153+
154+
donateClicked() {
155+
this.gaService.emitEvent('donate', 'clicked');
156+
this.donateForm.nativeElement.submit();
157+
}
158+
159+
becomeABackerClicked() {
160+
this.gaService.emitEvent('becomeABacker', 'clicked');
161+
}
162+
163+
onSelect(data: ISelectionEvent) {
164+
console.info(data);
165+
}
166+
167+
private buildForm(): UntypedFormGroup {
168+
return new UntypedFormGroup({
169+
datePicker: new UntypedFormControl({value: this.date, disabled: this.disabled}, [
170+
this.required ? Validators.required : () => undefined,
171+
(control) => {
172+
return this.validationMinDate && this.config &&
173+
dayjs(control.value, this.config.format || DemoComponent.getDefaultFormatByMode(this.pickerMode))
174+
.isBefore(this.validationMinDate)
175+
? {minDate: 'minDate Invalid'} : undefined
176+
},
177+
control => this.validationMaxDate && this.config &&
178+
dayjs(control.value, this.config.format || DemoComponent.getDefaultFormatByMode(this.pickerMode))
179+
.isAfter(this.validationMaxDate)
180+
? {maxDate: 'maxDate Invalid'} : undefined
181+
])
182+
});
183+
}
184+
185+
private static getDefaultFormatByMode(mode: string): string {
186+
switch (mode) {
187+
case 'daytimePicker':
188+
case 'daytimeInline':
189+
case 'daytimeDirective':
190+
return 'DD-MM-YYYY HH:mm:ss';
191+
case 'dayPicker':
192+
case 'dayInline':
193+
case 'dayDirective':
194+
case 'dayDirectiveReactiveMenu':
195+
return 'DD-MM-YYYY';
196+
case 'monthPicker':
197+
case 'monthInline':
198+
case 'monthDirective':
199+
return 'MMM, YYYY';
200+
case 'timePicker':
201+
case 'timeInline':
202+
case 'timeDirective':
203+
return 'HH:mm:ss';
204+
}
29205
}
30206
}

0 commit comments

Comments
 (0)