Skip to content

Commit c37f3cd

Browse files
zvonimirfraszvonimirfras
authored
Merge pull request #481 from youda97/date-picker
Add features to datepicker
2 parents 0d2400c + a502d27 commit c37f3cd

File tree

4 files changed

+113
-41
lines changed

4 files changed

+113
-41
lines changed

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

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,18 @@ import { Component, Input } from "@angular/core";
55
template: `
66
<div class="bx--form-item">
77
<div class="bx--date-picker"
8-
[ngClass]= "'bx--date-picker--' + type">
8+
[ngClass]="{
9+
'bx--date-picker--single' : type === 'single',
10+
'bx--date-picker--range' : type === 'range',
11+
'bx--date-picker--light' : theme === 'light',
12+
'bx--skeleton' : skeleton
13+
}">
914
<div class="bx--date-picker-container">
1015
<label [for]="id" class="bx--label">
1116
{{label}}
1217
</label>
13-
<svg *ngIf="type == 'single'"
18+
<div *ngIf="skeleton" class="bx--date-picker__input bx--skeleton"></div>
19+
<svg *ngIf="type == 'single' && !skeleton"
1420
data-date-picker-icon
1521
class="bx--date-picker__icon"
1622
width="14" height="16"
@@ -22,17 +28,23 @@ import { Component, Input } from "@angular/core";
2228
fill-rule="nonzero"/>
2329
</svg>
2430
<input
31+
*ngIf="!skeleton"
2532
autocomplete="off"
2633
type="text"
2734
class="bx--date-picker__input"
2835
[pattern]="pattern"
2936
[placeholder]="placeholder"
3037
data-date-picker-input
3138
[attr.data-input] = "type == 'single' || type == 'range' ? '' : null"
32-
[id]= "id"/>
39+
[id]= "id"
40+
[attr.disabled]="(disabled ? '' : null)"
41+
[attr.data-invalid]="(invalid ? '' : null)"/>
42+
<div *ngIf="invalid" class="bx--form-requirement">
43+
{{invalidText}}
44+
</div>
3345
</div>
3446
35-
<svg *ngIf= "type == 'range' && hasIcon"
47+
<svg *ngIf= "type == 'range' && hasIcon && !skeleton"
3648
data-date-picker-icon
3749
class="bx--date-picker__icon"
3850
width="14" height="16"
@@ -67,4 +79,14 @@ export class DatePickerInput {
6779
@Input() placeholder = "mm/dd/yyyy";
6880

6981
@Input() pattern = "\d{1,2}/\d{1,2}/\d{4}";
82+
83+
@Input() theme: "light" | "dark" = "dark";
84+
85+
@Input() disabled = false;
86+
87+
@Input() invalid = false;
88+
89+
@Input() invalidText: string;
90+
91+
@Input() skeleton = false;
7092
}

‎src/datepicker-input/datepicker-input.stories.ts‎

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

‎src/datepicker/datepicker.component.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
2323
data-date-picker
2424
[attr.data-date-picker-type]= "range ? 'range' : 'single'"
2525
class="bx--date-picker"
26-
[ngClass]= "range ? 'bx--date-picker--range' : 'bx--date-picker--single'">
26+
[ngClass]="{
27+
'bx--date-picker--range' : range,
28+
'bx--date-picker--single' : !range,
29+
'bx--date-picker--light' : theme === 'light',
30+
'bx--skeleton' : skeleton
31+
}">
2732
<div class="bx--date-picker-container">
2833
<ibm-date-picker-input
2934
[label]= "label"
@@ -32,6 +37,10 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
3237
[id]= "id"
3338
[type]= "range ? 'range' : 'single'"
3439
[hasIcon]= "range ? false : true"
40+
[disabled]="disabled"
41+
[invalid]="invalid"
42+
[invalidText]="invalidText"
43+
[skeleton]="skeleton"
3544
(valueChange)="valueChange.emit($event)">
3645
</ibm-date-picker-input>
3746
</div>
@@ -44,6 +53,10 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
4453
[id]= "id + '-rangeInput'"
4554
[type]= "range ? 'range' : 'single'"
4655
[hasIcon]= "range ? true : null"
56+
[disabled]="disabled"
57+
[invalid]="invalid"
58+
[invalidText]="invalidText"
59+
[skeleton]="skeleton"
4760
(valueChange)="valueChange.emit($event)">
4861
</ibm-date-picker-input>
4962
</div>
@@ -80,6 +93,16 @@ export class DatePicker implements OnDestroy {
8093

8194
@Input() value: Array<any>;
8295

96+
@Input() theme: "light" | "dark" = "dark";
97+
98+
@Input() disabled = false;
99+
100+
@Input() invalid = false;
101+
102+
@Input() invalidText: string;
103+
104+
@Input() skeleton = false;
105+
83106
@Output() valueChange: EventEmitter<any> = new EventEmitter();
84107

85108
flatpickrOptions: FlatpickrOptions = {
@@ -141,6 +164,9 @@ export class DatePicker implements OnDestroy {
141164
// add day classes and special case the "today" element based on `this.value`
142165
Array.from(dayContainer).forEach(element => {
143166
element.classList.add("bx--date-picker__day");
167+
if (!this.value) {
168+
return;
169+
}
144170
if (element.classList.contains("today") && this.value.length > 0) {
145171
element.classList.add("no-border");
146172
} else if (element.classList.contains("today") && this.value.length === 0) {

‎src/datepicker/datepicker.stories.ts‎

Lines changed: 60 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { storiesOf, moduleMetadata } from "@storybook/angular";
22
import { action } from "@storybook/addon-actions";
3-
import { withKnobs, array } from "@storybook/addon-knobs/angular";
3+
import { withKnobs, array, select, text, boolean } from "@storybook/addon-knobs/angular";
44
import { DatePickerModule, ExperimentalModule } from "../";
5+
import { DatePickerInputModule } from "./../datepicker-input/datepicker-input.module";
56
import { ExperimentalComponenent } from "../../.storybook/experimental.component";
67

78
storiesOf("Date Picker", module)
@@ -10,41 +11,87 @@ storiesOf("Date Picker", module)
1011
declarations: [ExperimentalComponenent],
1112
imports: [
1213
DatePickerModule,
14+
DatePickerInputModule,
1315
ExperimentalModule
1416
]
1517
})
1618
)
1719
.addDecorator(withKnobs)
20+
.add("Simple", () => ({
21+
template: `
22+
<app-experimental-component></app-experimental-component>
23+
<ibm-date-picker-input
24+
[theme]="theme"
25+
[label]="label"
26+
[placeholder]="placeholder"
27+
[disabled]="disabled"
28+
[invalid]="invalid"
29+
[invalidText]="invalidText">
30+
</ibm-date-picker-input>
31+
`,
32+
props: {
33+
theme: select("Theme", ["dark", "light"], "dark"),
34+
label: text("Label text", "Date Picker Label"),
35+
placeholder: text("Placeholder text", "mm/dd/yyyy"),
36+
invalidText: text("Form validation content", "Invalid date format"),
37+
invalid: boolean("Show form validation", false),
38+
disabled: boolean("Disabled", false)
39+
}
40+
}))
1841
.add("Single", () => ({
1942
template: `
2043
<app-experimental-component></app-experimental-component>
2144
<ibm-date-picker
22-
label="Date Picker Label"
23-
[value]="value"
45+
[label]="label"
46+
[placeholder]="placeholder"
47+
[theme]="theme"
48+
[disabled]="disabled"
49+
[invalid]="invalid"
50+
[invalidText]="invalidText"
2451
(valueChange)="valueChange($event)">
2552
</ibm-date-picker>
2653
`,
2754
props: {
28-
value: array("value", ["01/01/2011"]),
29-
valueChange: action("Date change fired!")
55+
valueChange: action("Date change fired!"),
56+
theme: select("Theme", ["dark", "light"], "dark"),
57+
label: text("Label text", "Date Picker Label"),
58+
placeholder: text("Placeholder text", "mm/dd/yyyy"),
59+
invalidText: text("Form validation content", "Invalid date format"),
60+
invalid: boolean("Show form validation", false),
61+
disabled: boolean("Disabled", false)
3062
}
3163
}))
3264
.add("Range", () => ({
3365
template: `
3466
<app-experimental-component></app-experimental-component>
3567
<ibm-date-picker
36-
label="Date Picker Label"
37-
rangeLabel="Date Picker Label2"
68+
[label]="label"
69+
[rangeLabel]="label"
3870
range="true"
39-
[value]="value"
71+
[placeholder]="placeholder"
72+
[theme]="theme"
73+
[disabled]="disabled"
74+
[invalid]="invalid"
75+
[invalidText]="invalidText"
4076
(valueChange)="valueChange($event)">
4177
</ibm-date-picker>
4278
`,
4379
props: {
44-
value: array("value", [
45-
"01/01/2011",
46-
"01/01/2012"
47-
]),
48-
valueChange: action("Date change fired!")
80+
valueChange: action("Date change fired!"),
81+
theme: select("Theme", ["dark", "light"], "dark"),
82+
label: text("Label text", "Date Picker Label"),
83+
placeholder: text("Placeholder text", "mm/dd/yyyy"),
84+
invalidText: text("Form validation content", "Invalid date format"),
85+
invalid: boolean("Show form validation", false),
86+
disabled: boolean("Disabled", false)
4987
}
88+
}))
89+
.add("Skeleton", () => ({
90+
template: `
91+
<app-experimental-component></app-experimental-component>
92+
<ibm-date-picker
93+
range="true"
94+
skeleton="true">
95+
</ibm-date-picker>
96+
`
5097
}));

0 commit comments

Comments
 (0)