D-Net

<div [formGroup]="searchCriteriaForm">

  <div class="p-fluid p-grid">

    <div class="p-col-12">

      <div class="p-grid p-formgrid">

        <div class="p-field p-col-12 p-sm-6 p-lg-3">

          <label for="dateFrom">

            Date From

          </label>

      <p-calendar id="dateFrom"

                  formControlName="dateFrom"

                  [maxDate]="searchCriteriaForm.get('dateFrom').value"

                  [readonlyInput]="false"

                  showButtonBar="true"

                  todayButtonStyleClass="p-button-set-today"

                  clearButtonStyleClass="p-button-clear-date"

                  [showIcon]="true"

                  dateFormat="dd/mm/yy">

      </p-calendar>

        </div>

        <div class="p-field p-col-12 p-sm-6 p-lg-3">

          <label for="dateTo">

            Date To

          </label>

          <p-calendar id="dateTo"

                  formControlName="dateTo"

                  showButtonBar="true"

                  [minDate]="searchCriteriaForm.get('dateTo').value"

                  [readonlyInput]="false"

                  todayButtonStyleClass="p-button-set-today"

                  clearButtonStyleClass="p-button-clear-date"

                  [showIcon]="true"

                  dateFormat="dd/mm/yy">

      </p-calendar>

        </div>

        <div class="p-field p-col-12 p-sm-6 p-lg-3">

          <label for="clientName">

            iPower Client Name

          </label>

          <p-autoComplete id="clientName"

                      formControlName="clientName"

                      [suggestions]="iPowerClientNameSuggestions"

                      [forceSelection]="true"

                      (completeMethod)="autosuggestIPowerClientName($event)"

                      (onSelect)="iPowerClientNameSelected($event)">

      </p-autoComplete>

        </div>

        <div class="p-field p-col-12 p-sm-6 p-lg-3">

          <label for="clientId">

            iPower Client Code

          </label>

          <p-autoComplete id="clientId"

                      formControlName="clientId"

                      [suggestions]="iPowerClientCodeSuggestions"

                      [forceSelection]="true"

                      (completeMethod)="autosuggestIPowerClientCode($event)"

                      (onSelect)="iPowerClientCodeSelected($event)">

      </p-autoComplete>

        </div>

      </div>

    </div>

    <div class="p-col-12">

      <div class="p-grid p-formgrid">

        <div class="p-field p-col-12 p-sm-6 p-lg-3">

          <label for="processId">

            Process Id

          </label>

          <input id="processId"

             type="text"

             pInputText

             formControlName="processId">

        </div>

        <div class="p-field p-col-12 p-sm-6 p-lg-3">

          <label for="jobName">

            Job Name

          </label>

          <input id="jobName"

             type="text"

             pInputText

             formControlName="jobName">

        </div>

        <div class="p-field p-col-12 p-sm-6 p-lg-3">

          <label for="dmsFileCode">

            File Code

          </label>

          <input id="dmsFileCode"

             type="text"

             pInputText

             formControlName="dmsFileCode">

        </div>

      </div>

    </div>

  </div>

</div>