diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index 1c41c5ea0..c34eab09d 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -36,7 +36,7 @@
 			@remove="removeUserFromCard" />
 
 		<DueDateSelector :card="card"
-			:can-edit="canEdit && !saving"
+			:can-edit="canEdit"
 			@change="updateCardDue" />
 
 		<div v-if="projectsEnabled" class="section-wrapper">
diff --git a/src/components/card/DueDateSelector.vue b/src/components/card/DueDateSelector.vue
index 711566e58..e04055406 100644
--- a/src/components/card/DueDateSelector.vue
+++ b/src/components/card/DueDateSelector.vue
@@ -92,6 +92,7 @@ import {
 	NcButton,
 	NcDateTimePickerNative,
 } from '@nextcloud/vue'
+import readableDate from '../../mixins/readableDate.js'
 import { getDayNamesMin, getFirstDay, getMonthNamesShort } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
@@ -118,6 +119,9 @@ export default defineComponent({
 		NcActionSeparator,
 		NcDateTimePickerNative,
 	},
+	mixins: [
+		readableDate,
+	],
 	props: {
 		card: {
 			type: Object,
@@ -225,9 +229,6 @@ export default defineComponent({
 		archiveUnarchiveCard() {
 			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
 		},
-		formatReadableDate(date) {
-			return moment(date).format('lll')
-		},
 	},
 })
 </script>
diff --git a/src/components/cards/badges/Done.vue b/src/components/cards/badges/Done.vue
index a88d22791..74679cc30 100644
--- a/src/components/cards/badges/Done.vue
+++ b/src/components/cards/badges/Done.vue
@@ -24,7 +24,7 @@
 	<div v-if="card" class="done">
 		<transition name="zoom">
 			<div class="icon-check-circle">
-				<CheckCircle :size="20" />
+				<CheckCircle :size="20" :title="formatReadableDate(card.done)" />
 			</div>
 		</transition>
 	</div>
@@ -32,12 +32,16 @@
 
 <script>
 import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
+import readableDate from '../../../mixins/readableDate.js'
 
 export default {
 	name: 'Done',
 	components: {
 		CheckCircle,
 	},
+	mixins: [
+		readableDate,
+	],
 	props: {
 		card: {
 			type: Object,
diff --git a/src/mixins/readableDate.js b/src/mixins/readableDate.js
new file mode 100644
index 000000000..3205431f5
--- /dev/null
+++ b/src/mixins/readableDate.js
@@ -0,0 +1,33 @@
+/*
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import moment from '@nextcloud/moment'
+
+export default {
+	computed: {
+		formatReadableDate() {
+			return (timestamp) => {
+				return moment(timestamp).format('lll')
+			}
+		},
+	},
+}