I am using Material UI's <DatePicker/> component, integrated (as per MUI's recommendation) with the dayjs library. I want the dates to be in the YYYY-MM-DD format.
The problem is: when a date is selected, such as 2024-01-20, it is being converted to GMT, which is 2024-01-19 23:00, since I am in Stockholm, one hour ahead of GMT. That, in turn, is converted to 2024-01-19 when stored in the database. So basically, all the dates entered with the DatePicker component are being saved as "the day before".
I have wrapped the React App with the <LocalizationProvider dateAdapter={AdapterDayjs}></LocalizationProvider> tag, as stated in the MUI docs, and I have called these functions on dayjs, as suggested in the dayjs docs, but none seems to have any effect on my problem:
import dayjs from 'dayjs'
var utc = require('dayjs/plugin/utc')
var timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.tz.setDefault("Europe/Stockholm")
dayjs.utc().local()
I really don't need any dayjs functions, I just want to have a handy date picker component and store the result as a YYYY-MM-DD string. Ideally, it would validate that the date is valid, but I could do that elsewhere. What is the best way to proceed?