Skip to content

Commit dd92ba4

Browse files
author
Thomas Plessis
committed
Add feature to set date from keyboard input.
Add icon to open the calendar popup.
1 parent b45afd8 commit dd92ba4

File tree

10 files changed

+1895
-1760
lines changed

10 files changed

+1895
-1760
lines changed

‎bundles/ng2-datepicker.umd.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎bundles/ng2-datepicker.umd.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package-lock.json

Lines changed: 1751 additions & 1751 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/public/images/calendar.svg

Lines changed: 2 additions & 0 deletions
Loading

‎src/components/app-home/app-home.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="columns is-multiline">
33
<div class="column is-6 is-offset-3">
44
<div class="datepicker-container">
5-
model value: {{ date }}
5+
model value: {{ form.value | json }}
66
</div>
77
</div>
88
<div class="column is-6 is-offset-3">

‎src/components/app-home/app-home.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {FormBuilder} from "@angular/forms";
1111
export class AppHomeComponent {
1212
date: Date;
1313
options: DatepickerOptions = {
14-
locale: enLocale
14+
locale: frLocale,
15+
displayFormat: 'DD/MM/YYYY'
1516
};
1617

1718
form = this.fb.group({

‎src/ng-datepicker/ng-datepicker.component.html

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,117 @@
11
<div class="ngx-datepicker-container">
2-
<input type="text" *ngIf="!headless" class="ngx-datepicker-input" [(ngModel)]="displayValue" [readonly]="readonly" (click)="toggle()">
2+
<input type="text" *ngIf="!headless" class="ngx-datepicker-input" [(ngModel)]="displayValue" (ngModelChange)="onChange($event)" [readonly]="readonly">
3+
<span class="calendar" (click)="toggle()">
4+
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5+
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
6+
<g>
7+
<g>
8+
<path d="M452,40h-24V0h-40v40H124V0H84v40H60C26.916,40,0,66.916,0,100v352c0,33.084,26.916,60,60,60h392
9+
c33.084,0,60-26.916,60-60V100C512,66.916,485.084,40,452,40z M472,452c0,11.028-8.972,20-20,20H60c-11.028,0-20-8.972-20-20V188
10+
h432V452z M472,148H40v-48c0-11.028,8.972-20,20-20h24v40h40V80h264v40h40V80h24c11.028,0,20,8.972,20,20V148z"/>
11+
</g>
12+
</g>
13+
<g>
14+
<g>
15+
<rect x="76" y="230" width="40" height="40"/>
16+
</g>
17+
</g>
18+
<g>
19+
<g>
20+
<rect x="156" y="230" width="40" height="40"/>
21+
</g>
22+
</g>
23+
<g>
24+
<g>
25+
<rect x="236" y="230" width="40" height="40"/>
26+
</g>
27+
</g>
28+
<g>
29+
<g>
30+
<rect x="316" y="230" width="40" height="40"/>
31+
</g>
32+
</g>
33+
<g>
34+
<g>
35+
<rect x="396" y="230" width="40" height="40"/>
36+
</g>
37+
</g>
38+
<g>
39+
<g>
40+
<rect x="76" y="310" width="40" height="40"/>
41+
</g>
42+
</g>
43+
<g>
44+
<g>
45+
<rect x="156" y="310" width="40" height="40"/>
46+
</g>
47+
</g>
48+
<g>
49+
<g>
50+
<rect x="236" y="310" width="40" height="40"/>
51+
</g>
52+
</g>
53+
<g>
54+
<g>
55+
<rect x="316" y="310" width="40" height="40"/>
56+
</g>
57+
</g>
58+
<g>
59+
<g>
60+
<rect x="76" y="390" width="40" height="40"/>
61+
</g>
62+
</g>
63+
<g>
64+
<g>
65+
<rect x="156" y="390" width="40" height="40"/>
66+
</g>
67+
</g>
68+
<g>
69+
<g>
70+
<rect x="236" y="390" width="40" height="40"/>
71+
</g>
72+
</g>
73+
<g>
74+
<g>
75+
<rect x="316" y="390" width="40" height="40"/>
76+
</g>
77+
</g>
78+
<g>
79+
<g>
80+
<rect x="396" y="310" width="40" height="40"/>
81+
</g>
82+
</g>
83+
<g>
84+
</g>
85+
<g>
86+
</g>
87+
<g>
88+
</g>
89+
<g>
90+
</g>
91+
<g>
92+
</g>
93+
<g>
94+
</g>
95+
<g>
96+
</g>
97+
<g>
98+
</g>
99+
<g>
100+
</g>
101+
<g>
102+
</g>
103+
<g>
104+
</g>
105+
<g>
106+
</g>
107+
<g>
108+
</g>
109+
<g>
110+
</g>
111+
<g>
112+
</g>
113+
</svg>
114+
</span>
3115
<ng-content></ng-content>
4116
<div class="ngx-datepicker-calendar-container ngx-datepicker-position-{{position}}" *ngIf="isOpened">
5117
<div class="topbar-container">

‎src/ng-datepicker/ng-datepicker.component.sass

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@ $color: #1A91EB
2626
.ngx-datepicker-container
2727
position: relative
2828

29+
span.calendar
30+
position: absolute
31+
right: 10px
32+
display: block
33+
bottom: 0
34+
z-index: 2
35+
top: 5px
36+
width: 18px
37+
height: 18px
38+
39+
&:hover
40+
cursor: pointer
41+
2942
.ngx-datepicker-input
3043
padding: 5px 10px
3144
font-size: 14px
@@ -110,7 +123,7 @@ $color: #1A91EB
110123
&.is-selected
111124
background: $color
112125
color: $white
113-
126+
114127
&.is-disabled
115128
cursor: not-allowed
116129
color: $text-secondary

‎src/ng-datepicker/ng-datepicker.component.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,15 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh
142142
}
143143
}
144144

145+
onChange() {
146+
const splittedDate = this.displayValue.split('/');
147+
if (splittedDate.length === 3 && splittedDate[2].length === 4 && splittedDate[1].length === 2 && splittedDate[0].length >= 1) {
148+
this.date = new Date(`${splittedDate[2]}-${splittedDate[1]}-${splittedDate[0]}`);
149+
this.value = new Date(Date.UTC(this.date.getFullYear(), this.date.getMonth(), this.date.getDate()));
150+
this.init();
151+
}
152+
}
153+
145154
setOptions(): void {
146155
const today = new Date(); // this const was added because during my tests, I noticed that at this level this.date is undefined
147156
this.minYear = this.options && this.options.minYear || getYear(today) - 30;
@@ -292,12 +301,13 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh
292301
}
293302

294303
const input = this.elementRef.nativeElement.querySelector('.ngx-datepicker-input');
304+
const calendar = this.elementRef.nativeElement.querySelector('.calendar');
295305

296306
if (input == null) {
297307
return;
298308
}
299309

300-
if (e.target === input || input.contains(<any>e.target)) {
310+
if (e.target === input || e.target === calendar || input.contains(<any>e.target) || calendar.contains(<any>e.target)) {
301311
return;
302312
}
303313

‎webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ module.exports = function (options, webpackOptions) {
3232
rules: [
3333
{ test: /\.html$/, loader: 'html-loader', options: { minimize: true, removeAttributeQuotes: false, caseSensitive: true, customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ], customAttrAssign: [ /\)?\]?=/ ] } },
3434
{ test: /\.json$/, loader: 'json-loader' },
35-
{ test: /\.(jp?g|png|gif)$/, loader: 'file-loader', options: { hash: 'sha512', digest: 'hex', name: 'images/[hash].[ext]' } },
35+
{ test: /\.(jp?g|png|gif|svg)$/, loader: 'file-loader', options: { hash: 'sha512', digest: 'hex', name: 'images/[hash].[ext]' } },
3636
{ test: /\.(eot|woff2?|svg|ttf|otf)([\?]?.*)$/, loader: 'file-loader', options: { hash: 'sha512', digest: 'hex', name: 'fonts/[hash].[ext]' } }
3737
]
3838
},

0 commit comments

Comments
 (0)