diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html
index a0001bd7e1..d72c2ed126 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html
@@ -18,6 +18,8 @@
     </div>
     <div class="mdl-cell mdl-cell--1-col">
         <button
+            [attr.id]="field.id+'-button'"
+            [disabled]="field.readOnly"
             class="mdl-button mdl-js-button mdl-button--icon"
             (click)="datePicker.toggle()">
             <i class="material-icons">date_range</i>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts
index 85ee7a8d49..7738c17871 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts
@@ -274,5 +274,19 @@ describe('DateWidget', () => {
             });
             widget.checkVisibility(widget.field);
         }));
+
+        it('should disable date button when is readonly', async(() => {
+            widget.field.readOnly = false;
+            fixture.detectChanges();
+
+            let dateButton = <HTMLButtonElement> element.querySelector('#date-field-id-button');
+            expect(dateButton.disabled).toBeFalsy();
+
+            widget.field.readOnly = true;
+            fixture.detectChanges();
+
+            dateButton = <HTMLButtonElement> element.querySelector('#date-field-id-button');
+            expect(dateButton.disabled).toBeTruthy();
+        }));
     });
 });