Formatting Date for Display

[CynthiaBlue]

I have my data stored in a Firebase Database and I'm using a q-input as a date to get the date from the user and store it. It's stored in Firebase as a string.

I want to change the display so it shows as "Wednesday, January 12, 2022". So I'm using this to format the date:

 listChange.fb_eventStartDate = date.formatDate(listChange.fb_eventStartDate, 'dddd - MM/DD/YYYY - HH:mm:ss')

I have the HH:mm:sss just so I can see the time. When I do that to change the format of the date inside my array, then display it on my page, when my date is stored as 2022-04-01 in Firebase, the date being displayed on my page is showing up as 3/31/2022.

Why is it subtracting a day when it's displayed?

[pikil]

Did you try to use Date() object (based on listChange.fb_eventStartDate) instead of the raw string in date.formatDate()?
What does it show in that case?

[yusufkandemir]

The output for

date.formatDate('2022-04-01', 'dddd - MM/DD/YYYY - HH:mm:ss')

is: Friday - 04/01/2022 - 03:00:00 on my machine. The output was different for your case, so let me explain the reason.

2022-04-01 is not a date object or a UNIX timestamp, it's a timestamp string.

From Quasar Date Utils docs:

Most Quasar date functions take as parameter either a Unix timestamp or a String representing a date which needs to be parsable by the native JS Date constructor.

So, it takes us to MDN docs for Date() constructor:

Note: Parsing of date strings with the Date constructor (and Date.parse(), which works the same way) is strongly discouraged due to browser differences and inconsistencies.

• Support for RFC 2822 format strings is by convention only.
• Support for ISO 8601 formats differs in that date-only strings (e.g. "1970-01-01") are treated as UTC, not local.

So, fortunately, Quasar has extractDate helper, which helps to convert a date string in any format to a Date object.

import { date } from 'quasar'
const { extractDate, formatDate } = date

const startDate = extractDate(listChange.fb_eventStartDate, 'YYYY-MM-DD')

listChange.fb_eventStartDate = formatDate(startDate, 'dddd - MM/DD/YYYY - HH:mm:ss') // Your test format

listChange.fb_eventStartDate = formatDate(startDate, 'dddd, MMMM DD, YYYY') // The actual format you want

[CynthiaBlue]

Thank you!

[CynthiaBlue]

Okay... so I'm using extractDate to save my date to the database, which is working great. However, it's saving it in my local time zone, and I'd love to save it as UTC. The Quasar date utils docs say this is possible, but doesn't give an example of how to to it. It just says:

You can pass a third argument (a Boolean) for setting UTC time (true) instead of local time.

Can you give me an example of where to put that true? Thanks!