Skip to content

Commit 6445c36

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 6445c36

File tree

9 files changed

+577
-1
lines changed

9 files changed

+577
-1
lines changed

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,3 +169,37 @@ <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>
178+
<input matStartDate placeholder="Start date">
179+
<input matEndDate placeholder="End date">
180+
</mat-date-range-input>
181+
<mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
182+
</mat-form-field>
183+
</p>
184+
185+
<p>
186+
<mat-form-field appearance="fill">
187+
<mat-label>Enter a date range</mat-label>
188+
<mat-date-range-input>
189+
<input matStartDate placeholder="Start date">
190+
<input matEndDate placeholder="End date">
191+
</mat-date-range-input>
192+
<mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
193+
</mat-form-field>
194+
</p>
195+
196+
<p>
197+
<mat-form-field appearance="outline">
198+
<mat-label>Enter a date range</mat-label>
199+
<mat-date-range-input>
200+
<input matStartDate placeholder="Start date">
201+
<input matEndDate placeholder="End date">
202+
</mat-date-range-input>
203+
<mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
204+
</mat-form-field>
205+
</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-parts.ts

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Directive, ElementRef, Optional, Self, InjectionToken, Inject} from '@angular/core';
10+
import {
11+
NG_VALUE_ACCESSOR,
12+
NG_VALIDATORS,
13+
ControlValueAccessor,
14+
Validator,
15+
AbstractControl,
16+
ValidationErrors,
17+
NgForm,
18+
FormGroupDirective,
19+
NgControl,
20+
} from '@angular/forms';
21+
import {
22+
CanUpdateErrorState,
23+
CanDisable,
24+
ErrorStateMatcher,
25+
CanDisableCtor,
26+
CanUpdateErrorStateCtor,
27+
mixinErrorState,
28+
mixinDisabled,
29+
} from '@angular/material/core';
30+
import {BooleanInput} from '@angular/cdk/coercion';
31+
32+
/** Parent component that should be wrapped around `MatStartDate` and `MatEndDate`. */
33+
export interface MatDateRangeInputParent {
34+
id: string;
35+
_ariaDescribedBy: string | null;
36+
_ariaLabelledBy: string | null;
37+
_handleChildValueChange: () => void;
38+
}
39+
40+
/**
41+
* Used to provide the date range input wrapper component
42+
* to the parts without circular dependencies.
43+
*/
44+
export const MAT_DATE_RANGE_INPUT_PARENT =
45+
new InjectionToken<MatDateRangeInputParent>('MAT_DATE_RANGE_INPUT_PARENT');
46+
47+
// Boilerplate for applying mixins to MatDateRangeInput.
48+
/** @docs-private */
49+
class MatDateRangeInputPartMixinBase {
50+
constructor(public _defaultErrorStateMatcher: ErrorStateMatcher,
51+
public _parentForm: NgForm,
52+
public _parentFormGroup: FormGroupDirective,
53+
/** @docs-private */
54+
public ngControl: NgControl) {}
55+
}
56+
const _MatDateRangeInputMixinBase: CanDisableCtor &
57+
CanUpdateErrorStateCtor & typeof MatDateRangeInputPartMixinBase =
58+
mixinErrorState(mixinDisabled(MatDateRangeInputPartMixinBase));
59+
60+
@Directive()
61+
abstract class MatDateRangeInputPartBase<D> extends _MatDateRangeInputMixinBase implements
62+
ControlValueAccessor, Validator, CanUpdateErrorState, CanDisable, CanUpdateErrorState {
63+
64+
private _onTouched = () => {};
65+
66+
constructor(
67+
protected _elementRef: ElementRef<HTMLInputElement>,
68+
@Inject(MAT_DATE_RANGE_INPUT_PARENT) public _rangeInput: MatDateRangeInputParent,
69+
defaultErrorStateMatcher: ErrorStateMatcher,
70+
@Optional() parentForm: NgForm,
71+
@Optional() parentFormGroup: FormGroupDirective,
72+
@Optional() @Self() ngControl: NgControl) {
73+
super(defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);
74+
}
75+
76+
/** @docs-private */
77+
writeValue(_value: D | null): void {
78+
// TODO(crisbeto): implement
79+
}
80+
81+
/** @docs-private */
82+
registerOnChange(_fn: () => void): void {
83+
// TODO(crisbeto): implement
84+
}
85+
86+
/** @docs-private */
87+
registerOnTouched(fn: () => void): void {
88+
this._onTouched = fn;
89+
}
90+
91+
/** @docs-private */
92+
setDisabledState(isDisabled: boolean): void {
93+
this.disabled = isDisabled;
94+
}
95+
96+
/** @docs-private */
97+
validate(_control: AbstractControl): ValidationErrors | null {
98+
// TODO(crisbeto): implement
99+
return null;
100+
}
101+
102+
/** @docs-private */
103+
registerOnValidatorChange(_fn: () => void): void {
104+
// TODO(crisbeto): implement
105+
}
106+
107+
isEmpty(): boolean {
108+
// TODO(crisbeto): should look at the CVA value.
109+
return this._elementRef.nativeElement.value.length === 0;
110+
}
111+
112+
focus(): void {
113+
this._elementRef.nativeElement.focus();
114+
}
115+
116+
_handleBlur() {
117+
this._onTouched();
118+
}
119+
120+
static ngAcceptInputType_disabled: BooleanInput;
121+
}
122+
123+
124+
/** Input for entering the start date in a `mat-date-range-input`. */
125+
@Directive({
126+
selector: 'input[matStartDate]',
127+
inputs: ['disabled'],
128+
host: {
129+
'[id]': '_rangeInput.id',
130+
'[attr.aria-labelledby]': '_rangeInput._ariaLabelledBy',
131+
'[attr.aria-describedby]': '_rangeInput._ariaDescribedBy',
132+
'class': 'mat-date-range-input-inner',
133+
'type': 'text',
134+
'(blur)': '_handleBlur()',
135+
'(input)': '_rangeInput._handleChildValueChange()'
136+
},
137+
providers: [
138+
{provide: NG_VALUE_ACCESSOR, useExisting: MatStartDate, multi: true},
139+
{provide: NG_VALIDATORS, useExisting: MatStartDate, multi: true}
140+
]
141+
})
142+
export class MatStartDate<D> extends MatDateRangeInputPartBase<D> {
143+
getMirrorValue(): string {
144+
const element = this._elementRef.nativeElement;
145+
const value = element.value;
146+
return value.length > 0 ? value : element.placeholder;
147+
}
148+
149+
static ngAcceptInputType_disabled: BooleanInput;
150+
}
151+
152+
153+
/** Input for entering the end date in a `mat-date-range-input`. */
154+
@Directive({
155+
selector: 'input[matEndDate]',
156+
inputs: ['disabled'],
157+
host: {
158+
'class': 'mat-date-range-input-inner',
159+
'[attr.aria-labelledby]': '_rangeInput._ariaLabelledBy',
160+
'[attr.aria-describedby]': '_rangeInput._ariaDescribedBy',
161+
'type': 'text',
162+
'(blur)': '_handleBlur()'
163+
},
164+
providers: [
165+
{provide: NG_VALUE_ACCESSOR, useExisting: MatEndDate, multi: true},
166+
{provide: NG_VALIDATORS, useExisting: MatEndDate, multi: true}
167+
]
168+
})
169+
export class MatEndDate<D> extends MatDateRangeInputPartBase<D> {
170+
static ngAcceptInputType_disabled: BooleanInput;
171+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div
2+
class="mat-date-range-input-container"
3+
cdkMonitorSubtreeFocus
4+
(cdkFocusChange)="focused = $event !== null">
5+
<div class="mat-date-range-input-start-wrapper">
6+
<ng-content select="input[matStartDate]"></ng-content>
7+
<span
8+
class="mat-date-range-input-mirror"
9+
aria-hidden="true">{{_getInputMirrorValue()}}</span>
10+
</div>
11+
12+
<span class="mat-date-range-input-separator">{{separator}}</span>
13+
14+
<div class="mat-date-range-input-end-wrapper">
15+
<ng-content select="input[matEndDate]"></ng-content>
16+
</div>
17+
</div>
18+

‎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)