open-vault/ui/app/templates/components/pricing-metrics-dates.hbs

<form onsubmit={{action "handleQuery"}}>
  <div class="field-body pricing-metrics-date-form" data-test-pricing-metrics-form>
    <div class="field is-narrow">
      <label for="start" class="is-label">From</label>
      <div class="control">
        {{input
          type="string"
          value=start
          name="start"
          class=(concat 'input' (unless startDate ' has-error'))
          autocomplete="off"
          spellcheck="false"
          data-test-start-input="true"
        }}
      </div>
    </div>
    <div class="field is-narrow">
      <label for="end" class="is-label">Through</label>
      <div class="control">
        {{input
          type="string"
          value=end
          name="end"
          class=(concat 'input' (unless endDate ' has-error'))
          autocomplete="off"
          spellcheck="false"
          data-test-end-input="true"
        }}
      </div>
    </div>
    <button disabled={{error}} type="submit" class="button">Query</button>
  </div>
</form>

{{#if error}}
  <FormError>{{error}}</FormError>
{{/if}}
<div class="box is-fullwidth is-shadowless">
  {{#if (and resultStart resultEnd)}}
    <h2 class="title is-4" data-test-pricing-result-dates>
      {{date-format resultStart "MMM dd, yyyy"}} through {{date-format resultEnd "MMM dd, yyyy"}}
    </h2>
  {{/if}}
  {{#if showResultsWarning}}
  <div class="access-information" data-test-results-date-warning>
    <Icon @glyph="info-circle-fill" class="has-text-info"/>
    <p>This data may not reflect your search exactly. This is because Vault will only show data for contiguous blocks of time during which tracking was on.
      <LearnLink @path="/tutorials/vault/usage-metrics">
        Learn more here
      </LearnLink>
    </p>
  </div>
  {{/if}}
</div>