mp-common/common-filter-components/date-filter/date-filter.component.html

This is XPO MarketPlace common libary

<div class="xpo-filter-wrapper">
  <div class="xpo-bold">{{receivedDate}}</div>
  <div class="load-date-cont">
    <div class="input-load-date">
      <xpo-input-container>
        <input xpoInput [xpoDatepicker]="pickupStartDatePicker" id="pick-start-date" [(ngModel)]="filter.pickStartDate" (ngModelChange)="onDateChange()"
          placeholder="From" value="MM/DD/YYYY">
        <button xpoSuffix [xpoDatepickerToggle]="pickupStartDatePicker" id="pick-start-date-btn"></button>
      </xpo-input-container>
      <xpo-datepicker #pickupStartDatePicker></xpo-datepicker>
    </div>
    <div class="spacing"></div>
    <div class="input-load-date">
      <xpo-input-container>
        <input xpoInput class="input-load-date" [xpoDatepicker]="pickupEndDatePicker" id="pickup-end-date" [(ngModel)]="filter.pickEndDate"
          (ngModelChange)="onDateChange()" placeholder="To" value="MM/DD/YYYY">
        <button xpoSuffix [xpoDatepickerToggle]="pickupEndDatePicker" id="pickup-end-date-btn"></button>
      </xpo-input-container>
      <xpo-datepicker #pickupEndDatePicker></xpo-datepicker>
    </div><br>
  </div>
</div>
<div class="xpo-filter-wrapper">
  <div class="xpo-bold">{{scheduledDate}}</div>
  <div class="load-date-cont">
    <div class="input-load-date">
      <xpo-input-container>
        <input xpoInput [xpoDatepicker]="deliveryStartDatePicker" id="delivery-start-date" [(ngModel)]="filter.deliveryStartDate"
          (ngModelChange)="onDateChange()" placeholder="From" value="MM/DD/YYYY">
        <button xpoSuffix [xpoDatepickerToggle]="deliveryStartDatePicker" id="delivery-start-date-btn"></button>
      </xpo-input-container>
      <xpo-datepicker #deliveryStartDatePicker></xpo-datepicker>
    </div>
    <div class="spacing"></div>
    <div class="input-load-date">
      <xpo-input-container>
        <input xpoInput class="input-load-date" [xpoDatepicker]="deliveryEndDatePicker" id="delivery-end-date" [(ngModel)]="filter.deliveryEndDate"
          (ngModelChange)="onDateChange()" placeholder="To" value="MM/DD/YYYY">
        <button xpoSuffix [xpoDatepickerToggle]="deliveryEndDatePicker" id="delivery-end-date-btn"></button>
      </xpo-input-container>
      <xpo-datepicker #deliveryEndDatePicker></xpo-datepicker>
    </div>
  </div>
</div>