diff --git a/package-lock.json b/package-lock.json
index c969204..2918da1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2598,6 +2598,14 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "angular2-text-mask": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/angular2-text-mask/-/angular2-text-mask-9.0.0.tgz",
+      "integrity": "sha512-iALcnhJPS1zvX48d86rgUgDe/crX6XfhZrXC4Gdlo2/YwZW7u7KJZY6/b3ieSCIWVq/E6p+wDCzeo3E6leRjDA==",
+      "requires": {
+        "text-mask-core": "^5.0.0"
+      }
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -13311,6 +13319,11 @@
       "integrity": "sha1-F7Ye9mWk82gR8uofAaIjtL5hqyY=",
       "dev": true
     },
+    "text-mask-core": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/text-mask-core/-/text-mask-core-5.1.2.tgz",
+      "integrity": "sha1-gN1evgSCV1fkZhnmkUB6n4s8G28="
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
diff --git a/package.json b/package.json
index a15fef7..8cf037c 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@angular/material": "^10.0.0 | ^11.0.0"
   },
   "dependencies": {
+    "angular2-text-mask": "^9.0.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
diff --git a/projects/angular-material-formio/src/lib/angular-material-formio.module.ts b/projects/angular-material-formio/src/lib/angular-material-formio.module.ts
index 9372b8c..dd4f33d 100644
--- a/projects/angular-material-formio/src/lib/angular-material-formio.module.ts
+++ b/projects/angular-material-formio/src/lib/angular-material-formio.module.ts
@@ -64,6 +64,8 @@ import { FormioFormFieldComponent } from './components/formio-form-field/formio-
 import { LabelComponent } from './components/label/label.component';
 import { MaskDirective } from './directives/mask.directive';
 
+import { TextMaskModule } from 'angular2-text-mask';
+
 export {
   FormioComponent,
   MaterialButtonComponent,
@@ -144,6 +146,7 @@ export {
     MaskDirective
   ],
   imports: [
+    TextMaskModule,
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
diff --git a/projects/angular-material-formio/src/lib/components/date/date.component.ts b/projects/angular-material-formio/src/lib/components/date/date.component.ts
index f19e651..30a7139 100644
--- a/projects/angular-material-formio/src/lib/components/date/date.component.ts
+++ b/projects/angular-material-formio/src/lib/components/date/date.component.ts
@@ -1,7 +1,7 @@
 import { Component, ViewChild } from '@angular/core'
 import { MaterialComponent } from '../MaterialComponent';
 import DateTimeComponent from 'formiojs/components/datetime/DateTime.js';
-import { momentDate } from 'formiojs/utils/utils.js';
+import { momentDate, convertFormatToMoment, convertFormatToMask, getInputMask } from 'formiojs/utils/utils.js';
 import {FormControl} from '@angular/forms';
 @Component({
   selector: 'mat-formio-date',
@@ -21,29 +21,11 @@ import {FormControl} from '@angular/forms';
         </mat-datepicker-toggle>
         <mat-form-field class="example-full-width">
           <input
-            *ngIf="enableTime && enableDate"
             matInput
-            type="datetime-local"
             [placeholder]="instance.component.placeholder"
             [formControl]="displayControl"
-            (input)="onChangeInput()"
-            [readonly]="!allowManualInput"
-          >
-          <input
-            *ngIf="enableTime && !enableDate"
-            matInput
-            [placeholder]="instance.component.placeholder"
-            [formControl]="displayControl"
-            [matMask]="formatTime"
-            (input)="onChangeInput()"
-            [readonly]="!allowManualInput"
-          >
-          <input
-            *ngIf="!enableTime && enableDate"
-            matInput
-            [placeholder]="instance.component.placeholder"
-            [formControl]="displayControl"
-            (input)="onChangeInput()"
+            [textMask]="{mask: getMask()}"
+            (input)="onChange"
             [readonly]="!allowManualInput"
           >
         </mat-form-field>
@@ -87,19 +69,38 @@ export class MaterialDateComponent extends MaterialComponent {
   }
 
   setDisplayControlValue(value = null) {
-    const format = `YYYY-MM-DD${this.enableTime ? 'THH:mm' : ''}`;
+    const format = this.getFormat();
+
     value = value || this.getDateTimeValue();
 
     if (value) {
-      this.displayControl.setValue(momentDate(value).format(format));
+      value = momentDate(value).format(format);
+      this.displayControl.setValue(value);
     }
     else {
       this.displayControl.setValue('');
     }
   }
 
+  getFormat() {
+    const {format} = this.instance.component;
+
+    if (!format) {
+      return 'YYYY-MM-DD hh:mm A';
+    }
+
+    return convertFormatToMoment(format);
+  }
+
+  getMask() {
+    const {format} = this.instance.component;
+    const formioFormat = convertFormatToMask(format);
+
+    return getInputMask(formioFormat);
+  }
+
   onChangeDate(event) {
-    this.selectedDate = momentDate(event).utc().format();
+    this.selectedDate = momentDate(event).format(this.getFormat());
     this.control.setValue(this.selectedDate);
     this.setDateTime();
   }
@@ -111,14 +112,6 @@ export class MaterialDateComponent extends MaterialComponent {
     }
   }
 
-  onChangeInput() {
-    const value = this.dateFilter(this.displayControl.value) &&
-    this.checkMinMax(this.displayControl.value) ? this.displayControl.value : '';
-
-    this.control.setValue(value);
-    this.onChange();
-  }
-
   getDateTimeValue() {
     let newDate = '';
     let isSelectedTime = false;
@@ -138,7 +131,6 @@ export class MaterialDateComponent extends MaterialComponent {
           ? momentDate(this.selectedDate)
            .hours(Number.parseInt(hours))
            .minutes(Number.parseInt(minutes))
-           .utc()
           : this.selectedDate;
     }
 
@@ -151,13 +143,11 @@ export class MaterialDateComponent extends MaterialComponent {
       newDate = momentDate(new Date())
         .hours(Number.parseInt(hours))
         .minutes(Number.parseInt(minutes))
-        .seconds(0)
-        .utc();
+        .seconds(0);
     }
 
     return newDate;
   }
-
   setDateTime() {
     this.control.setValue(this.getDateTimeValue());
     this.onChange();
@@ -206,11 +196,13 @@ export class MaterialDateComponent extends MaterialComponent {
     return readonly || disabled || this.instance.root.options.readOnly
   }
 
-  public formatTime = (value) => {
+  public formatTime = (value) =>  {
+    const format = this.getFormat();
+
     if (!value) {
-      return this.instance.emptyValue;
+      return format;
     }
-    return momentDate(value).format(this.instance.component.format);
+    return momentDate(value).format(format);
   }
 
   setValue(value) {