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={{this.start}}
          name="start"
          class={{concat "input" (unless this.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={{this.end}}
          name="end"
          class={{concat "input" (unless this.endDate " has-error")}}
          autocomplete="off"
          spellcheck="false"
          data-test-end-input="true"
        />
      </div>
    </div>
    <button disabled={{this.error}} type="submit" class="button">Query</button>
  </div>
</form>

{{#if this.error}}
  <FormError>{{this.error}}</FormError>
{{/if}}
<div class="box is-fullwidth is-shadowless">
  {{#if (and this.resultStart this.resultEnd)}}
    <h2 class="title is-4" data-test-pricing-result-dates>
      {{date-format this.resultStart "MMM dd, yyyy" dateOnly=true}}
      through
      {{date-format this.resultEnd "MMM dd, yyyy" dateOnly=true}}
    </h2>
  {{/if}}
</div>