diff --git a/ui/ui-frontend-common/src/sass/_input.scss b/ui/ui-frontend-common/src/sass/_input.scss
index 1b10d35eff7ba6543a69e46e22a737e45bfc42ce..a6f320e786271345788333af3a8d2776be7a0366 100644
--- a/ui/ui-frontend-common/src/sass/_input.scss
+++ b/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%;
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.html
index d46ea4ff21c60794e1ab9550c39cae6489d866ac..c7c1a4162073503f9886f8b62057482c582657c8 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.html
+++ b/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">
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.module.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.module.ts
index 7794b93cb1287b34d4194142905f7da026f3b7b6..c3a7ff6d476082cc202e7a3937d544b02d5f6847 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.module.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.module.ts
@@ -1,7 +1,12 @@
 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 { }