src/app/logging/logging.component.html

@@ -27,24 +27,30 @@
                     {{ "fromDate" | translate }}
                     <span class="mandatory">*</span>
                   </label>
-                  <input
-                    type="date"
-                    formControlName="fromDate"
-                    class="form-control"
-                    [max]="maxDate"
-                  />
+                  <div class="date-input-wrapper">
+                    <input
+                      type="date"
+                      formControlName="fromDate"
+                      class="form-control"
+                      [max]="maxDate"
+                    />
+                    <i class="fas fa-calendar calendar-icon"></i>
+                  </div>
                 </div>
 
                 <div class="col-md-6">
                   <label>
                     {{ "toDate" | translate }} <span class="mandatory">*</span>
                   </label>
-                  <input
-                    type="date"
-                    formControlName="toDate"
-                    class="form-control"
-                    [max]="maxDate"
-                  />
+                  <div class="date-input-wrapper">
+                    <input
+                      type="date"
+                      formControlName="toDate"
+                      class="form-control"
+                      [max]="maxDate"
+                    />
+                    <i class="fas fa-calendar calendar-icon"></i>
+                  </div>
                 </div>
               </div>
 

src/app/logging/logging.component.scss

@@ -0,0 +1,29 @@
+.date-input-wrapper {
+  position: relative;
+  
+  input[type="date"] {
+    cursor: pointer;
+    padding-right: 35px;
+    
+    &::-webkit-calendar-picker-indicator {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+  
+  .calendar-icon {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: #6c757d;
+  }
+}