Invalid time value for starting date with Safari #1738

Closed
opened 2020-08-09 11:50:35 +00:00 by YasserAntonio · 10 comments

Hello

I'm using the latest release of vikunja api (1.4.0) and front end (2 days agos) for linux-arm and when i try to set a starting date on a task with Safari browser it shows me an invalide time value error. I can reproduce this issue on the Demotoo but for both my local an demo Vikunja i have no issue with Chrome.

Since i use Vikunja on an Iphone which works mainly with Safari it could be a bit problematic to describe a task using dates features solely on my phone.

My Chrome and Safari browser are in French settings and ma raspberry pi system is in english settings.

Hello I'm using the latest release of vikunja api (1.4.0) and front end (2 days agos) for linux-arm and when i try to set a starting date on a task with Safari browser it shows me an invalide time value error. I can reproduce this issue on the Demotoo but for both my local an demo Vikunja i have no issue with Chrome. Since i use Vikunja on an Iphone which works mainly with Safari it could be a bit problematic to describe a task using dates features solely on my phone. My Chrome and Safari browser are in French settings and ma raspberry pi system is in english settings.
Owner

I can't reproduce this either on Firefox Desktop but I can't add a due date at all on mobile (either firefox or chrome) on Android. This might be related, I'll investigate a bit once I get my hands on an ios device.

I can't reproduce this either on Firefox Desktop but I can't add a due date at all on mobile (either firefox or chrome) on Android. This might be related, I'll investigate a bit once I get my hands on an ios device.
Owner

I can confirm this is still a problem, but only on iOS. Unfortunately I don't own a mac, looking into browserstack now to get a remote debug shell so that I can better debug this.

I can confirm this is still a problem, but only on iOS. Unfortunately I don't own a mac, looking into browserstack now to get a remote debug shell so that I can better debug this.
konrad added the
kind/bug
label 2020-11-12 19:20:52 +00:00
[Vue warn]: Error in render: "RangeError: Invalid time value"

found in

---> <Datepicker> at src/components/input/datepicker.vue
       <TaskDetailView> at src/views/tasks/TaskDetailView.vue
         <ContentAuth> at src/components/home/contentAuth.vue
           <App> at src/App.vue
             <Root>

I can reproduce this problem on iOS and Safari.

``` [Vue warn]: Error in render: "RangeError: Invalid time value" found in ---> <Datepicker> at src/components/input/datepicker.vue <TaskDetailView> at src/views/tasks/TaskDetailView.vue <ContentAuth> at src/components/home/contentAuth.vue <App> at src/App.vue <Root> ``` I can reproduce this problem on iOS and Safari.
Owner

@bochachaner Would you be able to add a bit of debug logging and build the frontend on your machine to get more information about the erros?
I still don't have access to a mac, so I'm unable to check this.

@bochachaner Would you be able to add a bit of debug logging and build the frontend on your machine to get more information about the erros? I still don't have access to a mac, so I'm unable to check this.

I think safari is not able to handle new Date("2021-01-05 12:00")

Invalid Date
new Date("2021-01-05T12:00")

Tue Jan 05 2021 12:00:00 GMT+0100 (CET)

Not sure if it is really -> "dateFormat: 'Y-m-dTH:i'" in Datepicker.

or if the string shall be splitted:

var a = newVal.split(/[^0-9]/);
this.date = new Date(a[0],a[1]-1,a[2],a[3]);
I think safari is not able to handle new Date("2021-01-05 12:00") ``` Invalid Date ``` ``` new Date("2021-01-05T12:00") ``` > Tue Jan 05 2021 12:00:00 GMT+0100 (CET) Not sure if it is really -> "dateFormat: 'Y-m-dTH:i'" in Datepicker. or if the string shall be splitted: ``` var a = newVal.split(/[^0-9]/); this.date = new Date(a[0],a[1]-1,a[2],a[3]); ```
Owner

Looks like this is the problem: https://stackoverflow.com/q/4310953/10924593

I think this could cause a whole heap of issues since flatpickr (the day/month/year selector of the datepicker) requires the date to have the format YYYY-MM-DD IIRC.

This is probably also a problem in multiple places and should be fixed in multiple places. Reminders shouldn't work either, could you check? Same for due dates and end dates.

Could you add something like

console.log(newVal)

in src/components/input/datepicker.vue:171 and src/components/input/datepicker.vue:174 (before the new Date() part to see what gets passed to the function? In the case of task dates, these should already be a proper js date.
If it is failing before, could you add logging in src/models/task.js:8 (before the dates get parsed from the api)?

Looks like this is the problem: https://stackoverflow.com/q/4310953/10924593 I think this could cause a whole heap of issues since flatpickr (the day/month/year selector of the datepicker) requires the date to have the format `YYYY-MM-DD` IIRC. This is probably also a problem in multiple places and should be fixed in multiple places. Reminders shouldn't work either, could you check? Same for due dates and end dates. Could you add something like ``` console.log(newVal) ``` in `src/components/input/datepicker.vue:171` and `src/components/input/datepicker.vue:174` (before the `new Date()` part to see what gets passed to the function? In the case of task dates, these should already be a proper js date. If it is failing before, could you add logging in `src/models/task.js:8` (before the dates get parsed from the api)?
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 029b419..cfe14b3 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -168,14 +168,20 @@ export default {
                                this.date = null
                                return
                        }
-                       this.date = new Date(newVal)
+                       this.setNewDate(newVal)
+
                },
                flatPickrDate(newVal) {
-                       this.date = new Date(newVal)
+                       this.setNewDate(newVal)
                        this.updateData()
                },
        },
        methods: {
+               setNewDate(newDate)
+               {
+                       const a = newDate.split(/[^0-9]/);
+            this.date = new Date(a[0],a[1]-1,a[2],a[3], a[4]);
+               },
                updateData() {
                        this.changed = true
                        this.$emit('input', this.date)

solved the problem on safari (os x / ios) and also works fine on chrome.

``` diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue index 029b419..cfe14b3 100644 --- a/src/components/input/datepicker.vue +++ b/src/components/input/datepicker.vue @@ -168,14 +168,20 @@ export default { this.date = null return } - this.date = new Date(newVal) + this.setNewDate(newVal) + }, flatPickrDate(newVal) { - this.date = new Date(newVal) + this.setNewDate(newVal) this.updateData() }, }, methods: { + setNewDate(newDate) + { + const a = newDate.split(/[^0-9]/); + this.date = new Date(a[0],a[1]-1,a[2],a[3], a[4]); + }, updateData() { this.changed = true this.$emit('input', this.date) ``` solved the problem on safari (os x / ios) and also works fine on chrome.
Owner

This seems also kind of relevant: https://github.com/date-fns/date-fns/issues/2130

This seems also kind of relevant: https://github.com/date-fns/date-fns/issues/2130
Owner

I finally got access to browserstack so I could debug this a bit.

It looks like this is caused by flatpickrs date format: Safari can't handle something like 2021-02-03 09:00, but the other browsers can.

A real iso date like 2021-02-06T12:00:00+01:00 on the other hand works perfectly.

I'm trying to implement a fix with this: https://stackoverflow.com/a/5646753/10924593

@bochachaner I'd prefer that over your solution since I feel like it is a slightly simpler. But yours definitely pointed me in the right direction.

I finally got access to browserstack so I could debug this a bit. It looks like this is caused by flatpickrs date format: Safari can't handle something like `2021-02-03 09:00`, but the other browsers can. A real iso date like `2021-02-06T12:00:00+01:00` on the other hand works perfectly. I'm trying to implement a fix with this: https://stackoverflow.com/a/5646753/10924593 @bochachaner I'd prefer that over your solution since I feel like it is a slightly simpler. But yours definitely pointed me in the right direction.
konrad referenced this issue from a commit 2021-02-03 22:06:22 +00:00
Owner

Fixed in be92db49a9 - feel free to reopen if you find the issue persists.

Fixed in https://kolaente.dev/vikunja/frontend/commit/be92db49a9e27d7b8ee91335c8702ad951a05c9f - feel free to reopen if you find the issue persists.
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: vikunja/vikunja#1738
No description provided.