Fix setting dates in safari

Fixes #207

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')
+		})
 	})
 })

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()
 		},
 	},

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)
+}

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)
+})

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),