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.

Author: crisbeto

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

@@ -169,3 +169,28 @@ <h2>Datepicker with custom header extending the default header</h2>
     <mat-datepicker #customHeaderNgContentPicker [calendarHeaderComponent]="customHeaderNgContent"></mat-datepicker>
   </mat-form-field>
 </p>
+
+<h2>Range picker</h2>
+<p>
+  <mat-form-field>
+    <mat-label>Enter a date range</mat-label>
+    <mat-date-range-input startPlaceholder="Start date" endPlaceholder="End date"></mat-date-range-input>
+    <mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
+  </mat-form-field>
+</p>
+
+<p>
+  <mat-form-field appearance="fill">
+    <mat-label>Enter a date range</mat-label>
+    <mat-date-range-input startPlaceholder="Start date" endPlaceholder="End date"></mat-date-range-input>
+    <mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
+  </mat-form-field>
+</p>
+
+<p>
+  <mat-form-field appearance="outline">
+    <mat-label>Enter a date range</mat-label>
+    <mat-date-range-input startPlaceholder="Start date" endPlaceholder="End date"></mat-date-range-input>
+    <mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
+  </mat-form-field>
+</p>

src/material/datepicker/BUILD.bazel

@@ -19,6 +19,7 @@ ng_module(
     assets = [
         ":datepicker-content.css",
         ":datepicker-toggle.css",
+        ":date-range-input.css",
         ":calendar-body.css",
         ":calendar.css",
     ] + glob(["**/*.html"]),
@@ -71,6 +72,12 @@ sass_binary(
     deps = ["//src/cdk/a11y:a11y_scss_lib"],
 )
 
+sass_binary(
+    name = "date_range_input_scss",
+    src = "date-range-input.scss",
+    deps = ["//src/material/core:core_scss_lib"],
+)
+
 ng_test_library(
     name = "unit_test_sources",
     srcs = glob(

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

@@ -0,0 +1,34 @@
+<div
+  class="mat-date-range-input-container"
+  cdkMonitorSubtreeFocus
+  (cdkFocusChange)="_handleFocusChange($event)">
+  <div class="mat-date-range-input-start-wrapper">
+    <input
+      class="mat-date-range-input-inner"
+      [placeholder]="startPlaceholder"
+      [disabled]="disabled"
+      [id]="id"
+      [attr.aria-labelledby]="_ariaLabelledBy"
+      [attr.aria-describedby]="_ariaDescribedBy"
+      [attr.aria-required]="required || null"
+      (input)="_noopInputHandler()"
+      #start>
+    <span
+      class="mat-date-range-input-mirror"
+      aria-hidden="true">{{_getInputMirrorValue(start)}}</span>
+  </div>
+
+  <span class="mat-date-range-input-separator">{{separator}}</span>
+
+  <div class="mat-date-range-input-end-wrapper">
+    <input
+      class="mat-date-range-input-inner"
+      [placeholder]="endPlaceholder"
+      [disabled]="disabled"
+      [attr.aria-labelledby]="_ariaLabelledBy"
+      [attr.aria-describedby]="_ariaDescribedBy"
+      [attr.aria-required]="required || null"
+      #end>
+  </div>
+</div>
+

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

@@ -0,0 +1,91 @@
+@import '../core/style/vendor-prefixes';
+
+$mat-date-range-input-separator-spacing: 4px;
+$mat-date-range-input-part-max-width: calc(50% - #{$mat-date-range-input-separator-spacing});
+
+// Host of the date range input.
+.mat-date-range-input {
+  display: block;
+  width: 100%;
+}
+
+// Inner container that wraps around all the content.
+.mat-date-range-input-container {
+  display: flex;
+  align-items: center;
+}
+
+// Text shown between the two inputs.
+.mat-date-range-input-separator {
+  margin: 0 $mat-date-range-input-separator-spacing;
+}
+
+// Underlying input inside the range input.
+.mat-date-range-input-inner {
+  // Reset the input so it's just a transparent rectangle.
+  font: inherit;
+  background: transparent;
+  color: currentColor;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  vertical-align: bottom;
+  text-align: inherit;
+  -webkit-appearance: none;
+  width: 100%;
+
+  // Remove IE's default clear and reveal icons.
+  &::-ms-clear,
+  &::-ms-reveal {
+    display: none;
+  }
+}
+
+// We want the start input to be flush against the separator, no matter how much text it has, but
+// the problem is that inputs have a fixed width. We work around the issue by implementing an
+// auto-resizing input that stretches based on its text, up to a point. It works by having
+// a relatively-positioned wrapper (`.mat-date-range-input-start-wrapper` below) and an absolutely-
+// positioned `input`, as well as a `span` inside the wrapper which mirrors the input's value and
+// placeholder. As the user is typing, the value gets mirrored in the span which causes the wrapper
+// to stretch and the input with it.
+.mat-date-range-input-mirror {
+  // Disable user selection so users don't accidentally copy the text via ctrl + A.
+  @include user-select(none);
+
+  // Hide the element so it doesn't get read out by screen
+  // readers and it doesn't show up behind the input.
+  visibility: hidden;
+
+  // Text inside inputs never wraps so the one in the span shouldn't either.
+  white-space: nowrap;
+  display: inline-block;
+
+  // Prevent the container from collapsing. Make it more
+  // than 1px so the input caret doesn't get clipped.
+  min-width: 2px;
+}
+
+// Wrapper around the start input. Used to facilitate the auto-resizing input.
+.mat-date-range-input-start-wrapper {
+  position: relative;
+  overflow: hidden;
+  max-width: $mat-date-range-input-part-max-width;
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+// Wrapper around the end input that makes sure that it has the proper size.
+.mat-date-range-input-end-wrapper {
+  flex-grow: 1;
+  max-width: $mat-date-range-input-part-max-width;
+}
+
+.mat-form-field-type-mat-date-range-input .mat-form-field-infix {
+  // Bump the default width slightly since it's somewhat cramped with two inputs and a separator.
+  width: 200px;
+}