fab-manager/app/assets/templates/admin/invoices/closePeriodModal.html.erb

<div class="modal-header">
  <h3 class="text-center red" translate>{{ 'invoices.close_accounting_period' }}</h3>
</div>
<div class="modal-body">
  <form name="closePeriodForm" novalidate="novalidate" class="row">
    <div class="form-group col-md-6" ng-class="{'has-error': closePeriodForm.start_at.$dirty && closePeriodForm.start_at.$invalid }">
      <label translate>{{ 'invoices.close_from_date' }}</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        <input type="text"
               class="form-control"
               name="start_at"
               ng-model="period.start_at"
               uib-datepicker-popup="{{datePicker.format}}"
               datepicker-options="datePicker.options"
               is-open="datePicker.startOpened"
               placeholder="{{datePicker.format}}"
               ng-click="openDatePicker($event, 'start')"
               required/>
      </div>
      <span class="help-block" ng-show="closePeriodForm.start_at.$dirty && closePeriodForm.start_at.$error.required" translate>{{ 'invoices.start_date_is_required' }}</span>
    </div>
    <div class="form-group col-md-6" ng-class="{'has-error': closePeriodForm.end_at.$dirty && closePeriodForm.end_at.$invalid }">
      <label translate>{{ 'invoices.close_until_date' }}</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        <input type="text"
               class="form-control"
               name="end_at"
               ng-model="period.end_at"
               uib-datepicker-popup="{{datePicker.format}}"
               datepicker-options="datePicker.options"
               is-open="datePicker.endOpened"
               placeholder="{{datePicker.format}}"
               ng-click="openDatePicker($event, 'end')"
               required/>
      </div>
      <span class="help-block" ng-show="closePeriodForm.end_at.$dirty && closePeriodForm.end_at.$error.required" translate>{{ 'invoices.end_date_is_required' }}</span>
    </div>
  </form>
  <div>
    <h4 translate>{{ 'invoices.previous_closings' }}</h4>
    <table class="table closings-table">
      <thead>
        <tr>
          <th translate>{{ 'invoices.start_date' }}</th>
          <th translate>{{ 'invoices.end_date' }}</th>
          <th translate>{{ 'invoices.closed_at' }}</th>
          <th translate>{{ 'invoices.closed_by' }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>01/01/1970</td>
          <td>01/01/1971</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1971</td>
          <td>01/01/1972</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1972</td>
          <td>01/01/1973</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1973</td>
          <td>01/01/1974</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1974</td>
          <td>01/01/1975</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1975</td>
          <td>01/01/1976</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1976</td>
          <td>01/01/1977</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1977</td>
          <td>01/01/1978</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1978</td>
          <td>01/01/1979</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1979</td>
          <td>01/01/1980</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
        <tr>
          <td>01/01/1980</td>
          <td>01/01/2019</td>
          <td>04/01/2019 18:12</td>
          <td>Roger Rabbit</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-warning" ng-click="ok()" ng-disabled="closePeriodForm.$invalid" translate>{{ 'confirm' }}</button>
  <button class="btn btn-default" ng-click="cancel()" translate>{{ 'cancel' }}</button>
</div>