added test html

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-controls.vue

 <template>
   <h2> control here</h2>
+  <div id="change-time-span-container_demo">
+    <div class="time-span-input-container">
+      <div class="date-range-container">
+        <span>Date range:</span>
+        <div>
+          <div class="usa-form-group">
+            <div
+              id="start-date-hint"
+              class="usa-hint"
+            >
+              mm/dd/yyyy
+            </div>
+            <div
+              class="usa-date-picker usa-date-picker--initialized"
+              data-min-date="1900-01-01"
+              data-max-date="2022-06-14"
+              data-range-date=""
+              data-default-value=""
+            >
+              <input
+                class="usa-input usa-date-picker__internal-input"
+                type="text"
+                maxlength="10"
+                size="10"
+                aria-label="Start date"
+                aria-describedby="start-date-hint"
+                aria-hidden="true"
+                tabindex="-1"
+                style="display: none;"
+              >
+              <div class="usa-date-picker__wrapper">
+                <input
+                  id="start-date"
+                  class="usa-input usa-date-picker__external-input"
+                  type="text"
+                  maxlength="10"
+                  size="10"
+                  name="start-date"
+                  aria-label="Start date"
+                  aria-describedby="start-date-hint"
+                >
+                <button
+                  type="button"
+                  class="usa-date-picker__button"
+                  aria-haspopup="true"
+                  aria-label="Toggle calendar"
+                />
+                <div
+                  class="usa-date-picker__calendar"
+                  role="dialog"
+                  aria-modal="true"
+                  hidden=""
+                />
+                <div
+                  class="usa-sr-only usa-date-picker__status"
+                  role="status"
+                  aria-live="polite"
+                />
+              </div>
+              <div class="usa-date-picker__wrapper">
+                <input
+                  class="usa-input usa-date-picker__internal-input usa-date-picker__external-input"
+                  type="text"
+                  maxlength="10"
+                  size="10"
+                  aria-label="Start date"
+                  aria-describedby="start-date-hint"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  style="display: none;"
+                >
+                <button
+                  type="button"
+                  class="usa-date-picker__button"
+                  aria-haspopup="true"
+                  aria-label="Toggle calendar"
+                />
+                <div
+                  class="usa-date-picker__calendar"
+                  role="dialog"
+                  aria-modal="true"
+                  hidden=""
+                />
+                <div
+                  class="usa-sr-only usa-date-picker__status"
+                  role="status"
+                  aria-live="polite"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="usa-form-group">
+            <div
+              id="end-date-hint"
+              class="usa-hint"
+            >
+              mm/dd/yyyy
+            </div>
+            <div
+              class="usa-date-picker usa-date-picker--initialized"
+              data-min-date="1900-01-01"
+              data-max-date="2022-06-14"
+              data-range-date=""
+              data-default-value=""
+            >
+              <input
+                class="usa-input usa-date-picker__internal-input"
+                type="text"
+                maxlength="10"
+                size="10"
+                aria-label="End date"
+                aria-describedby="end-date-hint"
+                aria-hidden="true"
+                tabindex="-1"
+                style="display: none;"
+              >
+              <div class="usa-date-picker__wrapper">
+                <input
+                  id="end-date"
+                  class="usa-input usa-date-picker__external-input"
+                  type="text"
+                  maxlength="10"
+                  size="10"
+                  name="end-date"
+                  aria-label="End date"
+                  aria-describedby="end-date-hint"
+                >
+                <button
+                  type="button"
+                  class="usa-date-picker__button"
+                  aria-haspopup="true"
+                  aria-label="Toggle calendar"
+                />
+                <div
+                  class="usa-date-picker__calendar"
+                  role="dialog"
+                  aria-modal="true"
+                  hidden=""
+                />
+                <div
+                  class="usa-sr-only usa-date-picker__status"
+                  role="status"
+                  aria-live="polite"
+                />
+              </div>
+              <div class="usa-date-picker__wrapper">
+                <input
+                  class="usa-input usa-date-picker__internal-input usa-date-picker__external-input"
+                  type="text"
+                  maxlength="10"
+                  size="10"
+                  aria-label="End date"
+                  aria-describedby="end-date-hint"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  style="display: none;"
+                >
+                <button
+                  type="button"
+                  class="usa-date-picker__button"
+                  aria-haspopup="true"
+                  aria-label="Toggle calendar"
+                />
+                <div
+                  class="usa-date-picker__calendar"
+                  role="dialog"
+                  aria-modal="true"
+                  hidden=""
+                />
+                <div
+                  class="usa-sr-only usa-date-picker__status"
+                  role="status"
+                  aria-live="polite"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>Or</div>
+      <div class="days-before-today-container">
+        <div class="days-before-container">
+          <label
+            class="usa-label"
+            for="days-before-today"
+          >Days before today: </label><input
+            id="days-before-today"
+            class="usa-input"
+            name="days-before-today"
+            type="text"
+            maxlength="5"
+          >
+        </div>
+      </div>
+    </div>
+    <button
+      class="usa-button"
+      ga-on="click"
+      ga-event-category="TimeSeriesGraph"
+      ga-event-action="timeSpanChange"
+    >
+      Change time span
+    </button>
+  </div>
 </template>
 
 <script>