Skip to content

Commit 3a05349

Browse files
sk8knutsk8knut
authored
visual(docs): datepicker and timezone examples (#DS-2888) (koobiq#294)
1 parent b4e92b4 commit 3a05349

File tree

11 files changed

+121
-106
lines changed

11 files changed

+121
-106
lines changed

‎packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
.docs-example__datepicker-minimax .kbq-form-field-type-datepicker {
2-
width: 140px;
1+
.docs-example__datepicker-and-timepicker .kbq-form-field-type-datepicker,
2+
.docs-example__datepicker-and-timepicker .kbq-form-field-type-timepicker {
3+
width: 136px;
34
}

‎packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.html

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
1-
<div class="kbq-form-vertical">
2-
<label class="kbq-form__label">Время выпуска пакета</label>
3-
<div class="kbq-form__row">
4-
<div>
5-
<kbq-form-field
6-
class="layout-margin-right-s"
7-
(click)="datepicker.toggle()"
8-
>
9-
<input
10-
[kbqDatepicker]="datepicker"
11-
[ngModel]="selectedDateTime"
12-
/>
13-
<i
14-
kbq-icon="mc-calendar_16"
15-
kbqSuffix
16-
></i>
17-
<kbq-datepicker #datepicker />
18-
</kbq-form-field>
1+
<div class="docs-example__datepicker-and-timepicker">
2+
<div class="kbq-form-vertical">
3+
<label class="kbq-form__label">Время выпуска пакета</label>
4+
<div class="kbq-form__row">
5+
<div>
6+
<kbq-form-field
7+
class="layout-margin-right-s"
8+
(click)="datepicker.toggle()"
9+
>
10+
<input
11+
[kbqDatepicker]="datepicker"
12+
[ngModel]="selectedDateTime"
13+
/>
14+
<i
15+
kbq-icon="mc-calendar_16"
16+
kbqSuffix
17+
></i>
18+
<kbq-datepicker #datepicker />
19+
</kbq-form-field>
1920

20-
<kbq-form-field>
21-
<i
22-
kbq-icon="mc-clock_16"
23-
kbqPrefix
24-
></i>
25-
<input
26-
kbqTimepicker
27-
[ngModel]="selectedDateTime"
28-
/>
29-
</kbq-form-field>
21+
<kbq-form-field>
22+
<i
23+
kbq-icon="mc-clock_16"
24+
kbqPrefix
25+
></i>
26+
<input
27+
kbqTimepicker
28+
[ngModel]="selectedDateTime"
29+
/>
30+
</kbq-form-field>
31+
</div>
3032
</div>
3133
</div>
3234
</div>

‎packages/docs-examples/components/datepicker/datepicker-inactive/datepicker-inactive-example.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.docs-example__datepicker-inactive .kbq-form-field-type-datepicker {
2-
width: 140px;
2+
width: 136px;
33
}

‎packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.docs-example__datepicker-minimax .kbq-form-field-type-datepicker {
2-
width: 140px;
2+
width: 136px;
33
}

‎packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.html

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
<div class="docs-example__datepicker-minimax kbq-form-vertical">
2-
<div class="kbq-form__row">
3-
<label class="kbq-form__label">Выберите дату от 14 декабря 2023 до 25 августа 2024</label>
4-
<kbq-form-field
5-
#tooltip="kbqWarningTooltip"
6-
[kbqWarningTooltip]="'Только цифры'"
7-
(click)="datepicker.toggle()"
8-
>
9-
<input
10-
[kbqDatepicker]="datepicker"
11-
[kbqValidationTooltip]="tooltip"
12-
[max]="maxDate"
13-
[min]="minDate"
14-
/>
15-
<i
16-
kbq-icon="mc-calendar_16"
17-
kbqSuffix
18-
></i>
19-
<kbq-datepicker
20-
#datepicker
21-
[maxDate]="maxDate"
22-
[minDate]="minDate"
23-
/>
24-
</kbq-form-field>
1+
<div class="docs-example__datepicker-minimax">
2+
<div class="kbq-form-vertical">
3+
<div class="kbq-form__row">
4+
<label class="kbq-form__label">Выберите дату от 14 декабря 2023 до 25 августа 2024</label>
5+
<kbq-form-field
6+
#tooltip="kbqWarningTooltip"
7+
[kbqWarningTooltip]="'Только цифры'"
8+
(click)="datepicker.toggle()"
9+
>
10+
<input
11+
[kbqDatepicker]="datepicker"
12+
[kbqValidationTooltip]="tooltip"
13+
[max]="maxDate"
14+
[min]="minDate"
15+
/>
16+
<i
17+
kbq-icon="mc-calendar_16"
18+
kbqSuffix
19+
></i>
20+
<kbq-datepicker
21+
#datepicker
22+
[maxDate]="maxDate"
23+
[minDate]="minDate"
24+
/>
25+
</kbq-form-field>
26+
</div>
2527
</div>
2628
</div>

‎packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
/** No CSS for this example */
1+
.docs-example__datepicker-overview .kbq-form-field-type-datepicker {
2+
width: 136px;
3+
}

‎packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.html

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
<kbq-form-field (click)="datepicker.toggle()">
2-
<input
3-
[kbqDatepicker]="datepicker"
4-
[(ngModel)]="date"
5-
/>
6-
<i
7-
kbq-icon="mc-calendar_16"
8-
kbqSuffix
9-
></i>
10-
<kbq-datepicker #datepicker />
11-
</kbq-form-field>
1+
<div class="docs-example__datepicker-overview">
2+
<kbq-form-field (click)="datepicker.toggle()">
3+
<input
4+
[kbqDatepicker]="datepicker"
5+
[(ngModel)]="date"
6+
/>
7+
<i
8+
kbq-icon="mc-calendar_16"
9+
kbqSuffix
10+
></i>
11+
<kbq-datepicker #datepicker />
12+
</kbq-form-field>
13+
</div>

‎packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.docs-example__datepicker-minimax .kbq-form-field-type-datepicker {
2-
width: 140px;
1+
.docs-example__datepicker-range .kbq-form-field-type-datepicker {
2+
width: 136px;
33
}

‎packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.html

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
<div class="kbq-form-vertical">
2-
<div class="kbq-form__row">
3-
<label class="kbq-form__label">Начало и конец отпуска:</label>
4-
<div>
5-
<kbq-form-field
6-
class="layout-margin-right-s"
7-
(click)="datepicker.toggle()"
8-
>
9-
<input [kbqDatepicker]="datepicker" />
10-
<i
11-
kbq-icon="mc-calendar_16"
12-
kbqSuffix
13-
></i>
14-
<kbq-datepicker #datepicker />
15-
</kbq-form-field>
1+
<div class="docs-example__datepicker-range">
2+
<div class="kbq-form-vertical">
3+
<div class="kbq-form__row">
4+
<label class="kbq-form__label">Начало и конец отпуска:</label>
5+
<div>
6+
<kbq-form-field
7+
class="layout-margin-right-s"
8+
(click)="datepicker.toggle()"
9+
>
10+
<input [kbqDatepicker]="datepicker" />
11+
<i
12+
kbq-icon="mc-calendar_16"
13+
kbqSuffix
14+
></i>
15+
<kbq-datepicker #datepicker />
16+
</kbq-form-field>
1617

17-
<kbq-form-field (click)="datepicker2.toggle()">
18-
<input [kbqDatepicker]="datepicker2" />
19-
<i
20-
kbq-icon="mc-calendar_16"
21-
kbqSuffix
22-
></i>
23-
<kbq-datepicker #datepicker2 />
24-
</kbq-form-field>
18+
<kbq-form-field (click)="datepicker2.toggle()">
19+
<input [kbqDatepicker]="datepicker2" />
20+
<i
21+
kbq-icon="mc-calendar_16"
22+
kbqSuffix
23+
></i>
24+
<kbq-datepicker #datepicker2 />
25+
</kbq-form-field>
26+
</div>
2527
</div>
2628
</div>
2729
</div>

‎packages/docs-examples/components/datepicker/datepicker-required/datepicker-required-example.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
/** No CSS for this example */
1+
.docs-example__datepicker-required .kbq-form-field-type-datepicker {
2+
width: 136px;
3+
}

0 commit comments

Comments
 (0)