Issue with post dates (timezone and locale date format)

[dami-i]

I've encountered an issue with the post date, regarding timezone and date format. Even with the .toLocaleDateString() it output all kinds of buggy results on the built page, different from the actual date I typed on the header of the .md files.

I'm located in Brazil (UTC -3 hours) and our locale date format is dd/MM/yyyy.

I managed to get around the problem by making some modifications to the code as follows, and I thought others could benefit from it, if I implemented correctly.

(I'm not able to test on other timezones and other locale date formats)

/src/lib/get-posts.js

...
// ADDED THIS FUNCTION
function timezoneOffset(date) {
  const offsetInMilliseconds = new Date().getTimezoneOffset() * 60 * 1000;
  return new Date(new Date(date).getTime() + offsetInMilliseconds);
}

// Get all posts and add metadata
const posts = Object.entries(import.meta.globEager('/posts/**/*.md'))
  .map(([filepath, post]) => {
    return {
      ...
      // remove timezone from date
      date: post.metadata.date ? timezoneOffset(new Date(post.metadata.date)).toISOString() : undefined, // WRAPPED THE DATE WITH IT HERE
      ...
...

/src/lib/components/PostPreview.svelte

...
    <div class="opacity-70">
      <time>{format(new Date(parseISO(post.date)), 'dd/MM/yyyy')}</time> <!-- CHANGED HERE -->
      •
      <span>{post.readingTime}</span>
    </div>
...

/src/routes/posts/[slug].svelte

...
  <div class="opacity-70">
    <time datetime={new Date(date).toISOString()}>{format(new Date(parseISO(date)), 'dd/MM/yyyy')}</time> <!-- AND HERE -->
    •
    <span>{readingTime}</span>
  </div>
...

If this works for other regions of the world, it'd be nice if someone more experienced than me could send a pull request.

[mattjennings]

@dami-i thanks for reporting this! I added parseISO as you suggested. Instead of using that offset timezone function, I opted to format the metadata date as ISO with the date only (yyyy-MM-dd) and I think that should work.

https://github.com/mattjennings/sveltekit-blog-template/commit/a86c4a7abe6cf33ba2fa5dc184c251a3c8d61514

Would you be able to checkout the latest on this template and see if the build renders the dates properly?

[dami-i]

@dami-i thanks for reporting this! I added parseISO as you suggested. Instead of using that offset timezone function, I opted to format the metadata date as ISO with the date only (yyyy-MM-dd) and I think that should work.

a86c4a7

Would you be able to checkout the latest on this template and see if the build renders the dates properly?

Thank you for paying attention to this issue.

It works better now, no buggy dates were displayed when testing. This one problem has been solved. ✔

However, timezone is still an issue. Not sure if this is a critical issue that's worth digging deep into a solution, though.

This is what happens in detail:

/posts/lorem-ipsum.md

---
title: Lorem Ipsum
date: 2022-01-02
---

Parsed ISO string: 2022-01-02T00:00:00.000Z

As I'm located in a region that's UTC -3 hours, the date rendered on the page is 2022-01-01T21:00:00.000Z, which resolves to "January 1, 2022" (or "01/01/2022" on my locale date format).

If I type date: 2022-01-02 03:00:00 on the post header, it works just fine.

[mattjennings]

@dami-i sorry for the delay - I gave this another look and added that timezone offsetting function. I've learned a bit more on how Dates work after this 😅 thanks a bunch for opening the issue with your solutions.

https://github.com/mattjennings/sveltekit-blog-template/commit/e5c2ebc3aad575455625e7f8b368e8e496b210a3

[dami-i]

@dami-i sorry for the delay - I gave this another look and added that timezone offsetting function. I've learned a bit more on how Dates work after this 😅 thanks a bunch for opening the issue with your solutions.

e5c2ebc

Date in JS is indeed hard to learn and understand completely. Thank you for this awesome template.

[yannickh2]

I might also have a similar problem: Everything worked a few minutes ago. When I run dev I get this error and the app throws a 500 internal server error

` VITE v4.2.1 ready in 895 ms

➜ Local: http://localhost:5174/ ➜ Network: use --host to expose ➜ press h to show help 4:28:17 PM [vite-plugin-svelte] ssr compile in progress ... RangeError: Invalid time value at Proxy.format (/home/test/Documents/test.com/node_modules/date-fns/format/index.js:372:11) at PostDate.svelte:23:7 at Object.$$render (/node_modules/svelte/internal/index.mjs:1973:22) at eval (/src/lib/components/PostsList.svelte:17:149) at Module.each (/node_modules/svelte/internal/index.mjs:1939:16) at eval (/src/lib/components/PostsList.svelte:16:134) at Object.$$render (/node_modules/svelte/internal/index.mjs:1973:22) at eval (/src/routes/+page.svelte:29:92) at Object.$$render (/node_modules/svelte/internal/index.mjs:1973:22) at Object.default (root.svelte:42:40) 4:28:19 PM [vite-plugin-svelte] ssr compile done. package files time avg sveltekit-blog-template 16 0.20s 12.7ms RangeError: Invalid time value at Proxy.format (/home/test/Documents/test.com/node_modules/date-fns/format/index.js:372:11) at PostDate.svelte:23:7 at Object.$$render (/node_modules/svelte/internal/index.mjs:1973:22) at eval (/src/lib/components/PostsList.svelte:17:149) at Module.each (/node_modules/svelte/internal/index.mjs:1939:16) at eval (/src/lib/components/PostsList.svelte:16:134) at Object.$$render (/node_modules/svelte/internal/index.mjs:1973:22) at eval (/src/routes/+page.svelte:29:92) at Object.$$render (/node_modules/svelte/internal/index.mjs:1973:22) at Object.default (root.svelte:42:40) `

I feel I only added some text to a blog post and suddenly this happened. Can I somehow give you more debug information?