Skip to content

Commit cc66e6f

Browse files
crisbetocrisbeto
committed
feat(datepicker): set up input for date range picker
Sets up the UI and most of the boilerplate that we'll need for the input that is associated with a date range picker. Doesn't include any interactions with the datepicker itself yet.
1 parent 2ce2dbc commit cc66e6f

File tree

8 files changed

+454
-1
lines changed

8 files changed

+454
-1
lines changed

‎src/dev-app/datepicker/datepicker-demo.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,3 +169,28 @@ <h2>Datepicker with custom header extending the default header</h2>
169169
<mat-datepicker #customHeaderNgContentPicker [calendarHeaderComponent]="customHeaderNgContent"></mat-datepicker>
170170
</mat-form-field>
171171
</p>
172+
173+
<h2>Range picker</h2>
174+
<p>
175+
<mat-form-field>
176+
<mat-label>Enter a date range</mat-label>
177+
<mat-date-range-input startPlaceholder="Start date" endPlaceholder="End date"></mat-date-range-input>
178+
<mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
179+
</mat-form-field>
180+
</p>
181+
182+
<p>
183+
<mat-form-field appearance="fill">
184+
<mat-label>Enter a date range</mat-label>
185+
<mat-date-range-input startPlaceholder="Start date" endPlaceholder="End date"></mat-date-range-input>
186+
<mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
187+
</mat-form-field>
188+
</p>
189+
190+
<p>
191+
<mat-form-field appearance="outline">
192+
<mat-label>Enter a date range</mat-label>
193+
<mat-date-range-input startPlaceholder="Start date" endPlaceholder="End date"></mat-date-range-input>
194+
<mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
195+
</mat-form-field>
196+
</p>

‎src/material/datepicker/BUILD.bazel

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ ng_module(
1919
assets = [
2020
":datepicker-content.css",
2121
":datepicker-toggle.css",
22+
":date-range-input.css",
2223
":calendar-body.css",
2324
":calendar.css",
2425
] + glob(["**/*.html"]),
@@ -71,6 +72,12 @@ sass_binary(
7172
deps = ["//src/cdk/a11y:a11y_scss_lib"],
7273
)
7374

75+
sass_binary(
76+
name = "date_range_input_scss",
77+
src = "date-range-input.scss",
78+
deps = ["//src/material/core:core_scss_lib"],
79+
)
80+
7481
ng_test_library(
7582
name = "unit_test_sources",
7683
srcs = glob(

‎src/material/datepicker/date-range-input.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<div
2+
class="mat-date-range-input-container"
3+
cdkMonitorSubtreeFocus
4+
(cdkFocusChange)="_handleFocusChange($event)">
5+
<div class="mat-date-range-input-start-wrapper">
6+
<input
7+
class="mat-date-range-input-inner"
8+
[placeholder]="startPlaceholder"
9+
[disabled]="disabled"
10+
[id]="id"
11+
[attr.aria-labelledby]="_ariaLabelledBy"
12+
[attr.aria-describedby]="_ariaDescribedBy"
13+
[attr.aria-required]="required || null"
14+
(input)="_noopInputHandler()"
15+
#start>
16+
<span
17+
class="mat-date-range-input-mirror"
18+
aria-hidden="true">{{_getInputMirrorValue(start)}}</span>
19+
</div>
20+
21+
<span class="mat-date-range-input-separator">{{separator}}</span>
22+
23+
<div class="mat-date-range-input-end-wrapper">
24+
<input
25+
class="mat-date-range-input-inner"
26+
[placeholder]="endPlaceholder"
27+
[disabled]="disabled"
28+
[attr.aria-labelledby]="_ariaLabelledBy"
29+
[attr.aria-describedby]="_ariaDescribedBy"
30+
[attr.aria-required]="required || null"
31+
#end>
32+
</div>
33+
</div>
34+

‎src/material/datepicker/date-range-input.scss

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
@import '../core/style/variables';
2+
@import '../core/style/vendor-prefixes';
3+
4+
$mat-date-range-input-separator-spacing: 4px;
5+
$mat-date-range-input-part-max-width: calc(50% - #{$mat-date-range-input-separator-spacing});
6+
$mat-date-range-input-placeholder-transition:
7+
color $swift-ease-out-duration $swift-ease-out-duration / 3 $swift-ease-out-timing-function;
8+
9+
// Host of the date range input.
10+
.mat-date-range-input {
11+
display: block;
12+
width: 100%;
13+
}
14+
15+
// Inner container that wraps around all the content.
16+
.mat-date-range-input-container {
17+
display: flex;
18+
align-items: center;
19+
}
20+
21+
// Text shown between the two inputs.
22+
.mat-date-range-input-separator {
23+
margin: 0 $mat-date-range-input-separator-spacing;
24+
transition: $mat-date-range-input-placeholder-transition;
25+
26+
.mat-form-field-hide-placeholder & {
27+
color: transparent;
28+
transition: none;
29+
}
30+
}
31+
32+
// Underlying input inside the range input.
33+
.mat-date-range-input-inner {
34+
// Reset the input so it's just a transparent rectangle.
35+
font: inherit;
36+
background: transparent;
37+
color: currentColor;
38+
border: none;
39+
outline: none;
40+
padding: 0;
41+
margin: 0;
42+
vertical-align: bottom;
43+
text-align: inherit;
44+
-webkit-appearance: none;
45+
width: 100%;
46+
47+
// Remove IE's default clear and reveal icons.
48+
&::-ms-clear,
49+
&::-ms-reveal {
50+
display: none;
51+
}
52+
53+
@include input-placeholder {
54+
transition: $mat-date-range-input-placeholder-transition;
55+
}
56+
57+
.mat-form-field-hide-placeholder & {
58+
@include input-placeholder {
59+
color: transparent !important;
60+
-webkit-text-fill-color: transparent;
61+
transition: none;
62+
}
63+
}
64+
}
65+
66+
// We want the start input to be flush against the separator, no matter how much text it has, but
67+
// the problem is that inputs have a fixed width. We work around the issue by implementing an
68+
// auto-resizing input that stretches based on its text, up to a point. It works by having
69+
// a relatively-positioned wrapper (`.mat-date-range-input-start-wrapper` below) and an absolutely-
70+
// positioned `input`, as well as a `span` inside the wrapper which mirrors the input's value and
71+
// placeholder. As the user is typing, the value gets mirrored in the span which causes the wrapper
72+
// to stretch and the input with it.
73+
.mat-date-range-input-mirror {
74+
// Disable user selection so users don't accidentally copy the text via ctrl + A.
75+
@include user-select(none);
76+
77+
// Hide the element so it doesn't get read out by screen
78+
// readers and it doesn't show up behind the input.
79+
visibility: hidden;
80+
81+
// Text inside inputs never wraps so the one in the span shouldn't either.
82+
white-space: nowrap;
83+
display: inline-block;
84+
85+
// Prevent the container from collapsing. Make it more
86+
// than 1px so the input caret doesn't get clipped.
87+
min-width: 2px;
88+
}
89+
90+
// Wrapper around the start input. Used to facilitate the auto-resizing input.
91+
.mat-date-range-input-start-wrapper {
92+
position: relative;
93+
overflow: hidden;
94+
max-width: $mat-date-range-input-part-max-width;
95+
96+
input {
97+
position: absolute;
98+
top: 0;
99+
left: 0;
100+
}
101+
}
102+
103+
// Wrapper around the end input that makes sure that it has the proper size.
104+
.mat-date-range-input-end-wrapper {
105+
flex-grow: 1;
106+
max-width: $mat-date-range-input-part-max-width;
107+
}
108+
109+
.mat-form-field-type-mat-date-range-input .mat-form-field-infix {
110+
// Bump the default width slightly since it's somewhat cramped with two inputs and a separator.
111+
width: 200px;
112+
}

0 commit comments

Comments
 (0)