diff --git a/app/modules/components/due-date/due-date-popover.directive.coffee b/app/modules/components/due-date/due-date-popover.directive.coffee
index 36a67c32..4a23e3fc 100644
--- a/app/modules/components/due-date/due-date-popover.directive.coffee
+++ b/app/modules/components/due-date/due-date-popover.directive.coffee
@@ -22,33 +22,38 @@ module = angular.module("taigaComponents")
 dueDatePopoverDirective = ($translate, datePickerConfigService) ->
     return {
         link: (scope, el, attrs, ctrl) ->
+            scope.open = false
+
             datePickerConfig = datePickerConfigService.get()
             _.merge(datePickerConfig, {
-                field: el.find('input.due-date')[0]
+                field: el.find('.due-date-button')[0]
                 container: el.find('.date-picker-container')[0]
-                bound: false
+                bound: true
+                onClose: () ->
+                    scope.open = false
+                    scope.$apply()
                 onSelect: () ->
                     ctrl.dueDate = this.getMoment().format('YYYY-MM-DD')
-                    el.find(".date-picker-popover").popover().close()
-                    scope.$apply()
             })
             el.picker = new Pikaday(datePickerConfig)
 
-            el.on "click", ".date-picker-popover-trigger", (event) ->
-                if ctrl.disabled()
+            el.on "click", ".due-date-button", (event) ->
+                if scope.open
+                    el.picker.hide()
                     return
-                event.preventDefault()
-                event.stopPropagation()
                 if !el.picker.getDate() && ctrl.dueDate
                     el.picker.setDate(moment(ctrl.dueDate).format('YYYY-MM-DD'))
-                el.find(".date-picker-popover").popover().open()
+                el.picker.show()
+                scope.open = true
+                scope.$apply()
 
             el.on "click", ".date-picker-clean", (event) ->
                 event.preventDefault()
                 event.stopPropagation()
                 ctrl.dueDate = null
                 el.picker.setDate(ctrl.dueDate)
-                el.find(".date-picker-popover").popover().close()
+                scope.open = false
+                el.picker.hide()
                 scope.$apply()
 
             scope.$on "status:changed", (ctx, status) ->
diff --git a/app/modules/components/due-date/due-date-popover.jade b/app/modules/components/due-date/due-date-popover.jade
index 1484c380..48836b5d 100644
--- a/app/modules/components/due-date/due-date-popover.jade
+++ b/app/modules/components/due-date/due-date-popover.jade
@@ -9,7 +9,7 @@
         type="hidden"
         picker-value="{{ vm.dueDate }}"
     )
-    div.date-picker-popover
+    div.date-picker-popover(ng-hide="!open")
         div.date-picker-container
         div.date-picker-popover-footer(ng-if="vm.dueDate")
             a.date-picker-clean(href="", title="{{'LIGHTBOX.SET_DUE_DATE.TITLE_ACTION_DELETE_DUE_DATE' | translate}}")
diff --git a/app/modules/components/due-date/due-date.scss b/app/modules/components/due-date/due-date.scss
index 5efd37dd..6c69da6d 100644
--- a/app/modules/components/due-date/due-date.scss
+++ b/app/modules/components/due-date/due-date.scss
@@ -98,14 +98,14 @@
 .date-picker-popover {
     background: $white;
     border: 1px solid $gray;
-    display: none;
     left: 0;
     overflow: visible;
     position: absolute;
     top: 56px;
     width: auto;
-    .pika-single {
+    .pika-single.is-bound {
         border: 0;
+        box-shadow: none;
     }
 }