[US TRTL-644] [REDESIGN] App Archive Research tabs

ui/ui-frontend-common/src/sass/_input.scss

@@ -61,6 +61,18 @@ $anim-timing: 150ms ease-out;
         width: 100%;
     }
 
+    &.vitamui-date {
+        .mat-form-field-underline {
+            display: none;
+          }
+        .mat-icon-button {
+            font-size: 25px !important;
+            .mat-icon {
+                font-size: 25px !important;
+            }
+        }
+    }
+
     textarea {
         resize: none;
         width: 100%;

ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.html

@@ -212,6 +212,23 @@
             </div>
         </div>
     </div>
+
+
+  <h4>Date</h4>
+  <div class="d-flex">
+    <mat-form-field class="col-3 vitamui-input vitamui-date mr-4">
+      <input [matDatepicker]="pickerStart"  matInput placeholder="Depuis">
+      <mat-datepicker-toggle [for]="pickerStart" matSuffix></mat-datepicker-toggle>
+      <mat-datepicker #pickerStart></mat-datepicker>
+    </mat-form-field>
+
+    <mat-form-field class="col-3 vitamui-input vitamui-date mr-4">
+      <input [matDatepicker]="pickerEnd"  matInput placeholder="jusqu'au">
+      <mat-datepicker-toggle [for]="pickerEnd" matSuffix></mat-datepicker-toggle>
+      <mat-datepicker #pickerEnd></mat-datepicker>
+    </mat-form-field>
+  </div>
+
     <h4>Duration</h4>
     <div class="d-flex flex-column">
         <div class="row m-0 mt-4 pl-3">

ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.module.ts

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { VitamUICommonModule } from 'ui-frontend-common';
 import { InputsComponent } from './inputs.component';
@@ -13,8 +18,13 @@ import { InputsComponent } from './inputs.component';
     VitamUICommonModule,
     ReactiveFormsModule,
     MatSelectModule,
-    MatButtonToggleModule
+    MatButtonToggleModule,
+    MatFormFieldModule,
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule
   ],
-  exports: [InputsComponent]
+  exports: [InputsComponent],
+  providers: [{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }],
 })
-export class InputsModule { }
\ No newline at end of file
+export class InputsModule { }