From be92db49a9e27d7b8ee91335c8702ad951a05c9f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 3 Feb 2021 23:06:06 +0100
Subject: [PATCH] Fix setting dates in safari

Fixes #207
---
 cypress/integration/task/task.spec.js         | 31 ++++++++++++++++++-
 src/components/input/datepicker.vue           |  7 +++--
 src/helpers/time/createDateFromString.js      | 15 +++++++++
 src/helpers/time/createDateFromString.test.js | 13 ++++++++
 src/main.js                                   |  1 +
 5 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 src/helpers/time/createDateFromString.js
 create mode 100644 src/helpers/time/createDateFromString.test.js

diff --git a/cypress/integration/task/task.spec.js b/cypress/integration/task/task.spec.js
index ced98b605..34967d10e 100644
--- a/cypress/integration/task/task.spec.js
+++ b/cypress/integration/task/task.spec.js
@@ -175,7 +175,7 @@ describe('Task', () => {
 				.should('exist')
 		})
 
-		it.only('Can add a new comment', () => {
+		it('Can add a new comment', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
 			})
@@ -377,5 +377,34 @@ describe('Task', () => {
 			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
 				.should('not.contain', labels[0].title)
 		})
+
+		it('Can set a due date for a task', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				done: false,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Due Date')
+				.click()
+			cy.get('.task-view .columns.details .column')
+				.contains('Due Date')
+				.get('.date-input .datepicker .show')
+				.click()
+			cy.get('.datepicker .datepicker-popup a')
+				.contains('Tomorrow')
+				.click()
+			cy.get('.datepicker .datepicker-popup a.button')
+				.contains('Confirm')
+				.click()
+
+			cy.get('.task-view .columns.details .column')
+				.contains('Due Date')
+				.get('.date-input .datepicker-popup')
+				.should('not.exist')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
 	})
 })
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 029b419ab..4d9730af0 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -113,10 +113,11 @@
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 
-import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {format} from 'date-fns'
+import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import {createDateFromString} from '@/helpers/time/createDateFromString'
 
 export default {
 	name: 'datepicker',
@@ -168,10 +169,10 @@ export default {
 				this.date = null
 				return
 			}
-			this.date = new Date(newVal)
+			this.date = createDateFromString(newVal)
 		},
 		flatPickrDate(newVal) {
-			this.date = new Date(newVal)
+			this.date = createDateFromString(newVal)
 			this.updateData()
 		},
 	},
diff --git a/src/helpers/time/createDateFromString.js b/src/helpers/time/createDateFromString.js
new file mode 100644
index 000000000..62f22942e
--- /dev/null
+++ b/src/helpers/time/createDateFromString.js
@@ -0,0 +1,15 @@
+/**
+ * Returns a new date from any format in a way that all browsers, especially safari, can understand.
+ *
+ * @see https://kolaente.dev/vikunja/frontend/issues/207
+ *
+ * @param dateString
+ * @returns {Date}
+ */
+export const createDateFromString = dateString => {
+	if (dateString.includes('-')) {
+		dateString = dateString.replace(/-/g, "/")
+	}
+
+	return new Date(dateString)
+}
diff --git a/src/helpers/time/createDateFromString.test.js b/src/helpers/time/createDateFromString.test.js
new file mode 100644
index 000000000..8998341d9
--- /dev/null
+++ b/src/helpers/time/createDateFromString.test.js
@@ -0,0 +1,13 @@
+import {createDateFromString} from './createDateFromString'
+
+test('YYYY-MM-DD HH:MM', () => {
+	const dateString = '2021-02-06 12:00'
+	const date = createDateFromString(dateString)
+	expect(date).toBeInstanceOf(Date)
+	expect(date.getDate()).toBe(6)
+	expect(date.getMonth()).toBe(1)
+	expect(date.getFullYear()).toBe(2021)
+	expect(date.getHours()).toBe(12)
+	expect(date.getMinutes()).toBe(0)
+	expect(date.getSeconds()).toBe(0)
+})
diff --git a/src/main.js b/src/main.js
index d6da066a4..75829e37e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -201,6 +201,7 @@ Vue.mixin({
 			return date ? format(date, 'PPPPpppp') : ''
 		},
 		formatDateShort: date => {
+			console.log('short date', date)
 			return formatDate(date, 'PPpp')
 		},
 		error: (e, context, actions = []) => message.error(e, context, actions),