Allow memo date change Firefox / Safari

[RoccoSmit]

Describe the bug

in v0.22.4 the ability to update memo dates was reinstated. This feature works in Edge and Chrome but not Firefox or Safari

For Firefox this is due to needing a specific date string format provided as the datetime-local typed input value otherwise the time section of the datetime view is not populated. (Chromium based browsers don't have this issue because you can set the time on their calendar view, but you cant do this in Firefox of Safari)

This becomes an issue as Firefox only fires the change event needed to update the date time state if the complete date and time is set on the input

I dont have access to a Mac to debug and confirm this is the same reason for Safari not working, but a quick test showed Safari sets the date to undefined

POC to test this behaviour
https://jsfiddle.net/95c2zae1/3/

Date format used when featured worked in v0.22.2

memos/web/src/hooks/useDateTime.ts

Line 9 in e4a09c4

datePickerDateTime: dateTime && new Date(dateTime.getTime() - dateTime.getTimezoneOffset() * 60000).toISOString().split(".")[0],

Date format used in v0.22.4

memos/web/src/components/MemoEditor/index.tsx

Line 421 in a948555

value={displayTime.toLocaleString()}

I've created a PR that will address fixing the date format
#3783

Steps to reproduce

1 -> Create memo using Firefox/Safari
2 -> Edit memo -> change date
3 -> date does not update on UI

The version of Memos you're using.

v0.22.4

Screenshots or additional context

No response

[RoccoSmit]

Bump

30/08 Discord question re the issue https://discord.com/channels/1017113925776588902/1045138348165050409/1278800934012719104

[ilteoood]

Actually, on Chrome for Android is not working either

[lcfd]

I can confirm that by editing a memo's date on Safari it will show Invalid instead of the picked date. If I save the post the app sets automatically the date to 1 January 1970.

[RoccoSmit]

Note 1: the below should work as a temporary solution for Firefox and Safari(? untested) browsers, but it does not look like its a solution for chrome browsers on mobile (android)

Note 2: I only really care about the day of the memo not the time so this workaround is not suited if you are requiring time. In that case you are better off using a chromium browser to have time support.

Note 3: Please don't consider this a long term solution and close the issue 😅 The PR included in the issue looks like it is the correct way to fix this. I needed to get off 0.22.2 (last working date change) and onto 0.22.6 when it comes out (for the new partial string tags feature) hence the workaround while this issue is being reviewed

Go to settings -> system -> additional styles and add

input[type=datetime-local] {
    color: red;
    opacity: 100%;
}

When you edit a memo this will display the browser date picker rather than the Memos formatted representation of the date and it will set the colour to red so that I know its not ready to modify yet
e.g.

Next, go to settings -> system -> additional scripts and add

setInterval(() => {
    const matchingDates = document.querySelectorAll("input[type=datetime-local]");
    const matches = Array.prototype.slice.call(matchingDates);
                
    matches.forEach(match => {
        match.setAttribute("type", "date");
    })
}, 2000)

This will run a lookup every 2 seconds (2000 in code, fee free to modify milliseconds as needed) to see if a memo editor is open with an incompatible date time format. If one is found it change the format to date only.

In changing the format from date time to date only the CSS stops taking effect, moving the browser date picker back behind the Memos formatted representation of the date and then I know the date is ready to be set.
e.g.

I believe the 10am added to my dates are an adjustment for time zones

[ulimanaio]

Is this going to to be added in the next release?
Great work by the way I really enjoy your tool :)

[raymondyan]

https://github.com/user-attachments/assets/7adc14e0-224e-4b0b-9bf6-36419b39e253
your PR still could not fix my issue, that in ios safari, I could not change the date(the invalid date is fixed), i think it may because that the datetime-local is not support by safari-ios yet. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility

[raymondyan]

I have make the change like this and it seems solve the issue above, i thought there is the conflict in the editor focus and datepicker focus. could you make the change into your PR as well.

[johnnyjoygh]

For now, I would recommend using the MUI/DateTimePicker to solve this issue. https://mui.com/x/api/date-pickers/date-time-picker/

[RoccoSmit]

I'll give the MUI implementation a go on the weekend

[johnnyjoygh]

Update with cf1be81

[RoccoSmit]

😍

[Issues-translate-bot]

Issue is not in English. It has been translated automatically.

---

😍